three.js

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


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) {
  const 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.


Solution

  • 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) {
      const 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;
      };
    });