[英]Rotate camera around object with Three.js
我正在使用 WebGlRenderer 用 Three.js 显示一个 OBJ 元素,现在我想允许用户以任何方向围绕对象旋转相机,我找到了这个答案:
但是这两个例子都给我带来了错误,第一个说投影仪没有定义,我不知道“投影仪”是什么意思。 我只有一个简单的相机、物体和一些光。 第二个代码表示 undefined 不是函数。
有人知道如何获得我需要的结果吗?
这就是你想要的: http : //threejs.org/examples/misc_controls_orbit.html
包括轨道控制(下载后):
<script src="js/controls/OrbitControls.js"></script>
设置变量:
var controls;
将控件附加到相机并添加一个侦听器:
controls = new THREE.OrbitControls( camera );
controls.addEventListener( 'change', render );
并在您的动画功能中更新控件:
controls.update();
[更新] controls.autoRotate = true;
(在 v73 中测试。最近版本的 OrbitControls.js 已添加此控件。)
这是一个快速技巧,以防您出于某种原因不想使用 OrbitControl。
camera.position.copy( target );
camera.position.x+=Math.sin(camera.rotationy)*3;
camera.position.z+=Math.cos(camera.rotationy)*3;
camera.position.y+=cameraHeight; // optional
tempVector.copy(target).y+=cameraHeight; // the += is optional
camera.lookAt( tempVector );
camera.rotationy 是鼠标旋转值的副本,因为我们通过调用 lookAt 来更改它。
事实上,如果你用你选择的对象替换“相机”,对象会旋转。 但是如果周围有其他物体(例如地板上的网格),它们仍然会静止不动。 这可能是你想要的,或者它可能看起来很奇怪。 (想象一下漂浮在地板上方的椅子旋转......?)
在初始化 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
);
(免责声明:我的印象是周围有不同版本的 OrbitControls.js,但我假设它们都使用这个中心对象)
如果您使用的是 ES6,以下可用于 OrbitControls
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
// this would create the orbit controls
// it would allow camera control using mouse
const orbitControls = new OrbitControls(camera, renderer.domElement);
如果您需要自动旋转,
function init() {
...
// following would enable autorotate
const orbitControls.autoRotate = true;
..
}
function animate() {
// need to update the orbitcontrols for autorotate camera to take effect
orbitControls.update();
...
renderer.render( scene, camera );
requestAnimationFrame( animate );
}
参考: https : //threejs.org/docs/#examples/en/controls/OrbitControls
添加侦听器以在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);
});
并在动画更新控件中:
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();
}
有关在限制上寻找自动旋转方向更改的人的额外信息:
if (
controls.getAzimuthalAngle() >= Math.PI / 2 ||
controls.getAzimuthalAngle() <= -Math.PI / 2
) {
controls.autoRotateSpeed *= -1;
}
controls.update();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.