时间戳

首页 > 解决方案 > 用 ObjectLoader 加载的三个.js 对象无法更改不透明度

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

问题描述

我有一个存储在 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/

标签： javascriptthree.js3dopacity

解决方案

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

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
    }
});

推荐阅读