3d-force-graph笔记(5)：动态批量修改Object3D透明度

2021-04-11

ThreeJS Object3D透明度归于材质属性opacity，以THREE.Group为例：

// 透明度
function setOpacity(obj, opacity) {
	obj.traverse(child => {

  	// 自定义筛选逻辑
	// if (child instanceof THREE.Mesh) {
		if (child.material) {
			child.material.transparent = true; // 重要
			child.material.opacity = opacity;
		}
	// }
	});
}

const group = new THREE.Group();

//....group添加多个Object3D

// 半透明
setOpacity(group, 0.5);

创建材质时需要注意属性alphaTest，影响透明度下限。

参考资料

https://stackoverflow.com/questions/8502150/three-js-how-can-i-dynamically-change-objects-opacity

https://threejs.org/docs/index.html?q=mater#api/en/materials/Material

3d-force-graph笔记