THREE.JS CSS2DRenderer/CSS3DRenderer 模型增加标签

一、原理：

    three.js 中有关于 CSS3DRenderer 的描写，如下图：

     

     只是看这部分内容可能还是云里雾里，其实就是说：three有自己的方法，把页面上的DOM元素转化为一种可以被加载到场景里面的元素。

二、知识了解：

1、THREE.JS中的CSS2D/CSS3D渲染器

    在安装的three包中找到 renderers 文件夹，里面包含了THREE.JS提供的渲染器。可以看到有两个js文件，分别是 CSS2DRenderer 和 CSS3DRenderer。这个js文件会返回两个变量：CSS2DObject, CSS2DRenderer （CSS3DObject, CSS3DSprite, CSS3DRenderer），分别是CSS2D 对象和渲染器（CSS3D会多一个）

2、页面引用CSS2D/CSS3D

     根据上面找到的文件夹路径，把JS文件中的返回对象引用。

3、初始化时使用

     在三维场景初始化的代码中，我们已经确定了三维场景会展示的DOM、灯光、坐标轴等信息。于此同时我们也应该确定我们的标签DOM应该怎么渲染，怎么展示。

     ①  确定标签渲染DOM 

     ②  使用THREE中引用的方法，将该DOM转化为一个CSS2D对象

     ③   将该CSS2D对象添加进场景中 

   

     在这个步骤中，我们从页面上来看，其实是有两个DOM，一个是存放三维模型、另一个存放CSS2D对象。而且，THREE.JS提供的方式其实是在标签DOM上另外套了一个DOM，通过对这个外面DOM进行操作从而影响我们的标签。

   

      基于此，我们要怎样把CSS2D对象（标签外面的那层DOM）和三维模型的canvas进行重合？这就用到我们CSS方面的知识了。这个方案其实有很多，我这边只用到了一种。这里的尺寸要和三维模型渲染器的尺寸保持一致哈，不然位置不好对应。

4、CSS2D 和 CSS3D

    从页面效果来看，我认为两者最大的区别就是：CSS2Drender不会随着模型的缩放而改变，而CSS3Drender相反。

    两者在引用和使用上并没有区别，只是换一个渲染器的事儿。

5、缩放旋转

     在场景初始化完成后，我们肯定是要对三维场景进行旋转或者缩放等功能。这样就需要有个方法，对控制器进行改变，从而实现我们视角的改变。

    在这里如果只有模型，我们只需要改变模型渲染器（renderer）。但是如果还有CSS2D或CSS3D对象的话，就还需要对css2Renderer或css3Renderer进行改变。否则，标签对象只是添加上去了，不能旋转缩放。

三、代码实现：

1、CSS2D

    这里有个标签的点击事件，这里对THREE.JS的版本就有要求：1.130.0，其他版本不满足哈。

2、CSS3D：

    把所有的 2 换成 3 即可，上面的引用不要动。

   可能会有标签太大的情况，进行缩小即可。（代码中有）

四、最终效果：

1、CSS2D：

2、CSS3D：