three.js标签标注、场景信息标注——系统总结，总有一款适合你

three.js标签标注、场景信息标注——系统总结，总有一款适合你

视频总结：https://www.bilibili.com/video/BV1gC4y1v7EP

下面是具体的文字总结

标注技术分类

标注效果分类

CSS2DRenderer渲染HTML元素

HTML元素作为标签使用，标签尺寸不随场景缩放变化

CSS3DRenderer渲染HTML元素

HTML元素作为标签使用，标签尺寸随场景缩放变化

精灵模型Sprite标注

精灵模型可以图片或canvas画布作为纹理，然后标注，可以实现类似CSS3DRenderer渲染HTML元素的效果。

默认区别在于Sprite本质上是threejs模型对象，会被其他模型物体遮挡，但是CSS3标签，本质上是HTML元素，只是叠加到canvas画布上，不是threejs物体的一部分，如果CSS3标签你想隐藏遮挡，需要手动添加代码，通过射线的方式，判断标签是否被其他模型遮挡，然后设置标签的style属性隐藏即可。

图片创建纹理对象，作为精灵Sprite材质的map属性值

canvas画布创建纹理对象，作为精灵Sprite材质的map属性值

2D标注：矩形平面网格模型

地面导航箭头(矩形平面+背景透明的颜色贴图)

地面指南针方向(矩形平面+背景透明的颜色贴图)

地图可视化，地面的波动光圈

3D标注：立体网格模型

智慧城市、地图场景中的热点标注(四棱锥)

火焰特效（序列帧动画或shader）

CSS2DRenderer(HTML元素作为标签)

下面给大家介绍一个threejs的扩展库CSS2DRenderer.js，通过CSS2DRenderer.js可以把HTML元素作为标签标注三维场景。

引入扩展库CSS2DRenderer.js

在threejs文件包目录examples/jsm/renderers/，你可以找到CSS2DRenderer.js扩展库。

threejs扩展库CSS2DRenderer.js提供了两个类CSS2渲染器CSS2DRenderer、CSS2模型对象CSS2DObject。

// 引入CSS2渲染器CSS2DRenderer和CSS2模型对象CSS2DObject
import {
    CSS2DRenderer,CSS2DObject } from 'three/addons/renderers/CSS2DRenderer.js';

// 引入CSS2渲染器CSS2DRenderer
import {
    CSS2DRenderer } from 'three/addons/renderers/CSS2DRenderer.js';
// 引入CSS2模型对象CSS2DObject
import {
    CSS2DObject } from 'three/addons/renderers/CSS2DRenderer.js';

总体思路

本节课先为大家演示标签标注最基本的内容，更多需要完善优化的的细节，可以关注后面几节课讲解。

• 1.HTML元素创建标签
• 2.CSS2模型对象CSS2DObject
• 3.CSS2渲染器CSS2DRenderer
• 4.CSS2Renderer.domElement重新定位

1. HTML元素创建标签

你可以根据需要，使用HTML、CSS代码创建你想要的标签。如果基于vue或react开发，也可以用vue或react创建的UI组件表示标签。

<div id="tag">标签内容</div>

如果你想用HTML元素作为标签标注三维场景中模型信息，就需要考虑定位的问题。比如一个模型，在代码中你可以知道它的局部坐标或世界坐标xyz，但是你并不知道渲染后在canvas画布上位置，距离web页面顶部top和左侧的像素px值。

自己写代码把世界坐标xyz，转化为像素px表示屏幕坐标，比较麻烦，不过threejs扩展库CSS2DRenderer.js可以帮助你实现坐标转化，给HTML元素标签定位，下面给大家演示如何实现。

2. CSS2模型对象CSS2DObject

// 引入CSS2模型对象CSS2DObject
import {
    CSS2DObject } from 'three/addons/renderers/CSS2DRenderer.js';

通过CSS2DObject类，可以把一个HTML元素转化为一个类似threejs网格模型的对象，换句话说就是你可以把CSS2DObject当成threejs的一个模型一样去设置位置.position或添加到场景中。

const div = document.getElementById('tag');
// HTML元素转化为threejs的CSS2模型对象
const tag = new CSS2DObject(div);

你想把HTML标签标注在那个位置，你通过.position属性设置标签模型对象的xyz坐标。

tag.position.set(50,0,50);

把HTML元素对应的CSS2模型对象添加到其它模型对象或三维场景中。

scene.add(tag);

const group = new THREE.Group();
group.add(tag);

3. CSS2渲染器CSS2DRenderer

// 引入CSS2渲染器CSS2DRenderer
import {
    CSS2DRenderer } from 'three/addons/renderers/CSS2DRenderer.js';

// 创建一个CSS2渲染器CSS2DRenderer
const css2Renderer = new CSS2DRenderer();

CSS2渲染器CSS2DRenderer和WebGL渲染器WebGLRenderer虽然不同，但是有些属性和方法是相似的，可以类比记忆学习。比如.domElement、.setSize()、.render()。可以先参考webgl渲染器写代码，然后再给大家解释其中的含义。

3.1 CSS2Renderer.render()渲染HTML标签

CSS2渲染器CSS2DRenderer和常用的WebGL渲染器WebGLRenderer一样都是渲染器，只是渲染模型对象不同，WebGLRenderer主要是渲染threejs自身的网格、点、线等模型，CSS2DRenderer用来渲染HTML元素标签对应的CSS2模型对象CSS2DObject。

// 用法和webgl渲染器渲染方法类似
css2Renderer.render(scene, camera);
// renderer.render(scene, camera);

3.2 CSS2Renderer.setSize()