js_scripts/index.js

// Fix for cameraXPhone not working on mobile devices in PlayCanvas implementation

// The key issue is in the camera setup section of your PlayCanvas viewer
// Make sure these changes are applied to the camera creation code
// Look for the section where cameraEntity is created and positioned

// Create camera entity
cameraEntity = new pc.Entity('camera');
cameraEntity.addComponent('camera', {
  clearColor: new pc.Color(
    config.canvas_background ? parseInt(config.canvas_background.substr(1, 2), 16) / 255 : 0,
    config.canvas_background ? parseInt(config.canvas_background.substr(3, 2), 16) / 255 : 0,
    config.canvas_background ? parseInt(config.canvas_background.substr(5, 2), 16) / 255 : 0
  ),
  toneMapping: pc.TONEMAP_ACES
});

// Log the chosen camera position for debugging
console.log(`Setting camera position for ${isMobile ? 'mobile' : 'desktop'}: (${chosenCameraX}, ${chosenCameraY}, ${chosenCameraZ})`);

// Set camera position directly using X, Y, Z coordinates from config
cameraEntity.setPosition(chosenCameraX, chosenCameraY, chosenCameraZ);
cameraEntity.lookAt(modelEntity.getPosition());

// The resetCamera function should also be updated to use the correct values:
function resetCamera() {
  if (!cameraEntity || !modelEntity || !app) return;
  
  try {
    // Get the orbit camera script
    const orbitCam = cameraEntity.script.orbitCamera;
    if (!orbitCam) return;
    
    // Store model position
    const modelPos = modelEntity.getPosition();
    
    console.log(`Reset camera position for ${isMobile ? 'mobile' : 'desktop'}: (${chosenCameraX}, ${chosenCameraY}, ${chosenCameraZ})`);
    
    // 1. Create a temporary entity to help calculate new values
    const tempEntity = new pc.Entity();
    tempEntity.setPosition(chosenCameraX, chosenCameraY, chosenCameraZ);
    tempEntity.lookAt(modelPos);
    
    // 2. Calculate the distance between camera and model
    const distance = new pc.Vec3().sub2(
      new pc.Vec3(chosenCameraX, chosenCameraY, chosenCameraZ),
      modelPos
    ).length();
    
    // 3. Set camera position
    cameraEntity.setPosition(chosenCameraX, chosenCameraY, chosenCameraZ);
    cameraEntity.lookAt(modelPos);
    
    // 4. Update the orbit camera's pivot point
    orbitCam.pivotPoint = new pc.Vec3(modelPos.x, modelPos.y, modelPos.z);
    
    // 5. Set the distance
    orbitCam._targetDistance = distance;
    orbitCam._distance = distance;
    
    // Rest of your resetCamera function...
    // ...
  } catch (error) {
    console.error("Error resetting camera:", error);
  }
}