时间戳

首页 > 解决方案 > 从三个js中的特定点开始相机旋转

javascript - 从三个js中的特定点开始相机旋转

问题描述

我在threejs中加载了一个全景图像，但它从下面的逻辑开始相机旋转，这在threejs中是默认的

if ( isUserInteracting === false ) {

    lon += 0.1;
}

lat = Math.max( - 85, Math.min( 85, lat ) );
phi = THREE.Math.degToRad( 90 - lat );
theta = THREE.Math.degToRad( lon );

camera.target.x = 100 * Math.sin( phi ) * Math.cos( theta );
camera.target.y = 100 * Math.cos( phi );
camera.target.z = 100 * Math.sin( phi ) * Math.sin( theta );

我想要做的是将相机放置在我可以使用的特定点

camera.lookAt( -56.86954186163314,  0,  -71.49481268065709 );

现在我想从上面的lookAt点开始正常的相机旋转。我目前正在做的是

camera.lookAt( -56.86954186163314 + camera.target.x,  0,  -71.49481268065709 + camera.target.z);

我认为这是错误的.. PS（我在几何，罪，cos方面很弱）..任何1都可以帮助我吗？PS（我不想改变camera.target.y它应该是0）..提前谢谢..

标签： javascriptthree.js

解决方案

This is best looked at from the perspective of vectors.

Take your lookAt position: that's a vector. You can make that vector spin around an axis using Vector3.applyAxisAngle. As you update the vector, make your camera look at it.

For your example, you want the camera to look at -56.86954186163314, 0, -71.49481268065709, and then spin 360° about the Y-axis (the camera position doesn't change, and the lookAt target doesn't change its Y value).

var lookVector = new THREE.Vector3();

// later...
lookVector.set(x, y, z); // -56.86954186163314,  0,  -71.49481268065709

// down with your render function...
var axis = new THREE.Vector3(0, 1, 0);

function render(){
    lookVector.applyAxisAngle(axis, 0.001); // or some other theta
    camera.lookAt(lookVector);
    renderer.render(scene, camera);
}

You'll need to track when your thetas add up to 360°, and perform logic to stop the rotation, but I'll leave that as an exercise for you.

推荐阅读