当前位置：首页 > news >正文

threejs 添加css3d标签 vue3

news 来源：原创 2025/5/9 7:10:41

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

一、引入

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

二、

//一、申明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模型对象CSS3DObjectvar 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模型标签
};//四、加载模型以后获取每个标签的位置把标签添加进senceloader.load("./收费站.glb", (gltf) => {isShowLoding.value = falsescene.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()