如何使用three.js执行拾取和隐藏对象? [英] How to perform picking and hiding objects using three.js?

问题描述

显示/隐藏:

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

  THREE.SceneUtils.traverseHierarchy(mesh，function(child){var z = document.getElementById("cameras").selectedIndex * 5 -10;如果(z === -10){child.visible = true;}否则，如果(child.position.z！== z){child.visible = false;} 别的 {child.visible = true;};}); 

但是在使用发行版54时，据说使用object.traverse却很难做到相同.如何使用版本54替换上面的代码?使用版本54时出现的错误是:

选择:

我在Three.js中找到了一个非常著名且复杂的示例，它基于"Ray Picking"及其链接:

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

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

解决方案

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

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

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

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

Show/Hide:

I've been using Three.js Release 50 and able to show/hide the objects (In my application, it is a mesh child) with the help of:

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;
    };
}); 

But while using release 54, it is said that to use, object.traverse but found very difficult to the same. How to replace the above code using release 54? The error I'm getting while using release 54 is:

Picking:

I found an example which is very famous and complex one for Picking in Three.js which is based on "Ray Picking" and its link : Three.js Picking Example. Based on this example I've been trying to implement picking in my application. But somehow there comes an error at this line.

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

I've managed the parent - child relationships of cones [my geometry] in custom javascript object [data structure] in such a way that (Layer1 {used array for each layer within the object} has 100 cones and all are parents, Layer 2 has 100 cones which are children to cones on layer1 [multiplicity 1:1]] and layer 3 has cones which are children to cones on layer 2 and their relationship is also 1:1, thus they are also grandchildren to layer1 cones).

I used a mesh to add the grand parent cone from first layer and accessed child in layer2 through this parent and added it to same mesh and same accessed grandchild through child and added to the same mesh. Finally I added whole Mesh to the scene. Because of "z-depth" variations [for layer one, z-cordinate:5 , for layer2: 0 and layer 3: -5], the layer1 and layer2 and layer3 are literally formed in three layers as image below.

But while using the following code, I couldn't see any picking on my cones.

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;

            }

I wanted my particular cone is to be picked as the ray intersects and simultaneously based on whether the particular cone is a Grandparent/parent/child remaining cones of the particular family also to be picked. I've helper function for my custom data structure which returns the parent by inputting grand parent (Grandparent <- Parent) and child by inputting parent, which you can take help of it for my picking.

I've a JSfiddle link, which uses Three.js release 54 and CombinedCamera.js as additional resources, please someone help me to sort out this to be worked. I'm seriously in need in HELP.

Here is my Jsfiddle link: http://jsfiddle.net/sagh0900/SQyLL/

My previous version of working Jsfiddle prior to implementing Picking and using Three.js release 54. In this version, I've used release 50 of three.js which I'm successfully able to show/hide objects: http://jsfiddle.net/sagh0900/PrVbg/3/

Thanks in advance for your HELP and SUPPORT :)

解决方案

As WestLangley mentioned, one clear question per post would help us to better answer you.

For a somewhat less complex example of picking in Three.js using Raycaster, I have posted an example at:

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

which changes a property (the color) of an object in the scene based on a ray eminating from the position of the mouse. Perhaps this code can be adapted to address part of your difficulties.

这篇关于如何使用three.js执行拾取和隐藏对象?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！