javascript - 单击并拖动仅抓取对象的一部分

Question

我正处于我一直从事的这个项目的最后阶段，我在单击和拖动对象的能力方面遇到了问题。我已经将它们全部添加到一个名为 items 的数组中，现在它可以正常工作了。 Here是指向实际页面的链接。如果您从右上角的菜单中添加任何项目，它就会显示出来，但您只能将其逐个拖动。据我所知，问题在于它将每个项目视为一系列项目而不是一个项目。这是有道理的，因为每个模型都是拼凑在一起的几个模型，但我不确定如何解决这个问题。有什么想法吗？

以下是我控制鼠标交互的三个函数:

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

    mouse.x = ( event.clientX / width ) * 2 - 1;
    mouse.y = - ( event.clientY / height ) * 2 + 1;

    var vector = new THREE.Vector3( mouse.x, mouse.y, 0 );
    projector.unprojectVector( vector, camera );

    var ray = new THREE.Ray( camera.position, vector.subSelf( camera.position ).normalize() );

    if ( SELECTED ) {

            var intersects = ray.intersectObject( plane );
            SELECTED.position.copy( intersects[ 0 ].point.subSelf( offset ) );
            return;

    }

    var intersects = ray.intersectObjects( items );

    if ( intersects.length > 0 ) {

            if ( INTERSECTED != intersects[ 0 ] ) {

                    INTERSECTED = intersects[ 0 ].object;

                    plane.position.copy( INTERSECTED.position );
            }

            container.style.cursor = 'pointer';
    }
     else {
                    INTERSECTED = null;
                    container.style.cursor = 'auto';
    }

}

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

    var vector = new THREE.Vector3( mouse.x, mouse.y, 0 );
    projector.unprojectVector( vector, camera );

    var ray = new THREE.Ray( camera.position, vector.subSelf( camera.position ).normalize() );

    var intersects = ray.intersectObjects( items );

    if ( intersects.length > 0 ) {

            SELECTED = intersects[ 0 ].object;

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

            container.style.cursor = 'move';

    }

}

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

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

    container.style.cursor = 'auto';
}

它在很大程度上基于 this例如，但没有颜色位。

像这样更改 onMouseDown 中的代码

// OLD
SELECTED = intersects[0].object;
// NEW
SELECTED = intersects[0].object.parent;

我现在可以移动整个对象。这仅在对象只有一个父对象时有效，因此某些项目无法使用此代码移动。有人建议确定它是否有父对象，如果有则向上移动？

Answer 1

如果有人仍然对这个问题感兴趣，subSelf 方法现在称为 sub。