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