三.js - 绘制两个重叠的透明球体并隐藏交叉点 [英] three.js - drawing two overlapping transparent spheres and hiding intersection
问题描述
我在 webgl 上下文中有两个透明、重叠的球体.在重叠期间，我想控制球体的绘制方式.你可以在这个页面看到我的问题:
I have two transparent, overlapping spheres in a webgl context. During overlap, I would like to control how the spheres are drawn. You can see my problem at this page:
http://andrewray.me/stuff/circle-clip.html
当红色和蓝色球体重叠时，我希望蓝色球体隐藏在红色球体后面.
如果我只是更改球体添加到场景中的顺序(如果我先添加大球体)，我会得到所需的行为:http://andrewray.me/stuff/circle-clip-correct.html
If I simply change the order in which the spheres are added to the scene (if I add the big sphere first), I get the desired behavior: http://andrewray.me/stuff/circle-clip-correct.html
但是，在我的项目中情况有所不同.尽管我先添加了大球体，但我还是看到了交点.
However, things are different in my project. I see the intersection even though I add the big sphere first.
我得到的最接近的是将较小的球体移近相机.在此示例中，我将较小的球体移近了 10 个单位:http://andrewray.me/stuff/b-test/
The closest I have gotten is moving the smaller spheres closer to the camera. in this example, I have moved the smaller spheres 10 units closer: http://andrewray.me/stuff/b-test/
但是，如果您使用箭头键四处移动，您可以看到交叉点时不时地闪烁，有时甚至会粗鲁地保持可见(尤其是从侧面进入气泡时)
However, if you move around with the arrow keys, you can see the intersection flash every now and then, and sometimes flat out rudely stay visible (especially with bubbles coming in from the side)
我已经尝试在两种材料上设置 depwthWrite: false 但这没有任何效果.
I have tried setting depwthWrite: false on both materials but that doesn't have any effect.
我对 renderer.sortObjects = false 有点搞砸了，但我认为这正在删除我希望在场景的其余部分发生的自然"绘制顺序.正是这些领域我有问题.
I have messed a bit with renderer.sortObjects = false but I think this is removing the "natural" draw order that I want to occur with the rest of the scene. It is just these spheres I am at issue with.
- 我可以在 webgl/three.js 中强制透明对象的绘制顺序吗?即使将较小的球体移近 10 个单位，它们似乎也在进行 z-fighting
- 或者有什么方法可以强制重叠透明对象的行为?
推荐答案
经过多次敲击(不是很好的那种)后，我发现您可以使用网格上的标志强制绘制顺序.
After much head banging (not the good kind) I have discovered that you can force draw order with a flag on the mesh.
对于三个 r70 及以上使用 renderOrder
mesh.renderOrder = 0.5; // Value from 0 to 1
对于三个 r69 及以下使用 renderDepth
mesh.renderDepth = 0.5; // Value from 0 to 1
先绘制最低，最后绘制最高.
It draws lowest first, highest last.
这篇关于三.js - 绘制两个重叠的透明球体并隐藏交叉点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
