ThreeJS新网格与克隆

时间:2018-01-17 07:17:33

标签: javascript jquery three.js geometry

我想知道哪种风格更有效,可以创建新网格或克隆网格。

例如,我有一个循环,可以多次创建"相同的网格"。 但我也注意到,如果我将网格的不透明度设置为0并且我想稍后将其更改为可见,则会影响具有相同材质的所有网格。可能是因为他们有相同的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);
});

因此,如果我多次使用相同的材​​质和几何体并使用raycaster来改变网格不透明度,则会改变所有网格的不透明度。

我应该在每个循环中使用克隆还是一次又一次地创建材质和网格的几何体?

$.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);
});

1 个答案:

答案 0 :(得分:2)

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

$.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() ) );

}