javascript - 根据给定的相机旋转和位置计算轨道控制的相机目标

标签 javascript three.js 3d

我在使用轨道控制时遇到以下问题。我将相机目标设置为 0、0、0。然后在 AJAX 调用后,我手动设置相机位置和旋转。在轨道控制更新调用后,相机的旋转被重置。

我发现发生这种情况是因为当调用轨道控件更新时,相机的旋转是根据相机位置和轨道控件的目标计算的。

有什么办法可以解决吗?

最佳答案

在对相机应用变换之前,我会保存相机和目标之间的距离。之后,我会将目标放在相机前面,并保持相应的距离。

var distance = new THREE.Vector3().subVectors(camera.position, controls.target).length();

// apply transformation - matrix, euler rotation, or quaternion?

var normal = new THREE.Vector3(0,0,-1).applyQuaternion(camera.quaternion);
// instead of quaternion, you could also use .applyEuler(camera.rotation);
// or if you used matrix, extract quaternion from matrix

controls.target = new THREE.Vector3().add(camera.position).add(normal.setLength(distance));

编辑: 您能否另外解释一下为什么在计算法线时使用向量 (0, 0, -1)?

在计算机图形学中,相机的局部坐标系通常是正 x 轴指向右侧,正 y 轴指向上方,因此您所看的方向是负 z 轴。对于上面的计算,我需要相机的方向——从局部空间 (0,0,-1) 到世界空间 (0,0,-1).applyQuaternion( )

enter image description here

关于javascript - 根据给定的相机旋转和位置计算轨道控制的相机目标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51211900/

相关文章:

javascript - JQGrid自定义汇总匹配

javascript - php图片上传带水印并调整大小

javascript - Three.js 向场景添加框在 iOS 上不起作用

javascript - 使用 Three.js 时 Windows 上缺少线宽的解决方法

c++ - 为什么我在 OpenGL 中看不到 3ds Max 对象的颜色?

javascript - 仅添加整数验证?

javascript - 如何更改 google 可视化表及其列的 css 属性?

javascript - 将 .json 模型导入 Three.js

algorithm - 最小封闭球体的弹跳气泡算法

unity-game-engine - Unity函数可以立即从3D管道访问2D盒子吗?