3dthree.jsquaternions360-virtual-reality

Three set object in front of camera in a dolly


I'm placing an object in front of the camera using

        var dist = -100;
        var vec = new THREE.Vector3( 0,  0, dist );
        vec.applyQuaternion( camera.quaternion );
        object.position.copy( vec );
        object.lookAt(camera.position);

This works really well.

I'm now having to rotate the camera (its for a VR video player) to set it's starting position and to do that and still work with WebVR boilerplate, I add the video to a dolly object and rotate that.

    dolly = new THREE.Group();
    dolly.position.set( 0, 0, 0 );
    scene.add( dolly );

    camera.up.set( 0, 1, 0 );
    dolly.add( camera );

And the object is now not in front of the camera. I'm trying to apply the dolly rotation to the vector to account for that angle.

        var rotation = new THREE.Euler().setFromQuaternion( camera.quaternion, camera.rotation.order );
        rotation.y += dolly.rotation.y;
        var quat = new THREE.Quaternion().setFromEuler(rotation, camera.rotation.order);
        vec.applyQuaternion( quat );

This mostly works when the camera is particular angles but sometimes not and the object is also rotated on it's x axis.

I assume rotation.y += dolly.rotation.y; is wrong but I'm not sure of a better way to merge the numbers.


Solution

  • @WestLangleys answer on here three.js tween object to front of camera

    Answered my question

          var pLocal = new THREE.Vector3( 0, 0, dist );
    
            var target = pLocal.applyMatrix4( camera.matrixWorld );
    
            object.position.copy( target );
            object.lookAt(camera.position);