threejs CSS3DSprite精灵模型标注模型学习笔记

CSS3DSprite精灵模型面向摄像机，场景缩放时，缩小放大跟随着，会被模型遮挡，可以被射线拾取。
CSS3DRenderer用于通过CSS3的transform属性，将层级的3D变换应用到DOM元素上。如果你希望不借助基于canvas的渲染来在你的网站上应用3D变换，那么这一渲染器十分有趣。同时，它也可以将DOM元素与WebGL的内容相结合。在添加标注前需要先给模型命名

效果动画

threejs版本

0.123.0

创建3d标签

通过label.scale.set(0.2, 0.2, 0.2);控制标签的大小

import {CSS3DRenderer, CSS3DSprite} from 'three/examples/jsm/renderers/CSS3DRenderer.js';

// 创建一个HTML标签
function tag(name) {
    // 创建div元素(作为标签)
    var div = document.createElement('div');
    div.innerHTML = name;
    div.classList.add('tag');
    //div元素包装为CSS2模型对象CSS2DObject
    var label = new CSS3DSprite(div);
    div.style.pointerEvents = 'none';//避免HTML标签遮挡三维场景的鼠标事件
    label.scale.set(0.2, 0.2, 0.2);//根据相机渲染范围控制HTML 3D标签尺寸
    label.rotateY(Math.PI / 2);//控制HTML标签CSS3对象姿态角度
    // 设置HTML元素标签在three.js世界坐标中位置
    // label.position.set(x, y, z);
    return label;//返回模型标签
}

// 创建一个CSS2渲染器CSS2DRenderer
var labelRenderer = new CSS3DRenderer();
labelRenderer.setSize(window.innerWidth, window.innerHeight);
labelRenderer.domElement.style.position = 'absolute';
// 相对标签原位置位置偏移大小
labelRenderer.domElement.style.top = '0px';
labelRenderer.domElement.style.left = '0px';
// //设置.pointerEvents=none，以免模型标签HTML元素遮挡鼠标选择场景模型
labelRenderer.domElement.style.pointerEvents = 'none';
document.body.appendChild(labelRenderer.domElement);

export {tag, labelRenderer}

查找模型

在模型中查找遍历模型使用getWorldPosition获取世界坐标将坐标赋予标签显示

var group = gltf.scene.getObjectByName('粮仓');
// console.log('粮仓', group);
group.traverse(function (obj) {
    if (obj.type === 'Mesh') {
        var label = tag(obj.name);//把粮仓名称obj.name作为标签
        var pos = new THREE.Vector3();
        obj.getWorldPosition(pos);//获取obj世界坐标、
        // 粮仓世界坐标对应粮仓底部圆心位置，如果标签像标注在粮仓底部，需要加上粮仓整体高度
        label.position.copy(pos);//标签标注在obj世界坐标
        model.add(label);//标签插入model组对象中
    }
})

渲染标签

import { labelRenderer } from './scene/tag.js';//HTML标签相关代码
// 渲染循环
function render() {
  labelRenderer.render(scene, camera); //渲染HTML标签对象
  renderer.render(scene, camera); //执行渲染操作
  requestAnimationFrame(render); //请求再次执行渲染函数render，渲染下一帧
  // console.log(camera.position);//通过相机控件OrbitControls旋转相机，选择一个合适场景渲染角度
}
render();

视频教程地址

CSS3DSprite的相关视频教程

《WebGL/Three.js前端高薪3D可视化》

物联网Web3D可视化WebGL

实例代码

项目环境基于vue3 vite js node.js 14