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

显示隐藏：

我一直在使用 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却发现很难一样。如何使用版本 54 替换上述代码？我在使用版本 54 时遇到的错误是：

Picking:

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

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

我已经自定义管理锥体 [我的几何图形] 的父子关系JavaScript 对象[数据结构]以这种方式（第1层{对象内每层使用的数组}有100个锥体，并且都是父级，第2层有100个锥体，它们是第1层[多重性1:1]上的锥体的子级]和层3 的锥体是第 2 层锥体的子锥体，它们的关系也是 1:1，因此它们也是第 1 层锥体的孙子锥体）。

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

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

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;

            }

我希望我的特定锥体在光线相交时被拾取，同时基于特定锥体是否是祖父母/父母/孩子，特定家庭的剩余锥体也将被拾取。我的自定义数据结构有辅助函数，它通过输入祖父母（祖父母

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

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

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

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

正如 WestLangley 提到的，每篇文章提出一个明确的问题将有助于我们更好地回答您。

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

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

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