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()
相关推荐
m0_738120722 小时前
CTFshow系列——命令执行web53-56
前端·安全·web安全·网络安全·ctfshow
Liu.7744 小时前
uniappx鸿蒙适配
前端
山有木兮木有枝_5 小时前
从代码到创作:探索AI图片生成的神奇世界
前端·coze
ZXT5 小时前
js基础重点复习
javascript
言兴5 小时前
秋招面试---性能优化(良子大胃袋)
前端·javascript·面试
WebInfra6 小时前
Rspack 1.5 发布:十大新特性速览
前端·javascript·github
雾恋7 小时前
我用 trae 写了一个菜谱小程序(灶搭子)
前端·javascript·uni-app
烛阴7 小时前
TypeScript 中的 `&` 运算符:从入门、踩坑到最佳实践
前端·javascript·typescript
Java 码农8 小时前
nodejs koa留言板案例开发
前端·javascript·npm·node.js
ZhuAiQuan9 小时前
[electron]开发环境驱动识别失败
前端·javascript·electron