CSS2DRenderer—HTML元素作为模型标签

郭隆邦老师threejs教程学习笔记

threejs扩展库CSS2渲染器CSS2DRenderer.js，通过CSS2渲染器CSS2DRenderer不需要自己再进行坐标计算变换，该模块已经封装，简而言之就是通过CSS2渲染器CSS2DRenderer.js库很容易实现把HTML元素作为模型的标签。

扩展库CSS2DRenderer.js

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

<!-- 引入threejs扩展库CSS2DRenderer.js -->
import { CSS2DRenderer, CSS2DObject } from "three/examples/jsm/renderers/CSS2DRenderer.js";

CSS2模型对象CSS2DObject

CSS2模型对象CSS2DObject作用是把HTML元素设计的UI包装为一个类似threejs网格模型Mesh的模型对象，可以设置.position属性，可以通过.add()方法插入到场景中

    const div = document.createElement('div');
    div.innerHTML = '立方体';
    div.style.padding = '10px';
    div.style.color = '#f