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 = '#fff';
    div.style.backgroundColor = 'rgba(25,25,25,0.5)';
    div.style.borderRadius = '5px'
    // div.style.position = 'absolute';//不需要设置绝对定位

    //HTML元素标签作为参数创建一个CSS2模型对象CSS2DObject
    //如果是已有元素，使用.getElementById()获得HTML元素创建的UI界面
    //你可以把CSS2DObject模型对象类比为网格模型Mesh，一样具有position属性
    //CSS2DObject模型对象不具有角度和缩放.scale属性
    const label = new CSS2DObject(div);
    //设置模型对象CSS2DObject在场景位置
    //标签标注boxMesh模型所以复制boxMesh的位置
    label.position.copy(boxMesh.position);
    //适当偏移标签
    label.position.y += 30
    scene.add(label);//CSS2模型标签插入到场景中

CSS2渲染器CSS2DRenderer

CSS2渲染器CSS2DRenderer和常用的WebGL渲染器WebGLRenderer一样都是渲染器，只是渲染技术不同，WebGL渲染器WebGLRenderer解析渲染threejs模型对象的时候会调用底层的WebGL API，CSS2渲染器CSS2DRenderer功能是渲染与threejs场景中网格模型绑定的HTML元素。

CSS2渲染器.domElement、.setSize()、.render()等方法和属性功能和WebGL渲染器相同。webgl渲染器的部分属性和方法CSS3渲染是不具备的，比如设置背景颜色的方法.setClearColor()。

// 创建一个CSS2渲染器CSS2DRenderer
const labelRenderer = new CSS2DRenderer();
labelRenderer.setSize(window.innerWidth, window.innerHeight);
labelRenderer.domElement.style.position = 'absolute';
// 避免renderer.domElement影响HTMl标签定位，设置top为0px
labelRenderer.domElement.style.top = '0px';
labelRenderer.domElement.style.left = '0px';
//设置.pointerEvents=none，以免模型标签HTML元素遮挡鼠标选择场景模型
labelRenderer.domElement.style.pointerEvents = 'none';
document.body.appendChild(labelRenderer.domElement);
...
//渲染场景中的HTMl元素包装成的CSS2模型对象
labelRenderer.render(scene, camera);

 效果图：