三.js 在透明材质上的奇怪行为

【问题标题】：three.js strange behaviour on transparent materials三.js 在透明材质上的奇怪行为
【发布时间】：2015-01-16 23:28:34
【问题描述】：

我正在使用three.js并创建了一个带有House的场景，它的墙上有很多门/窗，房间里面有一些生活用品，比如椅子、沙发等，所有的它们是单独的网格，组合为单个 House 对象，我几乎没有得到预期的结果，但在墙壁材料方面遇到了一些问题

我附上了 2 张图片来说明我的问题，这里也解释一下我得到了什么

图 1： 我的模型从相机的长镜头看起来很漂亮，我可以看到房间内的门/窗连接的墙壁，我可以看到沙发

图2： 从墙上附加的门/窗看我的房间时，另一侧的墙消失了，看起来透明，但我可以看到那堵墙上的门/窗

不知道我的墙出了什么问题

我的代码如下：

function wall_fill(type,no_of_walls,wall_no,inner_filltype,inner_fill,outer_filltype,outer_fill,left_filltype,left_fill,right_filltype,right_fill,top_filltype,top_fill,bottom_filltype,bottom_fill,front_filltype,front_fill,back_filltype,back_fill)
    {            
        var materials,inner_material,outer_material,left_material,right_material,top_material,bottom_material,front_material,back_material;

        // inner wall
        if(inner_filltype    ==    'texture')
        {
            var inner_texture            =    THREE.ImageUtils.loadTexture( baseurl+'uploads/textures/'+type+'/'+inner_fill );
            inner_texture.anisotropy    =     renderer.getMaxAnisotropy();
            inner_texture.wrapS         =     inner_texture.wrapT    =    THREE.RepeatWrapping;                
            inner_material    =    new THREE.MeshPhongMaterial({map: inner_texture,transparent : true,transparency : 1.0,opacity: 1.5, overdraw: 0.5});
        }
        else if(inner_filltype    ==    'color')
        {
            inner_fill    =    parseInt(inner_fill);
            inner_material    =    new THREE.MeshBasicMaterial({color: inner_fill,transparent: false,opacity: 1.5, overdraw: 0.5,side: THREE.DoubleSide })
        }
        else
        {
            var inner_texture            =    THREE.ImageUtils.loadTexture( baseurl+'uploads/textures/'+type+'/trans.png' );
            inner_texture.anisotropy    =     renderer.getMaxAnisotropy();
            inner_texture.wrapS         =     inner_texture.wrapT    =    THREE.RepeatWrapping;                
            //inner_material    =    new THREE.MeshPhongMaterial({map: inner_texture,transparent: true,opacity: 1.5, overdraw: 0.5 });
            inner_material    =    new THREE.MeshBasicMaterial({color: 0xd6d6d6,transparent: true,opacity: -1.5, overdraw: 0.5 })
        }

        // outer wall
        if(outer_filltype    ==    'texture')
        {
            var outer_texture            =    THREE.ImageUtils.loadTexture( baseurl+'uploads/textures/'+type+'/'+outer_fill );
            outer_texture.anisotropy    =     renderer.getMaxAnisotropy();
            outer_texture.wrapS         =     outer_texture.wrapT    =    THREE.RepeatWrapping;    
            outer_material    =    new THREE.MeshPhongMaterial({map: outer_texture,transparent: true, opacity: 1.5,overdraw: 0.5,  });
        }
        else if(outer_filltype    ==    'color')
        {
            outer_fill    =    parseInt(outer_fill);
            outer_material    =    new THREE.MeshBasicMaterial({color: outer_fill,transparent: true, opacity: 1.5, overdraw: 0.5,side: THREE.DoubleSide });
        }
        else
        {
            var outer_texture            =    THREE.ImageUtils.loadTexture( baseurl+'uploads/textures/'+type+'/trans.png');
            outer_texture.anisotropy    =     renderer.getMaxAnisotropy();
            outer_texture.wrapS         =     outer_texture.wrapT    =    THREE.RepeatWrapping;    
            //outer_material    =    new THREE.MeshPhongMaterial({map: outer_texture,transparent: true, opacity: 1.5,overdraw: 0.5 });
            outer_material    =    new THREE.MeshBasicMaterial({color: 0xd6d6d6,transparent: true, opacity: -1.5, overdraw: 0.5 });
        }

        // left wall
        if(left_filltype    ==    'texture')
        {
            var left_texture            =    THREE.ImageUtils.loadTexture( baseurl+'uploads/textures/'+type+'/'+left_fill );
            left_texture.anisotropy        =     renderer.getMaxAnisotropy();
            left_texture.wrapS             =     left_texture.wrapT    =    THREE.RepeatWrapping;    
            left_material    =    new THREE.MeshPhongMaterial({map: left_texture,transparent: true, opacity: 1.5,overdraw: 0.5 });
        }
        else if(left_filltype    ==    'color')
        {
            left_fill    =    parseInt(left_fill);
            left_material    =    new THREE.MeshBasicMaterial({color: left_fill,transparent: true, opacity: 1.5, overdraw: 0.5,side: THREE.DoubleSide });
        }
        else
        {
            var left_texture            =    THREE.ImageUtils.loadTexture( baseurl+'uploads/textures/'+type+'/trans.png');
            left_texture.anisotropy        =     renderer.getMaxAnisotropy();
            left_texture.wrapS             =     left_texture.wrapT    =    THREE.RepeatWrapping;    
            //left_material    =    new THREE.MeshPhongMaterial({map: left_texture,transparent: true, opacity: 1.5,overdraw: 0.5 });            
            left_material    =    new THREE.MeshBasicMaterial({color: 0xd6d6d6,transparent: true, opacity: -1.5, overdraw: 0.5 });
        }

        // right wall
        if(right_filltype    ==    'texture')
        {
            var right_texture            =    THREE.ImageUtils.loadTexture( baseurl+'uploads/textures/'+type+'/'+right_fill );
            right_texture.anisotropy    =     renderer.getMaxAnisotropy();
            right_texture.wrapS         =     right_texture.wrapT    =    THREE.RepeatWrapping;    
            right_material    =    new THREE.MeshPhongMaterial({map: right_texture,transparent: true, opacity: 1.5,overdraw: 0.5 });
        }
        else if(right_filltype    ==    'color')
        {
            right_fill    =    parseInt(right_fill);
            right_material    =    new THREE.MeshBasicMaterial({color: right_fill,transparent: true, opacity: 1.5, overdraw: 0.5,side: THREE.DoubleSide });
        }
        else
        {
            var right_texture            =    THREE.ImageUtils.loadTexture( baseurl+'uploads/textures/'+type+'/trans.png');
            right_texture.anisotropy    =     renderer.getMaxAnisotropy();
            right_texture.wrapS         =     right_texture.wrapT    =    THREE.RepeatWrapping;    
            //right_material    =    new THREE.MeshPhongMaterial({map: right_texture,transparent: true, opacity: 1.5,overdraw: 0.5 });
            right_material    =    new THREE.MeshBasicMaterial({color: 0xd6d6d6,transparent: true, opacity: -1.5, overdraw: 0.5 });
        }

        // top wall
        if(top_filltype    ==    'texture')
        {
            var top_texture                =    THREE.ImageUtils.loadTexture( baseurl+'uploads/textures/'+type+'/'+top_fill );
            top_texture.anisotropy        =     renderer.getMaxAnisotropy();
            top_texture.wrapS             =     top_texture.wrapT    =    THREE.RepeatWrapping;    
            top_material    =    new THREE.MeshPhongMaterial({map: top_texture,transparent: true, opacity: 1.5,overdraw: 0.5 });
        }
        else if(top_filltype    ==    'color')
        {
            top_fill    =    parseInt(top_fill);
            top_material    =    new THREE.MeshBasicMaterial({color: top_fill,transparent: true, opacity: 1.5, overdraw: 0.5,side: THREE.DoubleSide });
        }
        else
        {
            var top_texture            =    THREE.ImageUtils.loadTexture( baseurl+'uploads/textures/'+type+'/trans.png');
            top_texture.anisotropy    =     renderer.getMaxAnisotropy();
            top_texture.wrapS         =     top_texture.wrapT    =    THREE.RepeatWrapping;    
            //top_material    =    new THREE.MeshPhongMaterial({map: top_texture,transparent: true, opacity: 1.5,overdraw: 0.5 });
            top_material    =    new THREE.MeshBasicMaterial({color: 0xd6d6d6,transparent: true, opacity: -1.5, overdraw: 0.5 });
        }

        // bottom wall
        if(bottom_filltype    ==    'texture')
        {
            var bottom_texture            =    THREE.ImageUtils.loadTexture( baseurl+'uploads/textures/'+type+'/'+bottom_fill );
            bottom_texture.anisotropy    =     renderer.getMaxAnisotropy();
            bottom_texture.wrapS         =     bottom_texture.wrapT    =    THREE.RepeatWrapping;    
            bottom_material    =    new THREE.MeshPhongMaterial({map: bottom_texture,transparent: true, opacity: 1.5,overdraw: 0.5 });
        }
        else if(bottom_filltype    ==    'color')
        {
            bottom_fill    =    parseInt(bottom_fill);
            bottom_material    =    new THREE.MeshBasicMaterial({color: bottom_fill,transparent: true, opacity: 1.5, overdraw: 0.5,side: THREE.DoubleSide });
        }
        else
        {
            var bottom_texture            =    THREE.ImageUtils.loadTexture( baseurl+'uploads/textures/'+type+'/trans.png');
            bottom_texture.anisotropy    =     renderer.getMaxAnisotropy();
            bottom_texture.wrapS         =     bottom_texture.wrapT    =    THREE.RepeatWrapping;    
            //bottom_material    =    new THREE.MeshPhongMaterial({map: bottom_texture,transparent: true, opacity: 1.5,overdraw: 0.5 });
            bottom_material    =    new THREE.MeshBasicMaterial({color: 0xd6d6d6,transparent: true, opacity: -1.5, overdraw: 0.5 });
        }

        // front wall
        if(front_filltype    ==    'texture')
        {
            var front_texture            =    THREE.ImageUtils.loadTexture( baseurl+'uploads/textures/'+type+'/'+front_fill );
            front_texture.anisotropy    =     renderer.getMaxAnisotropy();
            front_texture.wrapS         =     front_texture.wrapT    =    THREE.RepeatWrapping;    
            front_material    =    new THREE.MeshPhongMaterial({map: front_texture,transparent: true, opacity: 1.5,overdraw: 0.5 });
        }
        else if(front_filltype    ==    'color')
        {
            front_fill    =    parseInt(front_fill);
            front_material    =    new THREE.MeshBasicMaterial({color: front_fill,transparent: true, opacity: 1.5, overdraw: 0.5 ,side: THREE.DoubleSide});
        }
        else
        {
            var front_texture            =    THREE.ImageUtils.loadTexture( baseurl+'uploads/textures/'+type+'/trans.png');
            front_texture.anisotropy    =     renderer.getMaxAnisotropy();
            front_texture.wrapS         =     front_texture.wrapT    =    THREE.RepeatWrapping;    
            //front_material    =    new THREE.MeshPhongMaterial({map: front_texture,transparent: true, opacity: 1.5,overdraw: 0.5 });
            front_material    =    new THREE.MeshBasicMaterial({color: 0xd6d6d6,transparent: true, opacity: -1.5, overdraw: 0.5 });
        }

        // back wall
        if(back_filltype    ==    'texture')
        {
            var back_texture            =    THREE.ImageUtils.loadTexture( baseurl+'uploads/textures/'+type+'/'+back_fill );
            back_texture.anisotropy    =     renderer.getMaxAnisotropy();
            back_texture.wrapS         =     back_texture.wrapT    =    THREE.RepeatWrapping;    
            back_material    =    new THREE.MeshPhongMaterial({map: back_texture,transparent: true, opacity: 1.5,overdraw: 0.5 });
        }
        else if(back_filltype    ==    'color')
        {
            back_fill    =    parseInt(back_fill);
            back_material    =    new THREE.MeshBasicMaterial({color: back_fill,transparent: true, opacity: 1.5, overdraw: 0.5 ,side: THREE.DoubleSide});
        }
        else
        {
            var back_texture            =    THREE.ImageUtils.loadTexture( baseurl+'uploads/textures/'+type+'/trans.png');
            back_texture.anisotropy    =     renderer.getMaxAnisotropy();
            back_texture.wrapS         =     back_texture.wrapT    =    THREE.RepeatWrapping;    
            //back_material    =    new THREE.MeshPhongMaterial({map: back_texture,transparent: true, opacity: 1.5,overdraw: 0.5 });
            back_material    =    new THREE.MeshBasicMaterial({color: 0xd6d6d6,transparent: true, opacity: -1.5, overdraw: 0.5 });
        }

        var left,right,top,bottom,front,back;
            if( wall_no    ==    1)
            {
                left    =    left_material;
                right    =    right_material;
                top        =    top_material;
                bottom    =    bottom_material;
                front    =    inner_material;
                back    =    outer_material;
            }

            if( wall_no    ==    2)
            {
                left    =    outer_material;
                right    =    inner_material;
                top        =    top_material;
                bottom    =    bottom_material;
                front    =    front_material;
                back    =    back_material;
            }

            if( wall_no    ==    3)
            {
                left    =    left_material;
                right    =    right_material;
                top        =    top_material;
                bottom    =    bottom_material;
                front    =    outer_material;
                back    =    inner_material;
            }

            if( wall_no    ==    4)
            {
                left    =    inner_material;
                right    =    outer_material;
                top        =    top_material;
                bottom    =    bottom_material;
                front    =    front_material;
                back    =    back_material;
            }

            materials = [
                      left,    // Left side
                      right, // Right side
                      top,     // Top side    
                      bottom,// Bottom side    
                      front, // Front side
                      back    // Back side
                    ];

        var material    =    new THREE.MeshFaceMaterial(materials);
        return material;
    }

更新功能

function wall_fill(type,no_of_walls,wall_no,inner_filltype,inner_fill,outer_filltype,outer_fill,left_filltype,left_fill,right_filltype,right_fill,top_filltype,top_fill,bottom_filltype,bottom_fill,front_filltype,front_fill,back_filltype,back_fill)
    {           
        var materials,inner_material,outer_material,left_material,right_material,top_material,bottom_material,front_material,back_material;

        // inner wall
        if(inner_filltype   ==  'texture')
        {
            var inner_texture           =   THREE.ImageUtils.loadTexture( baseurl+'uploads/textures/'+type+'/'+inner_fill );
            inner_texture.anisotropy    =   renderer.getMaxAnisotropy();
            inner_texture.wrapS         =   inner_texture.wrapT =   THREE.RepeatWrapping;               
            inner_material  =   new THREE.MeshBasicMaterial({map: inner_texture,transparent : true, opacity:0.5,side: THREE.DoubleSide });
        }
        else if(inner_filltype  ==  'color')
        {
            inner_fill  =   parseInt(inner_fill);
            inner_material  =   new THREE.MeshBasicMaterial({color: inner_fill,transparent: true,opacity:0.5 })
        }
        else
        {
            var inner_texture           =   THREE.ImageUtils.loadTexture( baseurl+'uploads/textures/'+type+'/trans.png' );
            inner_texture.anisotropy    =   renderer.getMaxAnisotropy();
            inner_texture.wrapS         =   inner_texture.wrapT =   THREE.RepeatWrapping;               
            //inner_material    =   new THREE.MeshBasicMaterial({map: inner_texture,transparent: true });
            inner_material  =   new THREE.MeshBasicMaterial({color: 0xd6d6d6,transparent: true,opacity:0.5 })
        }

        // outer wall
        if(outer_filltype   ==  'texture')
        {
            var outer_texture           =   THREE.ImageUtils.loadTexture( baseurl+'uploads/textures/'+type+'/'+outer_fill );
            outer_texture.anisotropy    =   renderer.getMaxAnisotropy();
            outer_texture.wrapS         =   outer_texture.wrapT =   THREE.RepeatWrapping;   
            outer_material  =   new THREE.MeshBasicMaterial({map: outer_texture,transparent: true,opacity:0.5,side: THREE.DoubleSide});
        }
        else if(outer_filltype  ==  'color')
        {
            outer_fill  =   parseInt(outer_fill);
            outer_material  =   new THREE.MeshBasicMaterial({color: outer_fill,transparent: true, opacity:0.5});
        }
        else
        {
            var outer_texture           =   THREE.ImageUtils.loadTexture( baseurl+'uploads/textures/'+type+'/trans.png');
            outer_texture.anisotropy    =   renderer.getMaxAnisotropy();
            outer_texture.wrapS         =   outer_texture.wrapT =   THREE.RepeatWrapping;   
            //outer_material    =   new THREE.MeshBasicMaterial({map: outer_texture,transparent: true });
            outer_material  =   new THREE.MeshBasicMaterial({color: 0xd6d6d6,transparent: true ,opacity:0.5});
        }

        // left wall
        if(left_filltype    ==  'texture')
        {
            var left_texture            =   THREE.ImageUtils.loadTexture( baseurl+'uploads/textures/'+type+'/'+left_fill );
            left_texture.anisotropy     =   renderer.getMaxAnisotropy();
            left_texture.wrapS          =   left_texture.wrapT  =   THREE.RepeatWrapping;   
            left_material   =   new THREE.MeshBasicMaterial({map: left_texture,transparent: true ,opacity:0.5});
        }
        else if(left_filltype   ==  'color')
        {
            left_fill   =   parseInt(left_fill);
            left_material   =   new THREE.MeshBasicMaterial({color: left_fill,transparent: true,opacity:0.5 });
        }
        else
        {
            var left_texture            =   THREE.ImageUtils.loadTexture( baseurl+'uploads/textures/'+type+'/trans.png');
            left_texture.anisotropy     =   renderer.getMaxAnisotropy();
            left_texture.wrapS          =   left_texture.wrapT  =   THREE.RepeatWrapping;   
            //left_material =   new THREE.MeshBasicMaterial({map: left_texture,transparent: true });            
            left_material   =   new THREE.MeshBasicMaterial({color: 0xd6d6d6,transparent: true,opacity:0.5 });
        }

        // right wall
        if(right_filltype   ==  'texture')
        {
            var right_texture           =   THREE.ImageUtils.loadTexture( baseurl+'uploads/textures/'+type+'/'+right_fill );
            right_texture.anisotropy    =   renderer.getMaxAnisotropy();
            right_texture.wrapS         =   right_texture.wrapT =   THREE.RepeatWrapping;   
            right_material  =   new THREE.MeshBasicMaterial({map: right_texture,transparent: true ,opacity:0.5});
        }
        else if(right_filltype  ==  'color')
        {
            right_fill  =   parseInt(right_fill);
            right_material  =   new THREE.MeshBasicMaterial({color: right_fill,transparent: true,opacity:0.5 });
        }
        else
        {
            var right_texture           =   THREE.ImageUtils.loadTexture( baseurl+'uploads/textures/'+type+'/trans.png');
            right_texture.anisotropy    =   renderer.getMaxAnisotropy();
            right_texture.wrapS         =   right_texture.wrapT =   THREE.RepeatWrapping;   
            //right_material    =   new THREE.MeshBasicMaterial({map: right_texture,transparent: true });
            right_material  =   new THREE.MeshBasicMaterial({color: 0xd6d6d6,transparent: true,opacity:0.5});
        }

        // top wall
        if(top_filltype ==  'texture')
        {
            var top_texture             =   THREE.ImageUtils.loadTexture( baseurl+'uploads/textures/'+type+'/'+top_fill );
            top_texture.anisotropy      =   renderer.getMaxAnisotropy();
            top_texture.wrapS           =   top_texture.wrapT   =   THREE.RepeatWrapping;   
            top_material    =   new THREE.MeshBasicMaterial({map: top_texture,transparent: true,opacity:0.5 });
        }
        else if(top_filltype    ==  'color')
        {
            top_fill    =   parseInt(top_fill);
            top_material    =   new THREE.MeshBasicMaterial({color: top_fill,transparent: true,opacity:0.5});
        }
        else
        {
            var top_texture         =   THREE.ImageUtils.loadTexture( baseurl+'uploads/textures/'+type+'/trans.png');
            top_texture.anisotropy  =   renderer.getMaxAnisotropy();
            top_texture.wrapS       =   top_texture.wrapT   =   THREE.RepeatWrapping;   
            //top_material  =   new THREE.MeshBasicMaterial({map: top_texture,transparent: true });
            top_material    =   new THREE.MeshBasicMaterial({color: 0xd6d6d6,transparent: true,opacity:0.5 });
        }

        // bottom wall
        if(bottom_filltype  ==  'texture')
        {
            var bottom_texture          =   THREE.ImageUtils.loadTexture( baseurl+'uploads/textures/'+type+'/'+bottom_fill );
            bottom_texture.anisotropy   =   renderer.getMaxAnisotropy();
            bottom_texture.wrapS        =   bottom_texture.wrapT    =   THREE.RepeatWrapping;   
            bottom_material =   new THREE.MeshBasicMaterial({map: bottom_texture,transparent: true,opacity:0.5 });
        }
        else if(bottom_filltype ==  'color')
        {
            bottom_fill =   parseInt(bottom_fill);
            bottom_material =   new THREE.MeshBasicMaterial({color: bottom_fill,transparent: true, opacity:0.5});
        }
        else
        {
            var bottom_texture          =   THREE.ImageUtils.loadTexture( baseurl+'uploads/textures/'+type+'/trans.png');
            bottom_texture.anisotropy   =   renderer.getMaxAnisotropy();
            bottom_texture.wrapS        =   bottom_texture.wrapT    =   THREE.RepeatWrapping;   
            //bottom_material   =   new THREE.MeshBasicMaterial({map: bottom_texture,transparent: true });
            bottom_material =   new THREE.MeshBasicMaterial({color: 0xd6d6d6,transparent: true,opacity:0.5 });
        }

        // front wall
        if(front_filltype   ==  'texture')
        {
            var front_texture           =   THREE.ImageUtils.loadTexture( baseurl+'uploads/textures/'+type+'/'+front_fill );
            front_texture.anisotropy    =   renderer.getMaxAnisotropy();
            front_texture.wrapS         =   front_texture.wrapT =   THREE.RepeatWrapping;   
            front_material  =   new THREE.MeshBasicMaterial({map: front_texture,transparent: true,opacity:0.5 });
        }
        else if(front_filltype  ==  'color')
        {
            front_fill  =   parseInt(front_fill);
            front_material  =   new THREE.MeshBasicMaterial({color: front_fill,transparent: true ,opacity:0.5});
        }
        else
        {
            var front_texture           =   THREE.ImageUtils.loadTexture( baseurl+'uploads/textures/'+type+'/trans.png');
            front_texture.anisotropy    =   renderer.getMaxAnisotropy();
            front_texture.wrapS         =   front_texture.wrapT =   THREE.RepeatWrapping;   
            //front_material    =   new THREE.MeshBasicMaterial({map: front_texture,transparent: true });
            front_material  =   new THREE.MeshBasicMaterial({color: 0xd6d6d6,transparent: true,opacity:0.5 });
        }

        // back wall
        if(back_filltype    ==  'texture')
        {
            var back_texture            =   THREE.ImageUtils.loadTexture( baseurl+'uploads/textures/'+type+'/'+back_fill );
            back_texture.anisotropy =   renderer.getMaxAnisotropy();
            back_texture.wrapS      =   back_texture.wrapT  =   THREE.RepeatWrapping;   
            back_material   =   new THREE.MeshBasicMaterial({map: back_texture,transparent: true,opacity:0.5, });
        }
        else if(back_filltype   ==  'color')
        {
            back_fill   =   parseInt(back_fill);
            back_material   =   new THREE.MeshBasicMaterial({color: back_fill,transparent: true ,opacity:0.5});
        }
        else
        {
            var back_texture            =   THREE.ImageUtils.loadTexture( baseurl+'uploads/textures/'+type+'/trans.png');
            back_texture.anisotropy =   renderer.getMaxAnisotropy();
            back_texture.wrapS      =   back_texture.wrapT  =   THREE.RepeatWrapping;   
            //back_material =   new THREE.MeshBasicMaterial({map: back_texture,transparent: true });
            back_material   =   new THREE.MeshBasicMaterial({color: 0xd6d6d6,transparent: true ,opacity:0.5});
        }

        var left,right,top,bottom,front,back;
            if( wall_no ==  1)
            {
                left    =   left_material;
                right   =   right_material;
                top     =   top_material;
                bottom  =   bottom_material;
                front   =   inner_material;
                back    =   outer_material;
            }

            if( wall_no ==  2)
            {
                left    =   outer_material;
                right   =   inner_material;
                top     =   top_material;
                bottom  =   bottom_material;
                front   =   front_material;
                back    =   back_material;
            }

            if( wall_no ==  3)
            {
                left    =   left_material;
                right   =   right_material;
                top     =   top_material;
                bottom  =   bottom_material;
                front   =   outer_material;
                back    =   inner_material;
            }

            if( wall_no ==  4)
            {
                left    =   inner_material;
                right   =   outer_material;
                top     =   top_material;
                bottom  =   bottom_material;
                front   =   front_material;
                back    =   back_material;
            }

            materials = [
                      left, // Left side 
                      right, // Right side 
                      top,   // Top side    
                      bottom,// Bottom side 
                      front, // Front side 
                      back  // Back side 
                    ];

        var material    =   new THREE.MeshFaceMaterial(materials); 
        return material;
    }

仍然得到相同的结果

【问题讨论】：

  • 1.为什么是opacity = - 1.5 or + 1.5？ 2. 为什么你的设置是overdraw = 0.5？ 3. 您是否将几何图形合并为一个？ 4. 你为什么用MeshFaceMaterials？ 5. 你在用WebGLRenderer吗？
  • 1. Opacity=-1.5,1.5 对我有用，如果我将 0 设置为 1，我不会以某种方式看到任何变化，所以我保持原样，2. 我尝试不使用 overdraw，所以对此毫无意义，3.是 4 .我认为MeshFaceMaterials 很好，所以我正在使用它 5. 是的WebGLRenderer
  • 嗨@WestLangley 任何问题的答复？？？？
  • 1.为什么opacity 0.5？ 2. 为什么设置anisotropy？ 3、为什么要设置wrapS和wrapT？ 4.为什么transparent是真的？
  • 1.opacity 0.5：我想要完全透明的材料，它看起来就像门空间 2.当我从远处看时，纹理看起来很模糊，所以使用anisotropy 4.我需要这些材料环绕整个几何图形，所以使用 4。我需要透明材料，所以我正在使用

标签： three.js


【解决方案1】：

我在我的 THREE.js 应用程序中所做的是完全禁用所有材料的透明度。然后我在我的材料上启用“alphaTest”参数。这样做的目的是禁用平滑 alpha，并为透明或不透明使用截止值。

这是我的材质设置：

specular: new THREE.Color( 0x101010 ),
shininess: 40,
alphaTest: 0.15,
color: new THREE.Color( 0xffffff ),
metal: true,
wrapAround: true,
side: THREE.DoubleSide

这样设置transparent: false是安全的。

如果您的所有对象都不是半透明的，这将解决您的问题。如果它们是半透明的，则必须实现更复杂的算法才能正确绘制透明度（请参阅深度剥离或其他方法，例如按特定顺序绘制对象）。

【讨论】：

  • 嗨@beiller，感谢您的回复，但我仍然看不到任何变化，除了我的材料现在是全白的
猜你喜欢
  • 1970-01-01
  • 2023-03-27
  • 2017-12-18
  • 1970-01-01
  • 1970-01-01
  • 2015-03-04
  • 2016-12-04
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode