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

Question

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

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

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。

Answer 2

通过将以下内容添加到 onMouseDown 来解决

SELECTED = intersects[0].object;
while(SELECTED.parent != scene){
    SELECTED = SELECTED.parent;
}

这可以确保抓取的对象将是不是场景的最高级别，并使所有模型都可拖动。