How to Hide/Show Objects using Three.js release 54?

Question

I've asked this question as a part of Huge question but was recommended to ask in parts. Here comes the part of my previous question. My previous question was: Here

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:

enter image description here

Please help me to sort this out.

score 12 · Accepted Answer · edited Mar 17 '15 at 03:52

12

Is the 'mesh' variable you are sending the 'traverseHierarchy' function an Object3d? If so have you tried 'mesh.children' which should return an array of child objects, or you could use the traverse function on the mesh object.

See: http://mrdoob.github.com/three.js/docs/54/#Reference/Core/Object3D

mesh.traverse(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;
    };
});

edited Mar 17 '15 at 03:52

Daniel Baird

2,239
1
18
24

answered Jan 02 '13 at 14:42

2pha

9,798
2
29
43

Thanks for the reply, Mesh is a Three's Mesh geometry and i could able to run successfully using release 50 but with release 54, its showing above error. – three.jsaddict Jan 02 '13 at 15:45
1

I think Mesh is a subclass of Object3d so the above still applies. The error you have posted tells you exactly what your problem is, SceneUtils no longer has a function called traverseHierachy. – 2pha Jan 03 '13 at 00:16
I've edited my Jsfiddle according to your solution, Jsfiddle link: http://jsfiddle.net/sagh0900/SQyLL/1/ but couldn't see any difference in output. I've added Three.min.js release 54 as external source. Could you please check out with my link. – three.jsaddict Jan 03 '13 at 08:59

score 1 · Answer 2 · answered Jan 02 '13 at 20:18

1

Dig deeper, answers you will find.

object.traverseHierarchy() was renamed to object.traverse()

$ grep -A10 'traverse: function' build/three.js
    traverse: function ( callback ) {

            callback( this );

            for ( var i = 0, l = this.children.length; i < l; i ++ ) {

                    this.children[ i ].traverse( callback );

            }

    },

answered Jan 02 '13 at 20:18

Karsten

501
6
12

Thanks for your reply, I'm really confused with your higher level answer. Could you please share some working sample please. – three.jsaddict Jan 02 '13 at 21:03
It was meant to encourage you to keep searching through the code. Sorry to confuse. A quick text search of the commit messages for traverseHierarchy yielded that it was renamed to traverse. 2pha got it. – Karsten Jan 04 '13 at 00:31

score 1 · Answer 3 · answered Sep 23 '16 at 07:15

simply use the object traverse method to hide the mesh in three.js.In my code hide the object based on its name

object.traverse ( function (child) {
    if (child instanceof THREE.Mesh) {  
        if (child.name.includes("3F")) {
            child.visible = true;
        } else {
            child.visible = false;
        }
    }
});

How to Hide/Show Objects using Three.js release 54?

3 Answers3

Linked