threejs 在3d地图中绘制css3d标签标注省份

上一节我们通过threejs 在3d地图中绘制css2d地名，这一节我们使用css3d来渲染地图地名标签。

大部分代码和threejs 在3d地图中绘制css2d地名一致，只是把css2d标签改为css3d标签了。

CSS3D不面向摄像机，场景缩放时，缩小放大跟随着，不被模型遮挡，通过DOM事件点击

效果截图

css3d标签渲染效果视频

演示实例

threejs 在3d地图中绘制css3d标签标注省份

css2d和css3d的区别

三维场景中的CSS2D和CSS3D渲染效果有以下不同之处：

渲染元素的方式不同
CSS2D渲染器使用的是2D的CSS定位来放置HTML元素，它将HTML元素投射到屏幕上的二维坐标系中。相对地，CSS3D渲染器使用的是3D的CSS变换来放置HTML元素，它将HTML元素投射到屏幕上的三维坐标系中。
渲染效果不同
CSS2D渲染器渲染的HTML元素是2D的，它们的位置和大小不会随着场景的旋转和缩放而改变。CSS3D渲染器渲染的HTML元素是3D的，它们的位置和大小会随着场景的旋转和缩放而改变。
支持的元素不同
CSS2D渲染器只能渲染带有固定宽度和高度的HTML元素，如div、span、img等。而CSS3D渲染器可以渲染所有的HTML元素，包括具有自适应大小的元素。

css2d标签代码

import {CSS2DRenderer, CSS2DObject} from 'three/examples/jsm/renderers/CSS2DRenderer.js';

// 创建一个HTML标签
function tag(name, x, y, z) {
    // 创建div元素(作为标签)
    var div = document.createElement('div');
    div.innerHTML = name;
    div.style.padding = '5px 10px';
    div.style.color = '#fff';
    div.style.fontSize = '16px';
    div.style.position = 'absolute';
    div.style.backgroundColor = 'rgba(25,25,25,0.5)';
    div.style.borderRadius = '5px';
    //div元素包装为CSS2模型对象CSS2DObject
    var label = new CSS2DObject(div);
    div.style.pointerEvents = 'none';//避免HTML标签遮挡三维场景的鼠标事件
    // 设置HTML元素标签在three.js世界坐标中位置
    label.position.set(x, y, z);
    return label;//返回CSS2模型标签
}

// 创建一个CSS2渲染器CSS2DRenderer
function labelRenderer(width, height) {
    var labelRenderer = new CSS2DRenderer();
    labelRenderer.setSize(width, height);
    labelRenderer.domElement.style.position = 'absolute';
// // 避免renderer.domElement影响HTMl标签定位，设置top为0px
    labelRenderer.domElement.style.top = '0px';
    labelRenderer.domElement.style.left = '0px';
// //设置.pointerEvents=none，以免模型标签HTML元素遮挡鼠标选择场景模型
    labelRenderer.domElement.style.pointerEvents = 'none';
    return labelRenderer
}

export {tag, labelRenderer}

css3d标签代码

css3d标签除了把CSS2DRenderer, CSS2DObject改为了CSS3DRenderer, CSS3DObject还增加了一个scale，将标签设置的小一点，避免标签太大渲染出来太丑。

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

// 创建一个HTML标签
function tag(name, x, y, z) {
    // 创建div元素(作为标签)
    var div = document.createElement('div');
    div.innerHTML = name;
    div.style.padding = '5px 10px';
    div.style.color = '#fff';
    div.style.fontSize = '16px';
    div.style.position = 'absolute';
    div.style.backgroundColor = 'rgba(25,25,25,0.5)';
    div.style.borderRadius = '5px';
    //div元素包装为CSS2模型对象CSS2DObject
    var label = new CSS3DObject(div);
    div.style.pointerEvents = 'none';//避免HTML标签遮挡三维场景的鼠标事件
    // 设置HTML元素标签在three.js世界坐标中位置
    label.position.set(x, y, z);
    var scale = 0.05
    label.scale.set(scale, scale, scale);
    return label;//返回CSS2模型标签
}

// 创建一个CSS2渲染器CSS2DRenderer
function labelRenderer(width, height) {
    var labelRenderer = new CSS3DRenderer();
    labelRenderer.setSize(width, height);
    labelRenderer.domElement.style.position = 'absolute';
// // 避免renderer.domElement影响HTMl标签定位，设置top为0px
    labelRenderer.domElement.style.top = '0px';
    labelRenderer.domElement.style.left = '0px';
// //设置.pointerEvents=none，以免模型标签HTML元素遮挡鼠标选择场景模型
    labelRenderer.domElement.style.pointerEvents = 'none';
    return labelRenderer
}

export {tag, labelRenderer}

实例代码下载

项目运行环境 vue3 vite js nodejs 14