伪造查看器坐标单元并将其映射到 ThreeJS 场景

Question

我正在尝试使用 ThreeJS CSS3dRenderer (https://threejs.org/docs/#examples/en/renderers/CSS3DRenderer) 在 Forge 模式下以 3D 显示 HTML 内容。

功能示例：http://learningthreejs.com/data/2013-04-30-closing-the-gap-between-html-and-webgl/index.html

在纯粹的普通 ThreeJS 上下文中，所需的步骤是：

1. 为 DOM 内容创建 ThreeJS 场景 #1。
2. 为 3D 内容创建另一个场景 #2。
3. 将带有 HTML 内容的 CSS3DObjects 添加到场景 #1 中
4. 在启用混合的情况下将 匹配 3D 元素添加到场景 #2。这使得 HTML 内容能够遮挡场景 #2 中的对象。
5. 将其他 3D 对象添加到场景 #2。
6. 使用 CSS3DRenderer 渲染 #1，使用普通 WebGLRenderer 渲染 #2。

在 Forge 查看器上下文中，场景 #2 被替换为覆盖场景。

我应用了这里介绍的技巧https://forge.autodesk.com/blog/transparent-background-viewer-long-last 使 CSS 场景通过查看器场景可见并且工作正常，除了当启用渲染器 alpha 时，覆盖场景中的元素仅在遮挡时渲染的奇怪效果Forge 模型。

我遇到的问题是第 4 点。在两个普通 ThreeJS 场景的情况下，场景 #1 中 CSS3DObject 的位置、旋转和缩放可以复制到场景 #2 中的对象，并且它们完美匹配。在 ThreeJS 场景和查看者的覆盖场景之间并非如此，因为单位不匹配。 （或者这就是我的推理方式。）

有什么方法可以在这些单位之间转换吗？

Answer 1

根据我们的工程 - Cleve 将演示放在一起：

您使用的相机 NOP_VIEWER.impl.camera 不是三相机。它是 LMV 定义的 UnifiedCamera，既可以容纳透视相机，也可以容纳正交相机。您需要从 UnifiedCamera 获取正确的相机并将其用于渲染。刚刚意识到 CSS3DRenderer 取自 THREE.js 的更新版本，并且它假设了 LMV 使用的 THREE.js r71 不正确的东西。我注意到它使用 camera.isPerspectiveCamera 来决定相机何时是透视的，这在使用 THREE.PerspectiveCamera 实例的 r71 中没有定义。

 camera = new THREE.PerspectiveCamera(
        45, window.innerWidth / window.innerHeight, 0.1, 4000
    );

CSS3DRenderer 渲染成与 LMV 3D 场景合成的平面。我发现了一个示例，它通过在 WebGL 场景中将 CSS3D 对象位于 WebGL 场景前面的透明孔洞来伪造将 CSS3D 场景与 WebGL 场景相结合。这是示例：https://codepen.io/Fyrestar/pen/QOXJaJ