Javascript 从三个方向的特定点开始相机旋转
我在threejs中加载了一个全景图像,但它从下面的逻辑开始相机旋转,这是threejs中的默认逻辑Javascript 从三个方向的特定点开始相机旋转,javascript,three.js,Javascript,Three.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
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 );
现在我想从上面的观察点开始正常的相机旋转。我现在正在做的是
camera.lookAt( -56.86954186163314 + camera.target.x, 0, -71.49481268065709 + camera.target.z);
我认为这是错误的。。PS(我在几何学方面很弱,sin,cos)。。有人能帮我吗??PS(我不想更改camera.target.y它应该是0)。。提前感谢。最好从向量的角度来看这一点 看看你的位置:那是一个向量。您可以使用使向量绕轴旋转。当你更新矢量时,让你的相机看着它 例如,您希望摄影机注视
-56.8695418616163314,0,-71.49481268065709
,然后围绕Y轴旋转360°(摄影机位置不变,且注视目标的Y值不变)
你需要跟踪θ加起来达到360°时的轨迹,并执行逻辑来停止旋转,但我将把它作为练习留给你。@TheJim01任何想法??相机位置,通常称为变换,即(x,y,z)位置和(x,y,z)旋转是两件不同的事情。您正在将位置+camera.target.x
放入面向旋转的lookAt()
调用中。我想你应该试着把camera.target.x
放进相机的位置,而不是看旋转。@jmb.mage基本上我是用camera.target.x,camera.target.y,camera.target.z捕捉那个静态点,然后用camera.lookAt()把相机放在同一个位置,然后从那里开始旋转。(我的图像是正常的360全景图)。我只想让相机像静态点上默认的三个js代码那样正常旋转我之所以捕获camera.target是因为默认的三个js代码在camera.lookAt(camera.target)
callI想让相机像这里一样正常旋转,但从我的静态点开始Hey@TheJim01它起作用了。。我能够使相机看到所需的点并开始旋转,但旋转是从右向左进行的。。这是不正常的。。我要从左到右。。我不知道为什么会这样。。我已经删除了默认的三个js逻辑->lat=Math.max(-85,Math.min(85,lat));φ=三个数学degToRad(90-lat);θ=三。数学。德格托拉(lon);camera.target.x=100*Math.sin(φ)*Math.cos(θ);摄影机.target.y=100*Math.cos(φ);camera.target.z=100*Math.sin(φ)*Math.sin(θ)代码>将θ改为负数。非常感谢。。你太棒了。。在挣扎了好几天之后,它开始工作了。。很好用。。若你们还记得我又贴了一个问题,说我有起点和终点。。因此,从起点开始摄影机旋转已完成。。现在我想在摄影机注视向量达到或超过特定点(终点)时立即检测。。你知道如何得到它吗?从计数器的角度看它,并跟踪你将相机旋转了多少次theta
。如果您需要更详细的解释,请创建一个新问题。
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);
}