Three.js 2d控制x和y軸不旋轉

Question

你好，最近我開始學習three.js。目前我有一個項目，在這個項目中，雖然它是一個3d環境，但我只會讓用戶在2d（x軸和y軸不旋轉相機）的情況下移動。

是否有像orbitControls three.js的擴展/插件，但具有所需的功能？

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