Question

我有600个平面被添加到随机x，y，z位置的场景中，每个平面都是可点击的。点击时，我动画到选定的平面。所有的工作，但我正在努力让相机面对选定的飞机/或确保飞机在视图中居中。我已经尝试获取所点击项目的方向向量但不确定如何确保相机始终距离一定距离。这是函数，下面是测试的链接。有任何想法吗？非常感谢 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

1 个答案: