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';

 }

  }