threejs 限制物件只能在指定平面上拖拽

threejs提供有 DragController.js的例子來輔助拖拽

該例子可以在基於當前屏幕的x和y軸上拖拽物體，但是它不能影響z軸。

查看代碼，可以在touchStart\mousedown下找到下述代碼：

_plane.setFromNormalAndCoplanarPoint( _camera.getWorldDirection( _plane.normal ), _worldPosition.setFromMatrixPosition( _selected.matrixWorld ) );

　　該代碼的意義在於：

　　1、要確定一個目標平面（_plane），物件將會在該平面上移動

       2、所以，利用鼠標的clientX和clientY結合攝像機（_camera）的角度，得出向量1

       3、同時，根據當前選中物件（_selected）的方向，得出向量2

       4、最后，根據這兩個向量來確定目標平面

 

       所以，如果要讓物件隨着拖拽在縱深方向移動，只需要把這個平面修改為你期望的平面即可。比如：

    _plane.setFromNormalAndCoplanarPoint(new THREE.Vector3(0,0,1),new THREE.Vector3(0,0,1));
    

 

      即可實現在指定平面上移動的效果，以下物件都是通過拖拽修改的初始位置：