Comment faire glisser une scène dans Three.js

Question

Lorsque je fais glisser la souris vers la gauche ou la droite, je voudrais faire glisser la scène, ne pas faire pivoter la caméra.

J'ai essayé

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

mais la scène mis en rotation

J'ai essayé de changer de position dans la scène - scène tournée.

Comment faire pour faire glisser la scène?

Answer 1

ici est un fichier que je suis arrivé à github qui pourrait fonctionner

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

Vous pouvez essayer d'utiliser (après avoir défini votre appareil photo)

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

après y compris dans votre html:

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

En outre, vous devez modifier votre événement onWindowResize pour ajouter

controls.handleResize(); 

et votre rendu() pour ajouter

controls.update(clock.getDelta()); 

et votre fonction init() pour ajouter

clock = new THREE.Clock();