three.js 创建文本的几种方式
概述
这篇文字总结了常用的创建文本的几种方式。
首先写一个html
.text {
width: 128px;
height: 128px;
font-size: 16px;
text-align: center;
color: #ffffff;
background: #ff0000;
}
<div class="text" id="text">精灵贴图文本</div>
<div class="text" id="text2">平面贴图文本</div>
<div class="text" id="text3">CSS2DRenderer渲染文本</div>
<div class="text" id="text4">CSS3DRenderer CSS3DObject渲染文本</div>
<div class="text" id="text5">CSS3DRenderer CSS3DSprite渲染文本</div>
获取所有dom
let div1 = document.getElementById('text');
let div2 = document.getElementById('text2');
let div3 = document.getElementById('text3');
let div4 = document.getElementById('text4');
let div5 = document.getElementById('text5');
精灵贴图文本
- 首先将html转为canvas, 使用html2canvas
html2canvas(div1).then(canvas => {
let texture = new THREE.CanvasTexture(canvas);
let material = new THREE.SpriteMaterial({
map: texture
});
let sprite = new THREE.Sprite(material);
sprite.scale.set(4, 4, 1);
scene.add(sprite)
})
平面贴图文本
- 首先将html转为canvas, 使用html2canvas
html2canvas(div2).then(canvas => {
let texture = new THREE.CanvasTexture(canvas);
let material = new THREE.MeshBasicMaterial({
map: texture,
side: THREE.DoubleSide
});
let geometry = new THREE.PlaneGeometry(4, 4, 2);
let plane = new THREE.Mesh(geometry, material);
plane.position.set(10, 0, 0);
scene.add(plane)
})
CSS2DRenderer
- 添加CSS2DRenderer拓展,将对应的js引入即可
- 创建渲染器
let label2DRenderer = new THREE.CSS2DRenderer();
label2DRenderer.setSize(window.innerWidth, window.innerHeight);
label2DRenderer.domElement.style.position = 'absolute';
label2DRenderer.domElement.style.top = '0px';
label2DRenderer.domElement.style.left = '0px';
//设置.pointerEvents=none,以免模型标签HTML元素遮挡鼠标选择场景模型
label2DRenderer.domElement.style.pointerEvents = 'none';
document.body.appendChild(label2DRenderer.domElement);
- 将生成的dom添加到CSS2DRenderer
let label2D = new THREE.CSS2DObject(div3);
label2D.position.set(-10, 0, 0);
scene.add(label2D);
- 在render中进行渲染
label2DRenderer.render(scene, camera)
CSS3DRenderer
- 添加CSS3DRenderer拓展,将对应的js引入即可
- 创建渲染器
let label3DRenderer = new THREE.CSS3DRenderer();
label3DRenderer.setSize(window.innerWidth, window.innerHeight);
label3DRenderer.domElement.style.position = 'absolute';
label3DRenderer.domElement.style.top = '0px';
label3DRenderer.domElement.style.left = '0px';
//设置.pointerEvents=none,以免模型标签HTML元素遮挡鼠标选择场景模型
label3DRenderer.domElement.style.pointerEvents = 'none';
document.body.appendChild(label3DRenderer.domElement);
- 将生成的dom添加到CSS3DRenderer,有两种,一种是mesh, 一种是sprite
let label3DObject = new THREE.CSS3DObject(div4);
label3DObject.position.set(-20, 0, 0);
label3DObject.scale.set(0.05, 0.05, 0.05);
scene.add(label3DObject);
let label3DSprite = new THREE.CSS3DSprite(div5);
label3DSprite.position.set(-30, 0, 0);
label3DSprite.scale.set(0.05, 0.05, 0.05);
scene.add(label3DSprite);
- 在render中进行渲染
label3DRenderer.render(scene, camera)
总结
- CSS2DRenderer渲染的文本的大小不会随着缩放而改变,会一直保持原大小,其余的均会对应的改变大小
- CSS3DRenderer渲染的CSS3DSprite 和精灵模型渲染的文本始终会面朝屏幕,不会随着旋转而改变角度。CSS3DRenderer渲染的CSS3DObject 和平面渲染的文本会随着角度的改变而改变
- 添加事件的方式不同,CSS3DRenderer和CSS2DRenderer渲染的本质还是dom,可以直接添加dom事件,精灵模型和mesh则是要通过射线的方式。
- 在渲染大批量文本的时候使用CSS3DRenderer和CSS2DRenderer性能最佳,将html转化为canvas这个步骤消耗的性能很大,如果直接是生成的canvas进行贴图则无所谓。