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

Three.js GridHelper: How to hide/show the grid?

本文关键字：隐藏 显示 网格 GridHelper js 何隐藏 Three      更新时间：2023-09-26

我正在使用Gridhelper添加平面和网格到我的3d场景:

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

然后我想决定平面或网格是否可见。

这适用于飞机:

planeMesh_xy.visible = false;

但是不是对于网格:

gridHelper_xy.visible = false; // not working

我也尝试了变通方法，但不工作:

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

谁能告诉我如何隐藏网格?

设置对象的visible标志时，它的所有子对象都应该继承该标志。

在r71中，这应该是开箱即用的(查看问题https://github.com/mrdoob/three.js/issues/1524)

在r65中，你必须遍历你的层次结构，在所有子部分设置标志:

object.traverse ( function (child) {
    child.visible = false;
}
相关文章：