从三个js中的特定点开始相机旋转答案

【问题标题】：start camera rotation from specific point in three js从三个js中的特定点开始相机旋转
【发布时间】：2018-08-28 05:15:48
【问题描述】：

我在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）..提前谢谢..

【问题讨论】：

@TheJim01 有什么想法吗？？
相机位置，通常称为Transform，即(x, y, z) LOCATION和(x, y, z) ROTATION是两个不同的东西。您正在将位置 + 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)调用中通过camera.target
我想要像这里 threejs.org/examples/webgl_panorama_equirectangular.html 这样的正常相机旋转，但从我的静态点开始

标签： javascript three.js

【解决方案1】：

最好从向量的角度来看。

以您的lookAt 位置：这是一个向量。您可以使用Vector3.applyAxisAngle 使该向量围绕轴旋转。当您更新矢量时，让您的相机看着它。

对于您的示例，您希望相机查看-56.86954186163314, 0, -71.49481268065709，然后围绕 Y 轴旋转 360°（相机位置不会改变，lookAt 目标不会改变其 Y 值)。

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);
}

您需要跟踪您的 theta 何时达到 360°，并执行逻辑以停止旋转，但我将把它留给您作为练习。

【讨论】：

嘿@TheJim01 它起作用了.. 我可以让相机看到所需的点并开始旋转，但是旋转是从右到左发生的.. 这是不正常的.. 我想要从左到右..我不知道为什么会这样..我已经删除了默认的三个 js 逻辑-> 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 );
将theta改为负数。
谢谢你太棒了..在挣扎了很多天后得到了这个工作..完美地工作..如果你还记得我已经发布了 1 个问题，说我有起点和终点。 . 所以从起点开始相机旋转已经完成.. 现在我想在相机观察向量达到或超过特定点（终点）时立即检测。. 知道如何获得吗？
从计数器的角度观察它，并通过theta 跟踪您将相机旋转了多少次。如果您需要更详细的解释，请创建一个新问题。