Three.js创建文字(Creating text)

1. DOM + CSS

使用HTML通常是最简单、最快速的添加文本的方法,这是大多数的Three.js示例中用于添加描述性叠加文字的方法。

<div id="info">Description</div>

然后使用CSS来将其绝对定位在其它具有z-index的元素之上,尤其是当你全屏运行three.js的时候。

#info {
	position: absolute;
	top: 10px;
	width: 100%;
	text-align: center;
	z-index: 100;
	display:block;
}

2. 将文字绘制到画布中,并将其用作Texture(纹理)

3. 在你所喜欢的3D软件里创建模型,并导出给three.js

4.three.js自带的文字几何体

如果你更喜欢使用纯three.js来工作,或者创建能够由程序改变的、动态的3D文字,你可以创建一个其几何体为THREE.TextGeometry的实例的网格:

new THREE.TextGeometry( text, parameters );

TextGeometry(文本缓冲几何体)需要在其“font”参数上设置一个THREE.Font的实例

5. 位图字体

BMFonts (位图字体) 可以将字形批处理为单个BufferGeometry。BMFont的渲染支持自动换行、字母间距、字句调整、signed distance fields with standard derivatives、multi-channel signed distance fields、多纹理字体等特性

猜你喜欢

转载自blog.csdn.net/w418856/article/details/130602634