three.js对透明材料的奇怪行为
我正在和three.js一起工作，并且我在房子里创建了一个场景，墙上有很多门/窗户，房间里面有一些生活用品，如椅子，沙发等，所有这些都是它们是单独的网格，并且作为单个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 个答案:
答案 0 :(得分：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。
如果您的对象都不是半透明的，这将解决您的问题。如果它们是半透明的，则必须实现更复杂的算法才能正确绘制透明度（请参阅深度剥离或其他方法，例如按特定顺序绘制对象）。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？