使用three.js遮挡现实世界的对象

Question

我在一个实验性的增强现实网络浏览器中使用了三个.js。 （浏览器称为Argon。基本上，Argon使用Qualcomm的Vuforia AR SDK来跟踪手机摄像头中的图像和对象.Argon将跟踪信息发送到Javascript，在那里它使用带有three.js的透明网页来创建3D图形。手机视频输入。）我的问题是关于three.js。

Argon发送到网页的数据允许我将3D相机与物理手机相机对齐并绘制3D图形，使其看起来与预期的现实世界一致。我还想让物理世界中的一些东西遮挡3D图形（我有物理对象的3D模型，因为我已经设置了场景，或者因为它们是准备好的对象，如Vuforia正在跟踪的盒子）。

我想知道人们是否有关于使用three.js完成此遮挡的最佳方法的建议。谢谢。

Answer 1

编辑：似乎下一个版本的three.js（R71）将有一个更简单的方法，所以如果你可以使用dev分支（或只是等待），你可以更容易地做到这一点。请参阅此帖子：three.js transparent object occlusion

---

我的原始答案（未使用R71中的新功能）：

我认为最好的方法是（通过创建新的渲染过程来避免额外的工作）来修改WebGL渲染器（src / renderers / WebGLRenderer.js）并添加对新类型对象的支持，也许称它们为“occlusionObjects”。

如果查看渲染器，您将看到两个当前对象列表，opaqueObjects和transparentObjects。渲染器将​​可渲染对象排序到这两个列表中，以便它可以先渲染不透明对象，然后再渲染透明对象。您需要做的是将所有新对象存储到occlusionObjects列表中而不是那两个。您将看到不透明和透明对象根据其材质属性进行排序。我想在这里，您可能想要将一个属性添加到您想要成为封堵器的对象（可能是“myObject.occluder = true”），然后将这些对象拉出来。

获得三个列表后，查看render（）函数对这些对象列表的作用。你会看到几个像这样的渲染调用的地方：

renderObjects( opaqueObjects, camera, lights, fog, true, material );

在该行之前添加类似的内容，关闭写入颜色缓冲区，仅将遮挡对象渲染到深度缓冲区中，然后在渲染剩余对象之前重新打开颜色缓冲区写入。

context.colorMask( false, false, false, false);
renderObjects( occluderObjects, camera, lights, fog, true, material );
context.colorMask(true, true, true, true);

你需要在几个地方这样做，但它应该有效。

现在您可以将场景中的任何对象标记为“occluder = true”，它们只会渲染到深度缓冲区中，允许视频显示并遮挡在其后面渲染的任何不透明或透明对象。