如何在Three.js中拖動場景

Question

當我向左或向右拖動鼠標時，我想拖動場景，請勿旋轉相機。

我試圖

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

但場面旋轉

我試着在場景變換位置 - 場景旋轉。

如何拖動場景？

Answer 1

這裏是一個文件，我得到的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'; 

} 

    } 

Answer 2

可以包括這在你的HTML後，嘗試使用（定義你的相機後）

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

：

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

此外，你將不得不改變你的onWindowResize事件添加

controls.handleResize(); 

和渲染（）函數中添加

controls.update(clock.getDelta()); 

和你的init（）函數中添加

clock = new THREE.Clock();