CSS3渲染器CSS3DRenderer.js和CSS3模型

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

通过CSS3渲染器和模型可以把HTML元素像Threejs的网格模型Mesh或精灵模型Sprite一样去渲染。

CSS3技术，对HTML元素进行旋转缩放平移：CSS 3D 转换

Threejs渲染精灵模型Sprite的时候和网格模型的区别：

旋转三维场景的时候，如果通过相机控件OrbitControls旋转测试，Sprite矩形平面始终平行于canvas画布或屏幕，而矩形平面Mesh的姿态角度会跟着旋转，不一定平行于canvas画布。

扩展库CSS3DRenderer.js

threejs扩展库CSS3DRenderer.js提供了三个构造函数CSS3渲染器CSS3DRenderer、CSS3模型对象CSS3DObject、CSS3精灵模型CSS3DSprite。

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

CSS3渲染器CSS3DRenderer

CSS3渲染器CSS3DRenderer和常用的WebGL渲染器WebGLRenderer一样都是渲染器，只是渲染技术不同，WebGL渲染器WebGLRenderer解析渲染threejs模型对象的时候会调用底层的WebGL API，CSS3渲染器CSS3DRenderer解析渲染模型对象的时候不会调用底层的WebGL API，而是通过CSS3技术渲染对应的模型对象，CSS3DRenderer对应的模型对象本质上是HTML元素。

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

// 创建CSS3渲染器
const CSS3Renderer = new CSS3DRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.getElementById('webgl').appendChild( renderer.domElement );
...
renderer.render( scene, camera );

CSS3对象模型CSS3DObject和CSS3精灵模型CSS3DSprite

CSS3渲染器CSS3DRenderer不能渲染Threejs的网格模型Mesh、精灵模型Sprite、线模型Line等。CSS3渲染器CSS3DRenderer能够渲染的模型对象是CSS3对象模型CSS3DObject、CSS3精灵模型CSS3DSprite。

CSS3对象模型CSS3DObject的渲染方式类似threejs平面网格模型，CSS3精灵模型CSS3DSprite渲染方式类似threejs中精灵模型对象Sprite。

tagFun(boxMesh,'tan');
tagFun(boxMesh2,'tan2');
tagFun(boxMesh3,'tan3');

function tagFun(mesh,id) {
  // 获得HTML元素创建的UI界面
  const tag = document.getElementById(id);
  // 把div元素包装为CSS3DObject模型
  const obj= new CSS3DObject(tag);
  // 把HTML元素包装为CSS3精灵模型CSS3DSprite
  // CSS3对象模型CSS3DObject插入到场景中
  scene.add(obj)
  obj.position.copy(mesh.position)
  obj.position.y += 80
  obj.position.x += 10
  //缩放CSS3DObject模型对象
  obj.scale.set(0.3, 0.3, 0.3)
}

// 把HTML元素包装为CSS3精灵模型CSS3DSprite
const CSS3DSprite = new CSS3DSprite( div );

与WebGL渲染器组合

可以在threejs代码中同时使用CSS3渲染器CSS3DRenderer和WebGL渲染器WebGLRenderer，通过WebGL渲染器WebGLRenderer渲染threejs的网格模型，然后通过CSS3渲染器CSS3DRenderer渲染HTML元素创建的UI界面作为threejs网格模型对象的标签，比如在物联网3D可视化项目中显示该网格模型的相关数据信息。

const renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);
renderer.setClearColor(0x222222, 1);
//WebGL渲染器输出的canvas画布绝对定位，以免影响CSS3渲染的HTML元素显示
renderer.domElement.style.position = 'absolute';
document.body.appendChild(renderer.domElement);
// 创建CSS3渲染器
const CSS3Renderer = new THREE.CSS3DRenderer();
CSS3Renderer.setSize(width, height);
document.body.appendChild(CSS3Renderer.domElement);
// 渲染函数
function render() {
  // 渲染threejs场景中的网格模型Mesh等对象
  renderer.render(scene, camera);
   // 渲染`CSS3DSprite`或`CSS3DObject`模型对象包装的HTML元素
  CSS3Renderer.render(scene, camera);
  requestAnimationFrame(render);
}

CSS3DObject表示的模型标签和threejs平面网格模型表示的模型标签效果一样，CSS3DSprite表示的模型标签和threejs精灵模型Sprite渲染效果一样。

通过空间OrbitControls旋转缩放threejs三维场景中的时候，CSS3DSprite或CSS3DObject包装的HTML元素同样会跟随对应的三维场景Scene旋转缩放。

const controls = new OrbitControls(camera,renderer.domElement);

效果图：