问题描述
限时送ChatGPT账号..我目前在透明度方面存在问题.正如您在图片中看到的,显示了透明对象后面的非透明对象.但是其他透明物体的backside
没有显示,我设置了material.side = THREE.DoubleSide
.
I currently have a problem with transparency. As you can see in the pictures, the non transparent objects behind the transparent object are shown. But the backside
of the other transparent object is not shown, I set material.side = THREE.DoubleSide
.
它是可见的,当我设置 material.depthWrite = false
时,但随后出现了可见的故障,您可以在第二张图中看到.
It is visible, when I set material.depthWrite = false
, but then the visible glitch happens, you can see in the second picture.
我使用 THREE.MeshPhongMaterial
和最新版本的 Three.js
.这是您可以在图片中看到的材料的值
I use THREE.MeshPhongMaterial
and the newest Version of Three.js
.
Here are the values for the material you can see in the picture
material.color.setHex(0x9ed7f5);
material.emissive.setHex(0x062f61);
material.transparent = true;
material.opacity = 0.5;
material.needsUpdate = true;
material.reflectivity = 0.8;
material.envMap = textureCube;
material.side = THREE.DoubleSide;
material.roughness = 0.2;
material.metalness = 1;
depthWrite = true;
depthwrite = false;
这里应该是什么样子,只有当后面的物体不透明时才有效
Here how it should look, only works if object behind is NOT transparent
好像从另一边我可以看到后面的透明物体.
It seems like from the other side I can see the transparent object behind.
为了解决我对这个问题的困惑,我必须发布另一张图片.在这里,您可以从另一侧(场景旋转 180°)看到图片(1),因为您可以看到这些视图不同,因为背面缺少一个物体(也是一个透明的物体),它显示在另一个视图中.所有这些物体都具有完全相同的材料!
Just to complete my confusion about this problem I have to post another picture. Here you can see picture (1) just from the other side (scene rotated by 180°) as you can see those view is different as there is an object missing in the back (also a transparent one) which is shown in the other view. All of these objects have the exact same material!
envMap textureCube
创建如下
The envMap textureCube
is created as follows
textureCube = new THREE.CubeTextureLoader().load(urls);
textureCube.format = THREE.RGBFormat;
var shader = THREE.ShaderLib["cube"];
shader.uniforms["tCube"].value = textureCube;
var shaderMaterial = new THREE.ShaderMaterial({
fragmentShader: shader.fragmentShader
, vertexShader: shader.vertexShader
, uniforms: shader.uniforms
, depthWrite: false
, side: THREE.BackSide
});
var skyBox = new THREE.Mesh(new THREE.BoxGeometry(1500, 1500, 1500), shaderMaterial);
scene.add(skyBox);
推荐答案
我不能从你的图片中完全看出你的问题,但你能告诉我这是否是同一件事吗?
I can't quite make out your issue from your pictures but can you tell me if this is the same thing?
转到threejs/docs/#Reference/Materials/MeshStandardMaterial,在现场示例中将环境设置为白色,在材质中打开透明并将不透明度设置为0.7左右.
Go to threejs/docs/#Reference/Materials/MeshStandardMaterial, in the live example set ambient to white, turn on transparent in the material and set opacity to about 0.7.
你能看到前景中环面的透明部分在它们后面遮挡其他部分的方式吗?这可能需要一段时间,但如果您在旋转时观看它,您应该明白我的意思.
Can you see the way that the transparent part of the torus in the foreground occludes other parts when they go behind it? It might take a while but if you watch it as it rotates you should see what I mean.
不幸的是,这是一个 WebGL 限制,暂时不是three.js可以修复的.
Unfortunately this is a WebGL limitation, not anything that can be fixed by three.js for the time being.
这篇关于透明对象隐藏其他透明对象(alphaTest 不起作用并且 depthWrite = false 引起一些麻烦)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
更多推荐
[db:关键词]
发布评论