首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >为什么透明度在我的网格上不起作用?

为什么透明度在我的网格上不起作用?
EN

Stack Overflow用户
提问于 2019-06-03 22:33:50
回答 1查看 763关注 0票数 3

我的场景中有两个网格。中间有一个圆柱体和一个经典平面。我在我的圆柱体上应用了png纹理,这样我们就可以看清楚了。它似乎对圆柱体有效。

在这个屏幕截图上,你会很容易地看到我的问题:我不明白为什么我的图像在我的圆柱体后面是不可见的。

我在我的柱面上使用的代码:

代码语言:javascript
复制
myCylinderMesh.material.transparent = true;
myCylinderMesh.material.side = THREE.DoubleSide;

我如何才能看到隐藏在圆柱体后面的图像部分?

EDIT 1 :

我添加了@ScieCode发给我的代码:

代码语言:javascript
复制
myCylinderMesh.material.alphaTest = 0.5;

结果如下:

它的效果更好:现在我可以看到图像中缺失的部分了。但有一件事遗漏了:我的圆柱体的不透明。我也应该在字母后面看到我的形象。目前我有这样的不透明性:

代码语言:javascript
复制
myCylinderMesh.material.opacity = 0.7;

你知道我错过了什么吗?谢谢

EDIT 2 :

下面是我的两个网格的代码:

柱面:

代码语言:javascript
复制
geoCylinder = new THREE.CylinderBufferGeometry( 0.4, 0.4, 2*Math.PI*0.4/(2048/128), 64, 1, true ); 

matCylinder = new THREE.MeshBasicMaterial( { map:texture, transparent:true, color:0x000000, alphaTest: 0.5, opacity: 0.6, side: THREE.DoubleSide } );

meshCylinder = new THREE.Mesh( geoCylinder, matCylinder );

平面:

代码语言:javascript
复制
geoPlane = new THREE.PlaneBufferGeometry( 0.8, 0.8 );

matPlane = new THREE.MeshBasicMaterial( { map: texturePlane, transparent:true} );

meshPlane = new THREE.Mesh( geoPlane, matPlane );
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-06-05 02:32:43

这种情况的发生是因为透明度渲染在内部的工作方式。透明对象需要与不透明对象分开排序/渲染。这可确保对象将按预期在最终图像上渲染。(但并不总是如此)

这里的问题是,您的平面几何体在圆柱体几何体内部,排序时将首先渲染或稍后渲染。这反过来又会导致你在这里体验到的这些工件。整个透明度渲染比我设计的要复杂得多。

由于平面对象不需要是半透明的,因此只需设置其材质的alphaTest属性即可。这将仅呈现alpha大于该值的片段像素。这也将防止该对象被认为是透明的,并且将始终首先渲染该对象,从而修复场景中的瑕疵。

JSFiddle

Additional info:在DoubleSide中使用透明材质时,可能会遇到自透明度问题。这发生的原因与我刚才解释的相同,但发生在同一对象的两个面之间。此问题的一个可能的解决方案是设置depthWrite = false,这会阻止对象写入深度缓冲区。因此,将渲染每个面,而不考虑其他面是否遮挡它。

票数 4
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/56429506

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档