Three.js 2d控制x和y轴不旋转

Question

你好最近开始学习了three.js。目前我有一个项目，我希望用户只在 2d 中移动（x 轴和 y 轴而不旋转相机），尽管它是 3d 环境。

three.js 是否有类似 OrbitControls 但具有所需功能的扩展/插件？

Answer 1

你可以用 OrbitControls 做到这一点。相机移动将被限制在垂直于视图方向的平面内。使用像这样的模式：

camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.set( 0, 0, 50 );

controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.target.set( 0, 0, 0 ); // view direction perpendicular to XY-plane
controls.enableRotate = false;
controls.enableZoom = true; // optional

如果你想让鼠标左键控制相机移动，那么添加：

controls.mouseButtons = { PAN: THREE.MOUSE.LEFT, ZOOM: THREE.MOUSE.MIDDLE, ORBIT: THREE.MOUSE.RIGHT }; // swapping left and right buttons

您可以修改触摸控件以匹配，但您必须编辑 OrbitControls 源代码才能这样做。

three.js r.89

Three.js 2d控制x和y轴不旋转

Three.js 2d controls x and y axis no rotation

three.js