javascript - 使用 ObjectLoader 加载的 THREE.js 对象无法更改不透明度

Question

我有一个存储在 JSON 文件中的 THREE.js 对象。我想设置对象的不透明度，但什么都没有改变，仍然完全不透明。

我正在 THREE.WebGLRenderer 104、Google Chrome 76、Windows 10 上运行。我已经尝试了在 google 上找到的所有其他内容，但没有任何改变。

    loader.load(
        "objects/brain-simple-mesh.json",
        function ( obj ) {
            obj.traverse((node) => {
                if (node.material) {
                    node.material.opacity = 0.5;
                    node.material.alphaTest = 0.5;                       
                    node.material.transparent = true;
                }
            });
            window.group = new THREE.Object3D();
            //reajustments
            obj.rotation.z = -0.5;
            obj.rotation.x = 0.09;
            group.add(window.obj=obj);
            scene.add( group );
            //look at object
            camera.position.z = 10;
            setInterval(function(){
                //rotate object
                window.group.rotation.y+=0.03;
            }, 100);
    },
        function ( xhr ) {
            //progress bar
            document.getElementById('loader').style.display = 'none';
            document.getElementById('progress').style.width = (xhr.loaded / ( xhr.total > 0 ? xhr.total : 9719635 ) * 100) + '%';
    },
     function ( err ) {
             //error
         console.error( 'An error happened' );
     });

我希望看到一个半透明的大脑模型，我得到的是一些廉价的、完全不透明的仿制品。

网址:http://im--age.rf.gd/u0/Terminal%20Man/

Answer 1

当我检查您的 node.material 对象时，我注意到虽然透明度设置为 true，并且不透明度设置为 0.5，但 depthWrite 值仍然设置为真的。然后我查看了您的代码，发现您正在设置node.depthWrite = false。但这需要在 Material 上进行设置。尝试:

node.material.depthWrite = false;

当我下载您的 JSON 并在本地运行您的代码时，这产生了不同。

因此，例如，在您链接到的网站上，您的 obj.traverse() 应该如下所示:

obj.traverse((node) => {
    if (node.material) {
        node.material.transparent = true;
        node.material.opacity = 0.5;
        node.material.depthWrite = false;  // not node.depthWrite
    }
});