javascript - 如何使用 three.js 执行拾取和隐藏对象？

Question

显示/隐藏:

我一直在使用 Three.js Release 50 并且能够在以下工具的帮助下显示/隐藏对象(在我的应用程序中，它是一个网格子对象):

THREE.SceneUtils.traverseHierarchy(mesh,function(child){
    var z = document.getElementById("cameras").selectedIndex*5 -10;
    if (z === -10){
        child.visible = true;
    } else if (child.position.z !== z){
        child.visible = false;
    } else {

        child.visible = true;
    };
}); 

但是在使用release 54的时候，据说要用，object.traverse却发现很难一样。如何使用 release 54 替换上面的代码？我在使用版本 54 时遇到的错误是:

采摘:

我在 Three.js 中找到了一个非常著名且复杂的 Picking 示例，该示例基于“Ray Picking”及其链接:Three.js Picking Example .基于这个例子，我一直在尝试在我的应用程序中实现选择。但是不知何故，这一行出现了错误。

var raycaster = new THREE.Raycaster( camera.position, vector.subSelf( camera.position                   
).normalize() );

我在自定义 javascript 对象 [数据结构] 中管理了锥体 [我的几何体] 的父子关系，其方式是(Layer1 {对象中每个层的数组}有 100 个锥体，都是父级，第 2 层有 100 个锥体，它们是第 1 层锥体的子级 [多重性 1:1]]，第 3 层有锥体，它们是第 2 层锥体的子级，它们的关系也是 1:1，因此他们也是 layer1 视锥细胞的孙子)。

我使用网格从第一层添加祖父锥体，并通过该父级访问第 2 层中的子级，并将其添加到同一个网格，并通过子级访问同一个孙级并添加到同一个网格。最后我将整个网格添加到场景中。由于“z 深度”变化 [对于第一层，z 坐标:5，对于第二层:0 和第三层:-5]，layer1 和 layer2 和 layer3 实际上是在三层中形成的，如下图所示。

但是在使用以下代码时，我看不到锥体有任何问题。

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

            var raycaster = new THREE.Raycaster( camera.position, vector.subSelf( camera.position ).normalize() );

            var intersects = raycaster.intersectObjects( scene.children ); // tried with mesh.children as well, but no change :(

            if ( intersects.length > 0 ) {

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

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

                    INTERSECTED = intersects[ 0 ].object;
                    INTERSECTED.currentHex = INTERSECTED.material.emissive.getHex();
                    INTERSECTED.material.emissive.setHex( 0xff0000 );

                }

            } else {

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

                INTERSECTED = null;

            }

我希望我的特定圆锥体在光线相交时被拾取，同时基于特定圆锥体是否是祖 parent / parent / child 剩余的特定家族的圆锥体也被拾取。我为我的自定义数据结构提供了辅助函数，它通过输入祖父(祖 parent <- 父)返回父，通过输入父返回子，您可以在我的选择中使用它。

我有一个 JSfiddle 链接，它使用 Three.js 版本 54 和 CombinedCamera.js 作为附加资源，请有人帮我解决这个问题。我非常需要帮助。

这是我的 Jsfiddle 链接:http://jsfiddle.net/sagh0900/SQyLL/

在实现 Picking 和使用 Three.js 版本 54 之前，我以前的 working Jsfiddle 版本。在这个版本中，我使用了 three.js 的版本 50，我成功地展示了它/隐藏对象:http://jsfiddle.net/sagh0900/PrVbg/3/

在此先感谢您的帮助和支持:)

Answer 1

正如 WestLangley 所提到的，每个帖子一个明确的问题将有助于我们更好地回答您。

对于使用 Raycaster 在 Three.js 中进行拾取的不太复杂的示例，我已在以下位置发布了一个示例:

http://stemkoski.github.com/Three.js/Mouse-Tooltip.html

它根据从鼠标位置发出的光线更改场景中对象的属性(颜色)。也许可以修改此代码来解决您的部分困难。