I’m having trouble getting the correct camera,position, as the behaviour of that variable seems to change when we enter an XR session with a render loop.
I have a group, and I add an object to it. When I move the group, the local position of the object stays at 0,0,0. However, when that object is a camera, then the position seems to change after awhile unexpectedly as show in the code below. If this is happening, how can I find the actual local position of the camera?
Here’s my code, below is the output I expected, and the output I actually get:
import * as THREE from ‘three’;
import { VRButton } from ‘./three/examples/jsm/webxr/VRButton’;
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera();
var renderer = new THREE.WebGLRenderer();
renderer.xr.enabled = true;
renderer.xr.setReferenceSpaceType(‘local’);
document.body.appendChild(renderer.domElement);
document.body.appendChild(VRButton.createButton(renderer));
renderer.xr.addEventListener( ‘sessionstart’, function(){
var group = new THREE.Group();
var object = new THREE.Group();
scene.add(group);
group.add(object);
group.add(camera);
var vector = new THREE.Vector3();
log_positions();
group.position.z--;
log_positions();
setTimeout(
log_positions,
50, // after about 10ms, the problem occurs
);
renderer.setAnimationLoop(function(){
renderer.render(scene, camera);
});
function log_positions() {
console.log("object.position: " + object.position.x + ", " + object.position.y + ", " + object.position.z);
console.log("camera.position: " + camera.position.x + ", " + camera.position.y + ", " + camera.position.z);
}
});
What I expected to see was:
object.position: 0, 0, 0
camera.position: 0, 0, 0
object.position: 0, 0, 0
camera.position: 0, 0, 0
object.position: 0, 0, 0
camera.position: 0, 0, 0
But what I actually see is:
object.position: 0, 0, 0
camera.position: 0, 0, 0
object.position: 0, 0, 0
camera.position: 0, 0, 0
object.position: 0, 0, 0
camera.position: 0, 0, -1 <----- ???
Thank you!