使用:
- Using ThreeJS v0.130.1
- 框架:Angular 12，但这与问题无关。
- Chrome浏览器测试
我正在构建一个获得超过100K点的应用程序。我使用这些点来渲染THREE。点对象。
我发现默认的3。PointsMaterial不支持照明(无论是否在场景中添加灯光，这些点都是可见的)。
所以我尝试实现一个自定义的ShaderMaterial。但是我找不到一种方法来为渲染对象添加照明。下面是我的代码的一个示例:示例应用程序在StackBlitz显示我目前的尝试在此代码中，我使用点云数据，法线和颜色的样例值，但其他一切都类似于我的实际应用程序。我可以看到3D对象，但需要使用法线进行更适当的照明。
我需要帮助或指导来实现以下内容:
为自定义着色器材质添加光照。我在谷歌上搜索了很多东西，但还没有成功。
使用法线，显示照明的效果(在这个示例代码中，法线固定到y轴方向，但我在实际应用中基于一些向量逻辑计算它们)。所以法线的计算已经完成了，但是我想用它们来显示自定义着色器材料中的光照/阴影效果。
在这个示例中，color属性被设置为固定的红色，但在实际应用中，我可以使用UV范围从纹理到颜色属性应用颜色。
请告诉我如何/如果我可以得到基于法线点云照明。谢谢。
注意:我看了这个Stackoveflow问题，但它只涉及改变点的alpha/透明度，而不是照明。
为自定义材料添加照明是一个非常复杂的过程。特别是因为你可以使用Phong, Lambert或物理照明方法，并且有很多计算需要从顶点传递到片段着色器。例如，这段着色器代码只是你需要的一小部分。
与其尝试从头开始重新创建照明，我建议您使用您喜欢的材料(Phong, Lambert, Physical等)创建PlaneGeometry，并使用InstancedMesh创建数千个实例，就像在这个例子中一样。
const count = 100000;
const geometry = new PlaneGeometry();
const material = new THREE.MeshPhongMaterial();
mesh = new THREE.InstancedMesh( geometry, material, count );
mesh.instanceMatrix.setUsage( THREE.DynamicDrawUsage ); // will be updated every frame
scene.add( mesh );
const dummy = new THREE.Object3D();
update() {
// Sets the rotation so it's always perpendicular to camera
dummy.lookAt(camera);
// Updates positions of each plane
for (let i = 0; i < count; i++){
dummy.position.set( x, y, z );
dummy.updateMatrix();
mesh.setMatrixAt( i ++, dummy.matrix );
}
}
for()循环将是每帧中最昂贵的部分，所以如果你需要在每帧中更新它，你可能想要在顶点着色器中计算它，但这完全是另一个问题。