如何更改 Three.js 场景中 JSON 模型的透明度？答案

【问题标题】：How can I change the transparency of the JSON model in the Three.js scene?如何更改 Three.js 场景中 JSON 模型的透明度？
【发布时间】：2016-12-02 10:14:35
【问题描述】：

这幅画是我的 JSON 模型。

painting

我知道我可以通过在 JSON 文件中修改 "transparent":true 和 "opacity": 0.5 来更改透明度。

但是，我想在 Three.js 场景中加载 JSON 模型后更改模型的不透明度。

我用了这个方法，但是没用.....

mesh.material.transparent = true; mesh.material.opacity = 0.1;

这是我的代码。

jsonLoader2.load("models/pic.json", addPicToScn);

function addPicToScn(geometry, material) {
    var mtl = new THREE.MeshFaceMaterial(material);
    var mesh = new THREE.Mesh(geometry, mtl);
    mesh.scale.set(1.3, 1.3, 1.3);
    mesh.material.transparent = true;
    mesh.material.opacity = 0.1;
    mesh.castShadow = true;
    mesh.receiveShadow = true;
    mesh.rotation.set(2.8*Math.PI/5, 0, -Math.PI/2);
    mesh.position.set(0, 6, 21.8);
    scene.add(mesh);
            }

我真的很想知道这个问题的答案......

【问题讨论】：

标签： json three.js transparency opacity

【解决方案1】：

您的模型会生成多种材质，这就是您使用 MeshFaceMaterial 的原因。当你想设置透明度时，你需要在模型的材质上设置它，而不是在 MeshFaceMaterial 上。

所以代码应该如下：

jsonLoader2.load("models/pic.json", addPicToScn);

function addPicToScn(geometry, material) {
    var mtl = new THREE.MeshFaceMaterial(material);
    var mesh = new THREE.Mesh(geometry, mtl);
    mesh.scale.set(1.3, 1.3, 1.3);
    mesh.material.materials.forEach(function(m){
        m.transparent = true;
        m.opacity = 0.1;
    };
    mesh.castShadow = true;
    mesh.receiveShadow = true;
    mesh.rotation.set(2.8*Math.PI/5, 0, -Math.PI/2);
    mesh.position.set(0, 6, 21.8);
    scene.add(mesh);

}

【讨论】：

【解决方案2】：

试试mesh.material.needsUpdate = true

看看：https://github.com/mrdoob/three.js/wiki/Updates

【讨论】：

感谢您的回复！