相机面对选定的平面 three.js

Question

我有 600 个平面以随机 x、y、z 位置添加到场景中，每个平面都是可点击的。单击时，我会为选定的平面设置动画。一切正常，但我正在努力让相机面对选定的平面/或确保平面在视图中居中。我尝试获取被点击项目的方向向量，但不确定如何确保相机始终保持一定距离。这是函数，下面是 link 进行测试。有任何想法吗？非常感谢 http://adigitalengagement.co.uk/webauth_stickies/plane/

    function toObj(obj) {

    var lookAtVector = new THREE.Vector3(0, 0, 1);
    lookAtVector.applyQuaternion(obj.quaternion);
    console.log(lookAtVector);
    var rotateTween = new TWEEN.Tween(controls.target)
        .to({
            x: obj.position.x,
            y: obj.position.y,
            z: obj.position.z
        }, 4000)
        .interpolation(TWEEN.Interpolation.CatmullRom)
        .easing(TWEEN.Easing.Quintic.InOut)
        .start();

    var goTween = new TWEEN.Tween(camera.position)
        .to({
            x: obj.position.x,
            y: obj.position.y,
            z: obj.position.z + 10
        }, 4000)
        .interpolation(TWEEN.Interpolation.CatmullRom)
        .easing(TWEEN.Easing.Quintic.InOut);

    goTween.start();
    goTween.onComplete(function() {
        console.log('done!');

    });


}

Answer 1

我相信会有更好的解决方案，但这个可以作为基于 this SO answer 的起点。我已经更改了您的 toObj() 函数并添加了一个全局变量：

var lookAtVector = new THREE.Vector3(0,0,0);
...
function toObj(obj) {
var normalMatrix = new THREE.Matrix3().getNormalMatrix( obj.matrixWorld );
var worldNormal = new THREE.Vector3(0,0,1).applyMatrix3( normalMatrix ).normalize();
var camPosition = new THREE.Vector3().copy(obj.position).add(worldNormal.multiplyScalar(100));

var rotateTween = new TWEEN.Tween(lookAtVector)
    .to({
        x: obj.position.x,
        y: obj.position.y,
        z: obj.position.z
    }, 4000)
    .easing(TWEEN.Easing.Quadratic.InOut)
    .onUpdate(function(){
        camera.lookAt(lookAtVector);
    })
    .onComplete(function(){
        lookAtVector.copy(obj.position);
    })
    .start();

    var goTween = new TWEEN.Tween(camera.position)
    .to(camPosition, 4000)
    .easing(TWEEN.Easing.Quadratic.InOut)
    .start();
}

jsfiddle 例子

相机面对选定的平面 three.js

camera to face selected plane three.js

three.js

tween