javascript - 如何在 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';

 }

  }