2017-01-17 13 views
7

Tôi đang sử dụng Three.DragControls để kéo đối tượng xung quanh một cảnh. Khi vật thể bị kéo, khoảng cách từ máy ảnh dường như đang đi xa hơn.Điều khiển kéo Three.js sửa khoảng cách từ máy ảnh

Câu hỏi của tôi cũng tương tự như chưa được trả lời một Drag object locked at certain distance/radius from camera view

Đây có phải là có một cách thông minh để khắc phục điều đó _intersection.sub (_offset) một khoảng cách nhất định từ camera ở trung tâm của cảnh?

Tôi đã thêm một quả cầu đến hiện trường

dragSphere = new THREE.Mesh(new THREE.SphereGeometry(200, 60, 40),new THREE.MeshBasicMaterial()); 
    dragSphere.name = "dragSphere"; 
    dragSphere.visible = false; 
    dragSphere.scale.x = -1; 
    scene.add(dragSphere); 

Một nơi nào đó ở đây

function onDocumentMouseMove(event) { 

    event.preventDefault(); 

    var offset = $("#container").offset(); 
    var rect = _domElement.getBoundingClientRect(); 
    _mouse.x = ((event.clientX - rect.left - (offset.left/2))/(rect.width - rect.left)) * 2 - 1; 
    _mouse.y = - ((event.clientY - rect.top)/(rect.bottom - rect.top)) * 2 + 1; 

    _raycaster.setFromCamera(_mouse, _camera); 

    if (_selected && scope.enabled) { 

     if (_raycaster.ray.intersectPlane(_plane, _intersection)) { 

      if(_right){ 

       _deltaX = event.x - _startPoint.x; 
       _deltaY = event.y - _startPoint.y; 

       _selected.rotation.y += (_deltaX/50); 
       _selected.rotation.x += (_deltaY/50); 

       console.log(_selected.position); 

       _startPoint.x = event.x; 
       _startPoint.y = event.y; 

       _lastMoveTimestamp = new Date(); 
      } 
      else{ 
       _selected.position.copy(_intersection.sub(_offset)); 
       _selected.lookAt(camera.position); 
      } 

     } 

     scope.dispatchEvent({ type: 'drag', object: _selected }); 

     return; 

    } 

    _raycaster.setFromCamera(_mouse, _camera); 

    var intersects = _raycaster.intersectObjects(_objects , true ); 

    if (intersects.length > 0) { 

     var object = intersects[ 0 ].object; 

     if(object.type === "Mesh") 
      if(object.parent) 
       if(object.parent.type == "Object3D") 
        object = object.parent; 

     _plane.setFromNormalAndCoplanarPoint(_camera.getWorldDirection(_plane.normal), object.position); 

     if (_hovered !== object) { 

      scope.dispatchEvent({ type: 'hoveron', object: object }); 

      _domElement.style.cursor = 'pointer'; 
      _hovered = object; 

     } 

    } else { 

     if (_hovered !== null) { 

      scope.dispatchEvent({ type: 'hoveroff', object: _hovered }); 

      _domElement.style.cursor = 'auto'; 
      _hovered = null; 

     } 

    } 

} 

function onDocumentMouseDown(event) { 

    event.preventDefault(); 

    _right = event.which == 3 || event.button == 2; 

    _raycaster.setFromCamera(_mouse, _camera); 

    var intersects = _raycaster.intersectObjects(_objects , true); 

    if (intersects.length > 0) { 

     _selected = intersects[ 0 ].object; 

     if(_selected.type == "Mesh" && _selected.parent.type == "Object3D") 
     _selected = _selected.parent; 

     if (_raycaster.ray.intersectPlane(_plane, _intersection)) { 

      if(_right){ 
       _mouseDown = true; 

       _startPoint = { 
        x: event.clientX, 
        y: event.clientY 
       }; 

       _rotateStartPoint = _rotateEndPoint = projectOnTrackball(0, 0); 
      } 
      else 
       _offset.copy(_intersection).sub(_selected.position); 
     } 

     _domElement.style.cursor = 'move'; 

     scope.dispatchEvent({ type: 'dragstart', object: _selected }); 

    } 
    else 
     scope.dispatchEvent({ type: 'nodrag' }); 


} 

Trong phần mà không được kéo, tức là

if (_raycaster.ray.intersectPlane(_plane, _intersection)) { 
    _selected.position.copy(_intersection.sub(_offset)); 
    _selected.lookAt(camera.position); 
} 

tôi cần phải nhận được nó sử dụng giao điểm Sphere để áp dụng vị trí để nó kéo dọc theo bề mặt của hình cầu.

Trả lời

1

Đây có thể không phải là câu trả lời đầy đủ, nhưng có thể giúp bạn chỉ đúng hướng vì tôi đang ở trong tình huống tương tự nơi tôi đang cố gắng để các đối tượng kéo dọc theo mặt phẳng. Tôi tạo ra phiên bản sửa đổi của riêng tôi về DragControls.js chức năng để hỗ trợ thông qua trong một mặt phẳng như một tham số (đổi tên nó để DragControlsPlane.js đầu tiên), như vậy:

THREE.DragControlsPlane = function (_objects, _camera, _domElement, _plane) 

Thats ở phía trên cùng của DragControls gốc. js. Sau đó nhận xét bên ngoài dòng lệnh khởi var _plane:

//var _plane = new THREE.Plane(); 

Sau đó, bạn sẽ cần phải xóa bỏ dòng đó chuyển máy bay đến quan điểm của camera (khoảng giữa chừng xuống):

//_plane.setFromNormalAndCoplanarPoint(_camera.getWorldDirection(_plane.normal), object.position); 

sau đó ở dưới cùng, hãy đổi tên chúng để xếp hàng bằng tên chức năng mới của bạn:

THREE.DragControlsPlane.prototype = Object.create(THREE.EventDispatcher.prototype); 
THREE.DragControlsPlane.prototype.constructor = THREE.DragControlsPlane; 

Và sau đó sử dụng chức năng mới trong tập lệnh của bạn. Phần còn lại của DragControls đã làm phần còn lại, nhưng bạn có thể cần phải sửa đổi nó nhiều hơn một chút để làm việc với một hình cầu. Điều này làm việc cho tôi, ít nhất là cho một bề mặt phẳng. Có lẽ mr. doob có thể sớm thêm tính năng này dưới dạng một tính năng thực tế, nháy mắtnháy mắt. Hãy cho tôi biết nếu bạn làm cho nó hoạt động cho một quả cầu! Tôi không mong đợi một upvote về điều này vì nó không phải là câu trả lời đầy đủ, nhưng hy vọng nó sẽ giúp một ai đó ra khỏi đó!

Các vấn đề liên quan