前面我们实现了通过使用CSS2DRenderer给模型添加HTML标签的效果，渲染出来后我们发现当我们缩放鼠标时，渲染的HTML标签并不会跟着场景缩放，这是因为CSS2DRenderer渲染的标签默认保持自身像素值。官方文档中也提到了，CSS2DRenderer是CSS3DRenderer（CSS 3D渲染器）的简化版本，它唯一支持的变换就是位移。所以，它不支持缩放等功能。这一节我们来了解下使用CSS3DRenderer渲染HTML标签的方法
CSS3DRenderer
CSS3DRenderer的属性和方法跟CSS2DRenderer类似，它们的使用方法也基本相同，只是在HTML标签渲染出来的效果不同，CSS3DRenderer渲染的标签会跟着场景相机同步缩放，而CSS2DRenderer渲染的标签默认保持自身像素值，不支持缩放，我们在场景中看到缩放场景时CSS2DRenderer跟着变大其实不是HTML标签本身变大，而是相机近大远小的效果，HTML标签本身的大小并没有变化。
引入CSS3DRenderer
CSS3DRenderer扩展库的路径跟CSS2DRenderer相同，都在examples/jsm/renderers/目录下
import {
CSS3DRenderer } from 'three/examples/jsm/renderers/CSS3DRenderer'
创建CSS3DRenderer
创建CSS3DRenderer的方法和创建CSS2DRenderer方法相同，这里不赘述了，不了解的可以看我前面章节 Threejs进阶之五：使用CSS2DRenderer给模型添加HTML标签的介绍，这里创建一个初始化方法initCSS3DRenderer()，在该方法中创建CSS3DRenderer，并设置相关属性
initCSS