Javascript three.js，如何让CSS3DObject出现？（我做错了什么）

我在我的HTML文档中设置了一个CSS3DRenderer，一个场景，一个摄像头，我有一个元素，我正试图将其转换为CSS3DObject，我让我的CSS3DRenderer在游戏循环中使用.render。我创建了一个CSS3D对象，将HTML元素作为参数，将其添加到我的场景中，但什么都没有发生。我必须补充一点，我有一个WebGL渲染器，使用相同的相机和不同的场景，渲染器工作得很好。 以下是我的进口声明：

import * as THREE from 'https://threejs.org/build/three.module.js';
import { GLTFLoader } from 'https://threejs.org/examples/jsm/loaders/GLTFLoader.js';
import { CSS3DRenderer } from 'https://threejs.org/examples/jsm/renderers/CSS3DRenderer.js';
import { CSS3DObject } from 'https://threejs.org/examples/jsm/renderers/CSS3DRenderer.js';

以下是我初始化渲染器的方式：

const renderer = new THREE.WebGLRenderer({canvas: document.querySelector('#bg')});
const cssRenderer = new CSS3DRenderer();

这是我试图将CSS渲染器放在WEBGL渲染器之前：

renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth,window.innerHeight);
cssRenderer.setSize(window.innerWidth,window.innerHeight);
cssRenderer.domElement.style.position = 'fixed';
cssRenderer.domElement.style.top = 0;
renderer.domElement.style.zIndex = 0;
cssRenderer.domElement.style.zIndex = 1;
renderer.domElement.style.position = 'fixed';
renderer.domElement.style.top = 0;

最后，这是我初始化CSS3DObject的方式（planeMesh只是我试图将CSS3DObject放在上面的一个网格）：

我已经确认我的程序正在正确地读取HTML元素，但除此之外的所有问题都让我感到困惑，任何帮助都将不胜感激。

---

（对于可能出现的任何错误做法，我深表歉意，我对javascript非常陌生）

请修改以下实时示例以演示此问题：。谢谢，使用您的示例，我成功地使其正常工作。我通过使用一个单独的脚本来创建css3D对象来修复它。我认为这个问题与另一个渲染器的脚本使用画布有关。

var embed = document.querySelector(".embed");
var embed3D = new CSS3DObject(embed);
embed3D.position.set(planeMesh.position);
embed3D.rotation.set(planeMesh.rotation);
cssScene.add(embed3D);