javascript 使用 Three.js 围绕物体旋转相机
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18466578/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Rotate camera around object with Three.js
提问by Fez Vrasta
I'm displaying an OBJ element with Three.js using WebGlRenderer, now I'd like to allow users to rotate the camera around the object in any direction, I've found this answer:
我正在使用 WebGlRenderer 用 Three.js 显示一个 OBJ 元素，现在我想允许用户以任何方向围绕对象旋转相机，我找到了这个答案：
Rotate camera in Three.js with mouse
But both examples return me errors, the first says that projector is not defined, and I don't know what it means with "projector". I've just a simple camera, the object and some light. The second code says that undefined is not a function.
但是这两个例子都给我带来了错误，第一个说投影仪没有定义，我不知道“投影仪”是什么意思。我只有一个简单的相机、物体和一些光。第二个代码表示 undefined 不是函数。
Does someone know how to get the result I need?
有人知道如何获得我需要的结果吗？
回答by Matthew Riches
This is what you want: http://threejs.org/examples/misc_controls_orbit.html
这就是你想要的：http: //threejs.org/examples/misc_controls_orbit.html
Include the orbit controls (after you have downloaded them):
包括轨道控制（下载后）：
<script src="js/controls/OrbitControls.js"></script>
Setup the variable:
设置变量：
var controls;
Attach the controls to the camera and add a listener:
将控件附加到相机并添加一个侦听器：
controls = new THREE.OrbitControls( camera );
controls.addEventListener( 'change', render );
and in your animate function update the controls:
并在您的动画功能中更新控件：
controls.update();
[Update] controls.autoRotate = true;(tested in v73. Recent versions of OrbitControls.js has added this control.)
[更新] controls.autoRotate = true;（在 v73 中测试。最近版本的 OrbitControls.js 已添加此控件。）
回答by Ideogram
Indeed, if you substitute 'camera' with the object of your choice, the object will rotate. But if there are other objects surrounding it (for example a grid on the floor), they will still stand still. That might be what you want, or it might look weird. (Imagine a chair rotating floating above the floor...?)
事实上，如果您用您选择的对象替换“相机”，该对象将旋转。但是如果周围有其他物体（例如地板上的网格），它们仍然会静止不动。这可能是你想要的，或者它可能看起来很奇怪。（想象一下漂浮在地板上方的椅子旋转......？）
I choose to override the center object from OrbitControls.JS from my code after initializing the Orbit Controls
我选择在初始化 Orbit Controls 后从我的代码中覆盖 OrbitControls.JS 的中心对象
controls = new THREE.OrbitControls(camera, renderer.domElement);
…
controls.center = new THREE.Vector3(
chair.position.x,
chair.position.y,
chair.position.z
);
(disclaimer: I have the impression there are different versions of OrbitControls.js around, but I assume they all use this center-object)
（免责声明：我的印象是周围有不同版本的 OrbitControls.js，但我假设它们都使用这个中心对象）
回答by Hitesh Sahu
Add a listener to trigger render method on change of OrbitControl:
添加侦听器以在更改时触发渲染方法OrbitControl：
const controls = new OrbitControls(camera, this.renderer.domElement);
controls.enableDamping = true; //damping
controls.dampingFactor = 0.25; //damping inertia
controls.enableZoom = true; //Zooming
controls.autoRotate = true; // enable rotation
controls.maxPolarAngle = Math.PI / 2; // Limit angle of visibility
controls.addEventListener("change", () => {
if (this.renderer) this.renderer.render(this.scene, camera);
});
and in animate update controls:
并在动画更新控件中：
start = () => {
if (!this.frameId) {
this.frameId = requestAnimationFrame(this.animate);
}
};
stop = () => {
cancelAnimationFrame(this.frameId);
};
renderScene = () => {
if (this.renderer) this.renderer.render(this.scene, camera);
};
animate = () => {
// update controls
controls.update();
}
