javascript - 我所有网格的 three.js clone() 属性更改

Question

我想创建 100 个简单立方体的克隆，并逐渐降低每个立方体的不透明度。这是我的循环:

var geometry = new THREE.BoxGeometry(0.15,0.15,0.15);
var material = new THREE.MeshNormalMaterial();
var cube = new THREE.Mesh( geometry, material );
cube.material.transparent = true;
scene.add( cube );

for(let i = 0; i < 100; i++){
    window['cube'+i] = cube.clone();
    window['cube'+i].position.x = i;

    window['cube'+i].material.opacity = 1 - (0.01*i);
    scene.add(window['cube'+i]);
}

不幸的是，我所有的网格都以最后建立的不透明度结束。我不明白为什么我的所有网格都具有相同的不透明度，而 x 位置正常增加。

有没有人知道如何分离每个不透明度属性？谢谢

Answer 1

出于性能原因，默认情况下克隆网格不会克隆其几何体和 Material 。如果您想控制每个网格的不透明度，最好为每个实例克隆 Material 。