三个js隐藏多个对象只是隐藏单个对象答案

【问题标题】：Three js hiding multiple objects just hide single object三个js隐藏多个对象只是隐藏单个对象
【发布时间】：2020-09-05 18:23:01
【问题描述】：

我在设置灯光对象名称 light.name = 'globalLight' 并制作变量 lightGlobal = scene.getObjectByName('globalLight'); 时遇到了问题，但是当我尝试使用 lightGlobal.visible = false; 隐藏时，只是让其他灯没有隐藏绿色的是light0，蓝色的是light1 渲染示例The rendered image example 问题screenshot

如您所见，蓝光消失了，但绿光不会隐藏

我的代码：

ambient = new THREE.AmbientLight( 0x404040 );
scene.add( ambient );
lightCam = new THREE.DirectionalLight( 0xffffff, 1.0 );
light0 = new THREE.PointLight( 0x0000ff, 1.0 );
light0.position.set( 4.0, 4.0, 4.0 );
light0.castShadow = true;
light0.name = "globalLight";
light1 = new THREE.PointLight( 0x00ff00, 1.0 );
light1.position.set( 4.0, 4.0, -4.0 );
light1.castShadow = true;
light1.name = "globalLight";

scene.add( light0, light1 );

globalLight = scene.getObjectByName( "globalLight", true );
globalLight.visible = false;

【问题讨论】：

标签： javascript debugging three.js rendering

【解决方案1】：

Object3D.name 必须是唯一的。因此，不支持以相同的方式命名两个灯。 Object3D.getObjectByName() 将返回与给定名称匹配的第一个对象。

解决此问题的一种方法是使用Object3D.userData 并定义一个自定义属性，例如：

light0.userData.tag = 'globalLight';

然后可以考虑通过以下方法增强Object3D：

THREE.Object3D.prototype.getObjectsByTag = function( tag, result ) {

  // check the current object

  if ( this.userData.tag === tag ) result.push( this );
  
  // check children

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

    const child = this.children[ i ];

    child.getObjectsByTag( tag, result );

  }
   
  return result;

};

【讨论】：