import { CSS3DObject } from "three/examples/jsm/renderers/CSS3DRenderer";gltfLoader.load("./model/exhibit2.glb", (gltf) =>{let array = ["雕像", "中药房", "浸制区", "道地沙盘","动物标本区","灵芝","茶话室","药材制作"];console.log(gltf)this.exhibitionHall = gltf.scene;// 判断子元素是否是物体this.exhibitionHall.traverse((child) => {if(child.isMesh){child.material.emissiveIntensity = 15;}if (array.indexOf(child.name) !== -1){console.log(child)const css3DObject = this.createTag(child);css3DObject.visible =truethis.floor2Tags.push(css3DObject);this.exhibitionHall.add(css3DObject);}})let fakeChild = {name: "标注",position: {x:100,y:100,z:20}}const css3DObject = this.createTag(fakeChild);css3DObject.visible =truethis.floor2Tags.push(css3DObject);this.exhibitionHall.add(css3DObject);this.exhibitionHall.position.set(0,0,0)this.exhibitionHall.scale.set(15,15,15)console.log(gltf)scene.add(this.exhibitionHall)})createTag(object3d) {// 创建各个区域的元素const element = document.createElement("div");element.className = "elementTag";element.innerHTML = `<div class="elementContent"><h3>${object3d.name}</h3><p>温度：26℃</p><p>湿度：50%</p></div>`;const objectCSS3D = new CSS3DObject(element);objectCSS3D.position.copy(object3d.position);objectCSS3D.scale.set(0.2, 0.2, 0.2);return objectCSS3D;// scene.add(objectCSS3D);}

css 样式内不要加 scoped 会找不到样式

// app.vue
<style lang="less">.cssrender {display: flex;position: fixed;top: 0;left: 0;z-index: 100;pointer-events: none;
}.elementTag {position: relative;left: -30px;top: 20px;
}
.elementTag::before {content: "";display: block;position: absolute;width: 100px;height: 1px;background: rgb(127 177 255 / 75%);bottom: 0;right: -100px;transform-origin: 0 0;transform: rotate(30deg);
}
.elementTag::after {content: "";display: block;position: absolute;width: 20px;height: 20px;background: rgb(127 177 255 / 75%);bottom: -65px;right: -105px;border-radius: 50%;
}.elementContent {background-color: rgb(20 143 221 / 68%);box-shadow: 0px 0px 12px rgb(0 128 255 / 75%);border: 1px solid rgb(127 177 255 / 75%);padding: 20px;color: #efefef;
}.elementContent h3 {font-size: 20px;font-weight: bold;margin: 15px 0;color: #efefef;
}
</style>

//index.html 
// 加入css样式渲染区
<div class="cssrender"></div>

// renderer.js
import { CSS3DRenderer } from "three/examples/jsm/renderers/CSS3DRenderer.js";// 创建css3drender
// 所有涉及到渲染的 都需要css3drender 去渲染
const css3drender = new CSS3DRenderer();
css3drender.setSize(window.innerWidth, window.innerHeight);
document.querySelector(".cssrender").appendChild(css3drender.domElement);
export default { css3drender };import rendererModule from "@/three/renderer.js";
// 使用渲染器渲染相机看到这个场景的内容渲染出来
rendererModule.renderer.render(scene, cameraModule.activeCamera);
rendererModule.css3drender.render(scene, cameraModule.activeCamera);