Three.js多种材料:如何改变透明度？

Question

我试图改变用MTLLoader.js和OBJLoader.js进口的多面体的透明度。下面是我用来加载多面体的代码：

// Model
var obj_file_name = file_name + ".obj";
var mtl_file_name = file_name + ".obj.mtl";
var dual_file_name = file_name + "-dual.obj";

var onProgress = function ( xhr ) {
    if ( xhr.lengthComputable ) {
        var percentComplete = xhr.loaded / xhr.total * 100;
        console.log( Math.round(percentComplete, 2) + '% downloaded' );
    }
};
var onError = function ( xhr ) { };
THREE.Loader.Handlers.add( /\.dds$/i, new THREE.DDSLoader() );
var mtlLoader = new THREE.MTLLoader();
mtlLoader.setPath( 'obj/' );
mtlLoader.load( mtl_file_name, function( materials ) {
    materials.preload();
    var objLoader = new THREE.OBJLoader();
    objLoader.setMaterials( materials );
    objLoader.setPath( 'obj/' );
    objLoader.load( obj_file_name, function ( object )
    {
        object.traverse(function (child)
        {
            if (child instanceof THREE.Mesh)
            {
                // Polyhedra
                child.name = "pdp-faces";
                context0.scene.add(child);
                // var geometry = new THREE.Geometry().fromBufferGeometry( child.geometry );
                // alert('From loaded OBJ: ' + geometry.vertices.length);


                // Edges
                var edges = new THREE.LineSegments(new THREE.EdgesGeometry(child.geometry), new THREE.LineBasicMaterial( {color: 0x000000}) );
                edges.name = "pdp-edges";
                context0.scene.add(edges);

                // Vertices
                var geometry = new THREE.Geometry().fromBufferGeometry( child.geometry );
                // alert('After EdgesGeometry(): ' + geometry.vertices.length);
                var vertices = [];
                var isNew;
                var tolerance = 0.0000001;
                if (geometry.vertices.length > 0)
                {
                    vertices.push(new THREE.Vector3(geometry.vertices[0].x, geometry.vertices[0].y, geometry.vertices[0].z));
                }
                for (i = 1; i < geometry.vertices.length; i++)
                {
                    l = vertices.length;
                    isNew = true;
                    for (j = 0; j < l; j++)
                    {
                        var d = geometry.vertices[i].distanceTo(vertices[j]);
                        if (d < tolerance)
                        {
                            isNew = false;
                        }
                    }
                    if (isNew == true)
                    {
                        vertices.push(new THREE.Vector3(geometry.vertices[i].x, geometry.vertices[i].y, geometry.vertices[i].z));
                    }
                }

                // Fit screen
                child.geometry.computeBoundingSphere();
                var fov = context0.camera.fov * ( Math.PI / 180 );
                var objectSize = child.geometry.boundingSphere.radius;
                var distance = 0.7*Math.abs( objectSize / Math.sin( fov / 2 ) );
                context0.camera.position.z = distance;
                context0.camera.position.x = distance;
                context0.camera.position.y = distance;
            }
        });
    }, onProgress, onError );
});

此后，我使用以下代码更改其透明度：

   context0.scene.getObjectByName("pdp-faces").material.transparent = true;
   context0.scene.getObjectByName("pdp-faces").material.opacity = (1 - val/100.0);

问题是代码只适用于单一的材料。我的意思是，如果一个多面体OBJ有两个或两个以上的彩色面，我不能用这种方式改变它的透明度。

这里是一个展示问题的视频。

这里是程序站点。

拜托，你能帮帮我吗？

提前谢谢你，温贝托。

Answer 1

在three.js中，当一个可呈现对象有多个材料时，mesh.material是一个数组。因此，如果您想改变材料的不透明度，您需要使用以下模式：

object.material[ 0 ].opacity = 0.5;
object.material[ 1 ].opacity = 0.5;

对于每种材料，一定要将transparent设置为真。

您可以测试该材料是否是如下所示的数组：

if ( Array.isArray( object.material ) ) {

    // your code

}

three.js r.86号