threejs 3D标注

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 =true
                    this.floor2Tags.push(css3DObject);
                    this.exhibitionHall.add(css3DObject);
                }
            })
            let fakeChild = {
                name: "标注",
                position: {
                    x:100,
                    y:100,
                    z:20}
            }
            const css3DObject = this.createTag(fakeChild);
            css3DObject.visible =true
            this.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);
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

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

// 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);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15