threejs 添加css3d标签 vue3

如图所示，给收费站标注标签。步骤如下：

一、引入

javascript 复制代码

import {
    CSS3DRenderer,
    CSS3DObject,
} from "three/examples/jsm/renderers/CSS3DRenderer";

二、

javascript 复制代码

//一、申明css3渲染器
const label3DRenderer = ref()

//二、创建css3d渲染器--将渲染器加入body
const css3dRenderer = () => {
    label3DRenderer.value = new CSS3DRenderer();
    label3DRenderer.value.setSize(window.innerWidth, window.innerHeight);
    label3DRenderer.value.domElement.style.position = "absolute";
    // 相对标签原位置位置偏移大小
    label3DRenderer.value.domElement.style.top = "0px";
    label3DRenderer.value.domElement.style.left = "0px";
    //设置.pointerEvents=none，以免模型标签HTML元素遮挡鼠标选择场景模型
    label3DRenderer.value.domElement.style.pointerEvents = "none";
    document.body.appendChild(label3DRenderer.value.domElement);
};
//三、创建一个函数返回一个div标签
const tag = (name) => {
    // 创建div元素(作为标签)
    var div = document.createElement("div");
    div.innerHTML = name;
    div.classList.add("tag");
    //div元素包装为CSS3模型对象CSS3DObject
    var label = new CSS3DObject(div);
    div.style.pointerEvents = "none"; //避免HTML标签遮挡三维场景的鼠标事件
    // 设置HTML元素标签在three.js世界坐标中位置
    // label.position.set(x, y, z);
    //缩放CSS3DObject模型对象
    label.scale.set(0.02, 0.02, 0.02); //根据相机渲染范围控制HTML 3D标签尺寸
    // label.rotateY(Math.PI / 2); //控制HTML标签CSS3对象姿态角度
    // label.rotateX(-Math.PI/2);
    return label; //返回CSS3模型标签
};

//四、加载模型以后获取每个标签的位置把标签添加进sence
 loader.load("./收费站.glb", (gltf) => {
        isShowLoding.value = false
        scene.add(gltf.scene)
        let group = gltf.scene.getObjectByName("车道中间标注2");
        group.children.map(item => {
            const label = tag(item.name)
            var pos = new THREE.Vector3();
            item.getWorldPosition(pos); //获取obj世界坐标、
            label.position.copy(pos);
            scene.add(label)
        })

    }, (xhr) => {
       
    });

五、别忘记调用之前封装的函数（创建css3渲染器）
 css3dRenderer()