如何在Three.js中拖動場景

Question

當我左右拖動鼠標時，我想拖動場景，不要旋轉相機。

我試過了

camera.position.x = mouseX;  
camera.position.y = mouseY;  

但是場景旋轉了

我嘗試更改場景中的位置-場景已旋轉。

如何拖動場景？

Answer 1

您可以嘗試使用（在定義相機之后）

controls = new THREE.RollControls(camera);
controls.movementSpeed = 10;
controls.lookSpeed = 1;
controls.rollSpeed = 0;
controls.autoForward = false;

在您的html中包含此代碼之后：

<script type="text/javascript" src="three.js/examples/js/controls/RollControls.js"></script>

另外，您必須更改onWindowResize事件以添加

controls.handleResize();

和您的render（）函數添加

controls.update(clock.getDelta());

和您的init（）函數添加

clock = new THREE.Clock();

Answer 2

這是我在github上獲得的可能有效的文件

 THREE.DragControls = function(_camera, _objects, _domElement) {

 if (_objects instanceof THREE.Scene) {

_objects = _objects.children;

 }

 var _projector = new THREE.Projector();

 var _mouse = new THREE.Vector3(),

    _offset = new THREE.Vector3();

var _selected;

_domElement.addEventListener('mousemove', onDocumentMouseMove, false);

_domElement.addEventListener('mousedown', onDocumentMouseDown, false);

_domElement.addEventListener('mouseup', onDocumentMouseUp, false);


function onDocumentMouseMove(event) {

  event.preventDefault();

   _mouse.x = (event.clientX / _domElement.width) * 2 - 1;

   _mouse.y = -(event.clientY / _domElement.height) * 2 + 1;

    var ray = _projector.pickingRay(_mouse, _camera);

    if (_selected) {

         var targetPos = ray.direction.clone().multiplyScalar(_selected.distance).addSelf(ray.origin);

         _selected.object.position.copy(targetPos.subSelf(_offset));

        return;

   }


    var intersects = ray.intersectObjects(_objects);

    if (intersects.length > 0) {

       _domElement.style.cursor = 'pointer';

    } else {

        _domElement.style.cursor = 'auto';

    }

  }

   function onDocumentMouseDown(event) {

     event.preventDefault();

     _mouse.x = (event.clientX / _domElement.width) * 2 - 1;

     _mouse.y = -(event.clientY / _domElement.height) * 2 + 1;

     var ray = _projector.pickingRay(_mouse, _camera);

     var intersects = ray.intersectObjects(_objects);

     if (intersects.length > 0) {

         _selected = intersects[0];

         _offset.copy(_selected.point).subSelf(_selected.object.position);

         _domElement.style.cursor = 'move';
   }        
  }


  function onDocumentMouseUp(event) {

     event.preventDefault();

     if (_selected) {

         _selected = null;

    }

     _domElement.style.cursor = 'auto';

 }

  }