创建大量点光源时的three.js错误答案

【问题标题】：three.js error when creating massive amount of point lights创建大量点光源时的three.js错误
【发布时间】：2021-06-15 15:24:45
【问题描述】：

//////stars
for (let index = 0; index < 1000; index++) {
    const stargeometry = new THREE.SphereGeometry(1, 24, 24); //make star sphere size
    const starmaterial = new THREE.MeshStandardMaterial({ color: 0xffffff }); //make star texture
    const star = new THREE.Mesh(stargeometry, starmaterial); //creat the star

    const [starx, stary, starz] = Array(3).fill().map(() => THREE.MathUtils.randFloatSpread(10000));//star random position from -x to positive x
    star.position.set(starx, stary, starz); //set the stars
    this.scene.add(star);//add the stars to the scene

    const light = new THREE.PointLight(0xffffff, 2, 50 );
    light.position.set( starx, stary, starz );
    this.scene.add( light );
}

chrome给出的错误

THREE.WebGLProgram: shader error: 0 35715 false gl.getProgramInfoLog Fragment shader 未编译。

**更新：**

在 index 代码运行平稳，生成带有各自点光源的星星

在 index 加载过程显着增加

在 index它只是放弃并输出错误。

【问题讨论】：

不是 100% 确定问题出在哪里，但您绝对不需要将 SphereGeometry 和 MeshStandardMaterial 放在 for 循环中。您不需要为每个网格创建新的几何体和材质。只需在循环外初始化几何和材料一次。之后，您可以为每颗新星使用相同的几何形状和材质。
@isaacsan123 是的，我把它们放在那里，因为我打算用点光源随机化星星的大小和星星的颜色。但是在多次尝试失败后，我只是尝试了白色是否可以工作。

标签： javascript three.js

【解决方案1】：

在前向渲染（一种常见的渲染方法，也是three.js使用的一种）中，一个场景中可以存在的动态点光源的数量是有限制的，而且非常少。每盏灯都会显着增加渲染成本，硬件限制可能会低至~12。请参阅this issue 进行一些讨论。

常见的解决方法是离线烘焙光照（例如在 Blender 中），或使用发光材料和 screenspace bloom effect。这些并没有真正将光线投射到场景中的动态对象上，但通过一些限制限制的规划可以看起来相当不错。

【讨论】：