Three.js GridHelper：如何隐藏/显示网格？

Question

I am adding a plane and a grid using Gridhelper to my 3d scene:

// PLANE XY static
var gridplaneSize = 20;
var color = 0xFFDCBB;
var plGeometry = new THREE.PlaneGeometry(gridplaneSize, gridplaneSize);
var plMaterial = new THREE.MeshBasicMaterial( {color:color, ambient:color, side:THREE.DoubleSide, opacity:0.5, transparent:true, depthWrite: false } );
var planeMesh_xy = new THREE.Mesh(plGeometry, plMaterial);
planeMesh_xy.rotation.x = -Math.PI/2;
scene.add(planeMesh_xy);
planeMesh_xy.receiveShadow = true;
// GRID XY static
var gridstep = 1;
var gridcolor = 0xCCCCCC;
var gridHelper_xy = new THREE.GridHelper(gridplaneSize/2, gridstep);
gridHelper_xy.position = new THREE.Vector3(0, 0, 0);
gridHelper_xy.setColors( new THREE.Color(gridcolor), new THREE.Color(gridcolor) );
scene.add(gridHelper_xy);

Then I would like to decide if the plane or the grid is visible.

This works for the plane:

planeMesh_xy.visible = false;

But not for the grid:

gridHelper_xy.visible = false; // not working

I also tried workarounds, not working:

gridHelper_xy.material.transparent = true;
gridHelper_xy.material.opacity = 0;
gridHelper_xy.parent.visible = false;

Can anyone tell me how to hide the grid then?

Answer 1

What should happen when you set the visible flag of an object is that all of its children should inherit the flag.

In r71 this should work out of the box (look at issue https://github.com/mrdoob/three.js/issues/1524 )

In r65 you would have to traverse your hierarchy setting the flag on all the sub-parts:

object.traverse ( function (child) {

    child.visible = false;

}