THREE.JS使用JSON文件加载外部模型改变材质的透明度

THREE.JS使用JSON文件加载外部模型改变材质的透明度*

今天在做项目的时候遇到了一个问题就将其记录下来，问题如下，想要使用代码改变json外部的模型的透明度起初认为非常简单。后来发现怎么修改都没有用，就查看了json文件，通过修改materials数组里的transparency属性可以改变模型的透明度，给了我探索的契机，最后发现我是用的材质是MeshFaceMaterial，是将所有的材质放在materials数组中，修改透明度时需要materials.material对每一个材质进行修改，下面给出错误和正确的示例。
先给出我刚开始认为的

  var loader = new THREE.JSONLoader();
        loader.load("model/xiangzi.json", function (geometry, materials) {
            var object = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial(materials));
            object.scale.set(.3,.4,.3);
            object.position.set(0,0,0);
            materials.transparent=true;
            materials.opacity=.5;
            scene.add(object);
        });

先将材质的可透明设置为true，然后修改其透明度的值，发现怎么修改都不会改变，如上图所示。然后我就去查看json模型文件，发现可以对透明度进行修改。

"DbgIndex" : 1,
"DbgName"  : "02 - Default",
"colorDiffuse"  : [0.5882, 0.5882, 0.5882],
"colorAmbient"  : [0.5882, 0.5882, 0.5882],
"colorSpecular"  : [0.9000, 0.9000, 0.9000],
"transparency"  : 1,
"specularCoef"  : 10.0,
"mapDiffuse"    : "texture/cabinetSide.jpg",
"vertexColors" : false

通过修改transparency的属性值可以对其透明度进行修改，然后就开始反思，有一个materials数组，每一个里面都有该属性，我就认为需要对materials数组里的每一个材质设置可透明度为true，并设置其透明度的值。于是我就进行尝试，代码如下。

var loader = new THREE.JSONLoader();
        loader.load("model/xiangzi.json", function (geometry, materials) {
            var object = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial(materials));
            object.scale.set(.3,.4,.3);
            object.position.set(0,0,0);
            for(var index=0;index<materials.length;index++){
                materials[index].transparent=true;
                materials[index].opacity=.7;
            }
            scene.add(object);
        });

运行效果如上图所示，就有两种方法来对json外部模型的材质透明度进行改变，一是通过json文件里的材质属性进行修改，二是给遍历材质数组来进行修改。其实本质上来说这两个方法是一样的，只是不同的修改途径。这个问题主要是自己的基础知识还不够完善，将自己遇到的问题记录下来，和遇到同样问题的人一起进步，以上是小白的入坑经验，如果哪里说法有问题希望大佬指出错误。3D的世界里山高水长，还得继续默默前行。

生活不只有诗和远方，还有面包和牛奶。