拖动时webGL中的对象定位问题

Question

我正在使用webGl程序，我在其中使用THREE.OBJMTLLoader（）在webGL容器中加载对象。但是当我使用raycaster选择相交对象时，它只选择对象的交叉纹理。所以我更改了我的代码以选择相交对象的父级，并且选择正常。

但问题在于，当我选择并拖动对象以放置在新位置时，它会返回到原点并相对于原点进行拖动和放置。而不是我选择对象的位置。

以下代码由我用来执行事件。任何人都可以帮我解决这个问题..？

注意：

        mouse.x = ((event.pageX-(curX+12))/width)*2-1;
        mouse.y = -((event.pageY-curY)/height)*2+1;

以上代码可能看起来不同。但没关系。我将我的webGL容器作为HTML页面的一部分。所以我相对于页面位置和容器位置采取鼠标位置。 curX和curY表示容器相对于页面的顶部和左侧位置。

    function onDocumentMouseMove( event ) {
            event.preventDefault();

            mouse.x = ((event.pageX-(curX+12))/width)*2-1;
            mouse.y = -((event.pageY-curY)/height)*2+1;


            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() );


            if ( SELECTED ) {
                var intersects = raycaster.intersectObject( plane);
                SELECTED.position.copy( intersects[ 0 ].point.sub( offset ) );
                return;
                        }


            var intersects = raycaster.intersectObjects( objects, true );

            if ( intersects.length > 0 ) {

                if ( INTERSECTED != intersects[ 0 ].object) {

                    if ( INTERSECTED ) INTERSECTED.material.color.setHex( INTERSECTED.currentHex );

                    INTERSECTED = intersects[ 0 ].object;
                    INTERSECTED.currentHex = INTERSECTED.material.color.getHex();

                    plane.position.copy( INTERSECTED.position );
                    plane.lookAt( camera.position );

                }

                container.style.cursor = 'pointer';

            } else {

                if ( INTERSECTED ) INTERSECTED.material.color.setHex( INTERSECTED.currentHex );

                INTERSECTED = null;

                container.style.cursor = 'auto';

            }
        }

        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, true );


            if ( intersects.length > 0 ) {

                controls.enabled = false;

                SELECTED = intersects[ 0 ].object.parent;

                var intersects = raycaster.intersectObject( plane );
                offset.copy( intersects[ 0 ].point ).sub( plane.position );

                container.style.cursor = 'move';                    

            }

        }

        function onDocumentMouseUp( event ) {

            event.preventDefault();

            controls.enabled = true;

            if ( INTERSECTED ) {

                plane.position.copy( INTERSECTED.position );
                SELECTED = null;        
            }
                          }