郭隆邦老师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。
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);
效果图：
推荐阅读
您阅读本篇文章共花了：
发表评论