Three.js 中的“THREE.OrbitControls”中的相机位置变化

Posted

技术标签:

【中文标题】Three.js 中的“THREE.OrbitControls”中的相机位置变化【英文标题】:Camera position changes in `THREE.OrbitControls` in three.js 【发布时间】:2016-09-25 17:16:26 【问题描述】:

THREE.OrbitControls 在加载初始相机位置时工作正常,但是当使用按钮单击更改相机位置和相机旋转时。相机的位置发生了变化,但是在单击画布以在新视图上旋转相机时,相机的位置突然发生了变化

相机:

 Camera = new THREE.PerspectiveCamera(45, Width / Height, 0.1, 1000);
 Camera.position.set(170, 120, 400); //intial cam position
 Scene.add(Camera); 


Camera.position.set(30, 167, 81);
Camera.rotation.set(-0.149, 0.3, 0.045); //final cam position

轨道控制:

controlz = new THREE.OrbitControls(Camera, Renderer.domElement);

fiddle

【问题讨论】:

【参考方案1】:

如果您使用THREE.OrbitControls 并且想要更改相机目标或位置,您应该这样做:

更新位置:

camera.position.set(-0.041, 1.9, -1.21);
controls.update();

Demo

更新目标:

controls.target.set(30, 167, 81);
controls.update();

Demo

重置相机

要将相机重置到初始位置,您可以执行以下操作:

controls.reset();

【讨论】:

我用小提琴更新了,你能看看吗 我想我需要更新控件的中心?? 关于第一次加载时旋转相机,点击后不一样,如何实现 我的回答中的提琴不是完全证明了您的要求吗? 它不适用于相机旋转; camera.position.set(-0.041, 1.9, -1.21); camera.rotation.z = 0.785398;控件.update();

以上是关于Three.js 中的“THREE.OrbitControls”中的相机位置变化的主要内容,如果未能解决你的问题,请参考以下文章

Three.js 中的 BoxBufferGeometry 与 BoxGeometry 有啥区别?

为啥 Three.js 中的 ColladaLoader.js 无法加载我的文件?

three.js 中的工具提示

动画 GIF 作为 THREE.js 中的纹理

Three.js 中的操纵杆、游戏手柄或 3D 鼠标支持

three.js 中的分层纹理