伪造查看器协调单元并将其映射到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
2. 创建一个ThreeJS场景#1，另一个场景#2用于3D内容，
3. 将具有HTML内容的CSS3DObjects添加到场景#1
4. 中，为场景#2添加一个匹配的 3D元素，并启用混合功能。这使得HTML内容能够屏蔽场景#2中的对象。
5. 将其他3D对象添加到场景#2中。
6. 使用CSS3DRenderer呈现#1，使用普通的CSS3DRenderer添加#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不是三台相机。这是一个UnifiedCamera定义的LMV，以保持一个透视和正交相机。您需要从UnifiedCamera获得正确的相机，并将其用于渲染。刚刚意识到，CSS3DRenderer是从最新版本的THREE.js中提取的，它假设THREE.js r71使用的东西是不正确的。我注意到它使用camera.isPerspectiveCamera来决定相机何时是透视图，而不是在使用THREE.PerspectiveCamera实例的r71中定义的。

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

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