郭隆邦老师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);
效果图：
