0

我正在使用一个 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;        
            }
                          }
4

0 回答 0