在 three.js 125 版本中无法在 InstancedMesh 中设置颜色

Question

我正在尝试在 Three.js v-125 中随机更改 instancedMesh 实例的颜色，如下所示

    addSphere(){

        var geometry = new THREE.SphereGeometry(0.5, 32, 32);
        let material = new THREE.MeshBasicMaterial({ color: 0x8cde0d,});
        this.stars2 = new THREE.InstancedMesh(geometry, material,1000);
        let o3d = new THREE.Object3D();
        let position = new THREE.Vector3();
        let color = new THREE.Color();
        this.stars2.instanceMatrix.setUsage( THREE.DynamicDrawUsage ); 

        for (let i = 0; i < 6000; i++) {
            const random = +(Math.random() * 10).toFixed(0);
            let colorValue = 0x8cde0d;           
            position.set(
                Math.random() * 800 - 500,
                Math.random() * 800 - 500,
                Math.random() * 800 - 500
            )
            o3d.position.copy(position)
            o3d.updateMatrix()
            this.stars2.setMatrixAt(i++, o3d.matrix);

            //this.stars2.setColorAt(i, color.setHex( colorValue ));
            //this.stars2.setColorAt( i, color.setHex( 0xffffff * Math.random() ) );
              this.stars2.setColorAt( i, color.set(0xffffff * Math.random()));

        }
          this.stars2.instanceColor.needsUpdate = true;
          this.stars2.instanceMatrix.needsUpdate = true;
          this.scene.add(this.stars2);

    }

我尝试了三种不同的方式

    this.stars2.setColorAt(i, color.setHex( colorValue ));
    this.stars2.setColorAt( i, color.setHex( 0xffffff * Math.random() ) );
    this.stars2.setColorAt( i, color.set(0xffffff * Math.random()));

但其中 none 有效，有点奇怪如何以正确的方式做到这一点

Answer 1

应该是：

stars2.setColorAt(i, color.setHex( 0xffffff * Math.random() ));

let camera, scene, renderer;

init();
render();

function init() {

  camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 10000);
  camera.position.z = 1000;

  scene = new THREE.Scene();

  const geometry = new THREE.SphereGeometry(10, 8, 8);
  const material = new THREE.MeshBasicMaterial();
  const stars2 = new THREE.InstancedMesh(geometry, material, 1000);

  const o3d = new THREE.Object3D();
  const position = new THREE.Vector3();
  const color = new THREE.Color();

  for (let i = 0; i < stars2.count; i++) {
    position.set(
      Math.random() * 800 - 400,
      Math.random() * 800 - 400,
      Math.random() * 800 - 400
    )

    o3d.position.copy(position)
    o3d.updateMatrix()
    
    stars2.setMatrixAt(i, o3d.matrix);
    stars2.setColorAt(i, color.setHex( 0xffffff * Math.random() ));

  }

  scene.add(stars2);

  renderer = new THREE.WebGLRenderer({
    antialias: true
  });
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

}

function render() {

  renderer.render(scene, camera);

}

body {
      margin: 0;
}

<script src="https://cdn.jsdelivr.net/npm/three@0.125.2/build/three.min.js"></script>

您的代码中有两个错误导致您的应用无法运行：

您定义了 1000 个实例，但迭代了 6000 个以上。
您再次在循环内递增循环变量。这意味着您的索引完全关闭。

在 three.js 125 版本中无法在 InstancedMesh 中设置颜色

can not set color in InstancedMesh in three.js 125 version

three.js