如何在框架中使用 CSS3DRenderer？

Question

我试图在框架中重现这个例子：

https://threejs.org/examples/?q=you#css3d_youtube

根据代码使用 CSS3DRenderer 但我找不到如何将它与框架一起使用。这是我的尝试

AFRAME.registerComponent('embed-html', {
     schema: {
        targetUrl: {type: 'string', default: 'https://www.google.com/'}
     },
     init: function () {

        renderer = new THREE.CSS3DRenderer();
        renderer.setSize( window.innerWidth, window.innerHeight );
        this.el.sceneEl.appendChild( renderer.domElement );

     },

  });

但在那之后我的场景就卡住了。

Answer 1

框架中的样式有更好的选择，但这里是 CSS 模拟解决方案。 但是我个人并没有使用它并编写了我自己的自定义对象

Answer 2

CSS3DRenderer 实际上并不将 HTML 渲染为场景中的网格和纹理。这会导致一些问题，例如它不受灯光影响，游戏角色无法与之互动，并且在 VR 中不起作用。

对于任何正在寻找工具来添加更复杂的 UI 以在其 threeJS 场景中进行交互的人，您可以使用 ion Engine。可以在 3D 场景中以高质量呈现 HTML，它也适用于 webXR 应用程序（webVR）。

Github：https://github.com/samrun0/ion-3D-Engine