Three.js可拖动形状

Three.js draggable shape

本文关键字：拖动 js Three      更新时间：2023-09-26

我正在研究可拖动立方体的代码

但我无法理解在平面和选定对象之间创建偏移的原因，就像代码的这一部分：

function onDocumentMouseDown( event ) {
            event.preventDefault();
            var vector = new THREE.Vector3( mouse.x, mouse.y, 0.5 );
            projector.unprojectVector( vector, camera );
            var raycaster = new THREE.Raycaster( camera.position, vector.sub( camera.position ).normalize() );
            var intersects = raycaster.intersectObjects( objects );
            if ( intersects.length > 0 ) {
                controls.enabled = false;
                SELECTED = intersects[ 0 ].object;
                var intersects = raycaster.intersectObject( plane );
                offset.copy( intersects[ 0 ].point ).sub( plane.position );// OFFSET
                container.style.cursor = 'move';
            }
        }

移动时的对象坐标与鼠标在平面上的点击坐标有关，因此会发生偏移。可以在没有偏移的情况下进行：

function onDocumentMouseMove( event ) {
    ...if ( SELECTED ) {
       var intersects = raycaster.intersectObject( plane );
       SELECTED.position.copy( intersects[ 0 ].point );
   }
}

尝试一下，你会感觉到不同。你也可以在这个例子的基础上做。查看控制台中的消息。

<script src="js/controls/EventsControls.js"></script>
EventsControls = new EventsControls( camera, renderer.domElement );
EventsControls1.attachEvent( 'dragAndDrop', function () {
    this.container.style.cursor = 'move';
    this.focused.position.y = this.previous.y;
});
var mesh = new THREE.Mesh( geometry, material );
scene.add( mesh ); 
EventsControls.attach( mesh );
相关文章：