Threejs进阶之五：使用CSS2DRenderer给模型添加HTML标签

这一节给场景中的模型添加标签，想实现的效果是，通过鼠标点击场景中摩托车的某个部位，则在场景中出现一个标签，并在标签上显示该部位的信息。最终的效果图如下：

要实现上面的效果，需要用到CSS 2D渲染器，先来了解下CSS 2D渲染器

CSS2DRenderer(CSS 2D渲染器)

CSS2DRenderer（CSS 2D渲染器）可以把HTML元素作为标签标注到三维场景中，CSS2DRenderer是CSS3DRenderer（CSS 3D渲染器）的简化版本，它唯一支持的变换是位移。通过CSS2DRenderer我们可以将三维物体和基于HTML的标签相结合，来更好的表达场景中物体的信息。

构造函数

CSS2DRenderer()

方法

.getSize () 返回一个包含有渲染器宽和高的对象。

.render ( scene : Scene, camera : Camera ) 使用camera渲染scene。

.setSize (width : Number, height : Number) 将渲染器的尺寸调整为(width, height).

使用CSS2DRenderer

CSS2DRenderer是threejs提供的扩展库，在threejs文件包目录examples/jsm/renderers/，文件夹下面可以找到CSS2DRenderer.js扩展库。

CSS2DRenderer.js提供了两个类CSS2DRenderer（CSS2D渲染器）和CSS2DObject（CSS2D模型对象）

要使用CSS2DRenderer，我们需要先将其引入

// 引入CSS2渲染器CSS2DRenderer和CSS2模型对象CSS2DObject
import {
    CSS2DRenderer,CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer'

创建HTML标签

在vue文件的模板中添加如下代码，都是基础的HTML语音，这里不再细说

<div id="label">
    <div style="position: relative; width: 139px; height: 167px;color: #ffffff;">
      <img src="../assets/images/info.png" alt="" style="width: 100%; position: absolute;left: 0px;top: 0px;"> 
      <div style="position: absolute; left: 48px;top: 4px;font-size: 12px;">
        <div style="font-size: 14px;font-weight: 400;">
          <span id="txtName">车身</span>
        </div>
        <div style="margin-top: 8px;margin-left: -25px;">
            <span style="color: #fff;font-weight: 300;">材质：</span>
            <span style="font-weight: 400;margin-left: 10px;" id="txtMaterial">金属</span>
        </div>
        <div style="margin-top: 8px;margin-left: -25px;">
            <span style="color: #fff;font-weight: 300;">颜色：</span>
            <span style="font-weight: 400;margin-left: 2px;" id="txtColor">红色</span>
        </div>
      </div>
    </div>
  </div>

添加上述代码后，我们创建的标签出现在了浏览器页面的左下方，这是典型的浏览器div的排列属性，但是这不是我们想要的，我们想要将这个div标签放到三维场景中去展示。这就涉及到了世界坐标xyz与屏幕坐标的转换，这是一个很麻烦的事情。好在threejs的扩展库CSS2DRenderer.js已经帮我们考虑到了这一点，给我们提供了CSS2DObject 对象

CSS2DObject 对象

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

const div = document.querySelector('#label')
const tag