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()
相关推荐
转转技术团队15 分钟前
从“v我50”到“疯狂星期四”:HTTPS如何用47天寿命的证书挡住中间人
前端
zeqinjie21 分钟前
Flutter 使用 AI Cursor 快速完成一个图表封装【提效】
前端·flutter
真上帝的左手27 分钟前
24. 前端-js框架-Vue
前端·javascript·vue.js
3Katrina37 分钟前
《Stitch的使用指南以及AI新开发模式杂谈》
前端
无羡仙39 分钟前
按下回车后,网页是怎么“跳”出来的?
前端·node.js
喝拿铁写前端40 分钟前
Vue 实战:构建灵活可维护的菜单系统
前端·vue.js·设计模式
ZzMemory42 分钟前
一套通关CSS选择器,玩转元素定位
前端·css·面试
圆心角1 小时前
小米面挂了
前端·面试
我的小月月1 小时前
Vue移动端"回到顶部"组件深度解析:拖拽、动画与性能优化实践
前端
拳打南山敬老院1 小时前
从零构建一个插件系统(六)低代码场景的插件构建思考
javascript·架构