我在一个实验性的增强现实网络浏览器中使用了three.js。（浏览器被称为 Argon。本质上，Argon 使用 Qualcomm 的 Vuforia AR SDK 来跟踪手机摄像头中的图像和对象。Argon 将跟踪信息发送到 Javascript，它使用带有three.js 的透明网页在其上创建 3D 图形电话视频源。）但是，我的问题是关于three.js。
Argon 发送到网页的数据使我能够将 3D 摄像头与物理手机摄像头对齐并绘制 3D 图形，使它们看起来与预期的现实世界对齐。我还想让物理世界中的一些东西遮挡 3D 图形（我有物理对象的 3D 模型，因为我已经设置了场景或者因为它们是准备好的对象，例如 Vuforia 正在跟踪的盒子）。
我想知道人们是否对使用three.js 完成这种遮挡的最佳方法有建议。谢谢。
编辑：似乎下一个版本的three.js（R71）将有一个更简单的方法来做到这一点，所以如果你可以使用dev分支（或者只是等待），你可以更容易地做到这一点。看这个帖子：three.js 透明物体遮挡
我的原始答案（不使用 R71 中的新功能）：
我认为最好的方法是（例如，通过创建新的渲染通道来避免额外的工作）修改 WebGL 渲染器（src/renderers/WebGLRenderer.js）并添加对一种新对象的支持，也许称它们为“遮挡物”。
如果您查看渲染器，您将看到两个当前对象列表，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”，它们只会渲染到深度缓冲区中，从而允许视频显示并遮挡在它们后面渲染的任何不透明或透明对象。