三.js多材质：如何改变透明度？答案

【问题标题】：Three.js multiple materials: how to change transparency?三.js多材质：如何改变透明度？
【发布时间】：2017-12-18 06:19:06
【问题描述】：

我正在尝试更改使用 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，我无法以这种方式更改其透明度。

Here 是显示问题的视频。

Here 是程序站点。

拜托，你能帮帮我吗？

提前致谢，温贝托。

【问题讨论】：

标签： javascript three.js

【解决方案1】：

在three.js中，当一个可渲染对象有多个材质时，mesh.material是一个数组。因此，如果你想改变材质的不透明度，你需要使用这个模式：

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

请务必将每种材质的 transparent 也设置为 true。

你可以像这样测试材质是否是一个数组：

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

    // your code

}

three.js r.86

【讨论】：