three.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.

1. 我可以强制webgl / three.js中透明对象的绘制顺序吗？即使将较小的球体移近10个单位，它们似乎也在进行z战斗


2. 或者有没有办法强制重叠透明物体的行为？

推荐答案

经过多次敲击（不是好的）我发现你可以在网格上用旗帜强制绘制顺序。

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.

这篇关于three.js - 绘制两个重叠的透明球体并隐藏交叉点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！