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

【问题标题】：Three.js 2d controls x and y axis no rotationThree.js 2d 控制 x 和 y 轴不旋转
【发布时间】：2020-05-20 20:53:35
【问题描述】：

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

是否有任何用于three.js 的扩展/插件，例如 OrbitControls，但具有所需的功能？

【问题讨论】：

标签： three.js

【解决方案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

【讨论】：