I'm using Three.DragControls to drag an object around a scene. As the object gets dragged it's distance from camera seems to be getting further away.
My question is similar to this unanswered one Drag object locked at certain distance/radius from camera view
Is there a clever way to fix that _intersection.sub( _offset ) a certain distance from the camera in the centre of the scene?
I've added a sphere to the scene
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); Somewhere in here
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' } ); } In the part that does the dragging, i.e.
if ( _raycaster.ray.intersectPlane( _plane, _intersection ) ) { _selected.position.copy( _intersection.sub( _offset ) ); _selected.lookAt(camera.position); } I need to get it to use the Sphere intersection to apply the position so it drags along the surface of the sphere.
0 comments:
Post a Comment