javascript - ThreeJS 新网格 vs 克隆

Question

我想知道创建新网格或克隆网格哪种样式更有效。

例如，我有一个循环创建多次“相同的网格”。但我也注意到，如果我将网格的不透明度设置为 0，并且我想稍后将其更改为可见，这将影响所有具有相同 Material 的网格。难道是因为他们有相同的uuid。

var material = new THREE.MeshPhongMaterial({
    color: 0xff0000,
    transparent: true,  // Make the material transparent
    opacity: 0          // Set material opacity to 0
});

var geometry = new THREE.PlaneGeometry(width, height);

$.each(things, function(i, something) {
    var mesh = new THREE.Mesh(geometry, material);
    // Mesh positioning
    scene.add(mesh);
});

因此，如果我多次使用相同的材​​质和几何体并使用光线转换器更改网格不透明度，它会更改所有网格的不透明度。

我应该在每个循环中使用克隆还是一次又一次地创建网格的 Material 和几何形状？

$.each(things, function(i, something) {
    var mesh = new THREE.Mesh(geometry.clone(), material.clone());
    // Mesh positioning
    scene.add(mesh);
});

或

$.each(things, function(i, something) {
    var material = new THREE.MeshPhongMaterial({
        color: 0xff0000,
        transparent: true,  // Make the material transparent
        opacity: 0          // Set material opacity to 0
     });

     var geometry = new THREE.PlaneGeometry(width, height);
     var mesh = new THREE.Mesh(geometry, material);
     // Mesh postioning here
     scene.add(mesh);
});

Answer 1

在您的第一种方法中，所有网格都建立在相同的几何和 Material (正如您所说，它们也具有相同的 uuid)。所以当你改变 Material 的属性时，它会影响所有使用相同 Material 的网格。但是当您克隆 Material 时，它会创建一个具有相同属性的新 Material ，并且原始 Material 的更改也不会影响克隆的 Material 。所以这个方法很可能对你有用，

$.each(things, function(i, something) {
    var mesh = new THREE.Mesh(geometry, material.clone());
    // rest of your code...
});

我尝试了以下方法，它对我有用，

var material = new THREE.MeshPhongMaterial({
    color: 0xff0000,
    transparent: true,
    opacity: 0.5
});
var geometry = new THREE.PlaneGeometry(100, 100, 1, 1);
for( var i = 0; i < 5; i++ ){

    scene.add( new THREE.Mesh( geometry, material.clone() ) );

}