郭隆邦老师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);