13. Threejs案例-绘制3D文字
13. Threejs案例-绘制3D文字
实现效果
知识点
FontLoader
一个用于加载 JSON 格式的字体的类。
返回 font，返回值是表示字体的 Shape 类型的数组。
其内部使用 FileLoader 来加载文件。
构造器
FontLoader( manager : LoadingManager )
| 参数 | 类型 | 描述 |
|---|---|---|
| manager | LoadingManager | 加载器所使用的loadingManager，默认值为THREE.DefaultLoadingManager。 |
方法
load ( url : String, onLoad : Function, onProgress : Function, onError : Function ) : undefined
| 参数 | 类型 | 描述 |
|---|---|---|
| url | String | 文件的URL或者路径，也可以为 Data URI。 |
| onLoad | Function | 将在加载完成时调用。参数是将要被加载的font。 |
| onProgress | Function | 将在加载过程中调用。参数是包含total和loaded字节的XMLHttpRequest实例。 |
| onError | Function | 将在加载错误时调用。 |
TextGeometry (文本缓冲几何体)
一个用于将文本生成为单一的几何体的类。
它是由一串给定的文本，以及由加载的 font (字体) 和该几何体 ExtrudeGeometry 父类中的设置所组成的参数来构造的。
构造器
TextGeometry(text : String, parameters : Object)
| 参数 | 类型 | 描述 |
|---|---|---|
| text | String | 将要显示的文本。 |
| parameters | Object | 参数对象。 |
parameters 包含有下列参数的对象：
| 参数 | 类型 | 描述 |
|---|---|---|
| font | Font | THREE.Font的实例。 |
| size | Float | 字体大小，默认值为100。 |
| height | Float | 挤出文本的厚度，默认值为50。 |
| curveSegments | Integer | 曲线上点的数量，默认值为12。 |
| bevelEnabled | Boolean | 是否开启斜角，默认为false。 |
| bevelThickness | Boolean | 文本上斜角的深度，默认值为20。 |
| bevelSize | Float | 斜角与原始文本轮廓之间的延伸距离，默认值为8。 |
| bevelSegments | Integer | 斜角的分段数，默认值为3。 |
属性
boundingBox : Box3
当前 bufferGeometry 的外边界矩形。
可以通过 .computeBoundingBox() 计算。
默认值是 null。
方法
computeBoundingBox () : undefined
计算当前几何体的的边界矩形，该操作会更新已有 param:.boundingBox。
边界矩形不会默认计算，需要调用该接口指定计算边界矩形，否则保持默认值 null。
setAttribute ( name : String, attribute : BufferAttribute ) : this
为当前几何体设置一个 attribute 属性。
在类的内部，有一个存储 attributes 的 hashmap，通过该 hashmap，遍历 attributes 的速度会更快。
而使用该方法，可以向 hashmap 内部增加 attribute。
所以，你需要使用该方法来添加 attributes。
addGroup ( start : Integer, count : Integer, materialIndex : Integer ) : undefined
为当前几何体增加一个 group，详见 groups 属性。
applyMatrix4 ( matrix : Matrix4 ) : this
用给定矩阵转换几何体的顶点坐标。
center () : this
根据边界矩形将几何体居中。
clone () : BufferGeometry
克隆当前的 BufferGeometry。
copy ( bufferGeometry : BufferGeometry ) : this
将参数指定的 BufferGeometry 的值拷贝到当前 BufferGeometry 中。
clearGroups () : undefined
清空所有的 groups。
computeBoundingSphere () : undefined
计算当前几何体的的边界球形，该操作会更新已有 param:.boundingSphere。
边界球形不会默认计算，需要调用该接口指定计算边界球形，否则保持默认值 null。
computeTangents () : undefined
计算并向此 geometry 中添加 tangent attribute。
只支持索引化的几何体对象，并且必须拥有 position(位置)，normal(法向)和 uv attributes。
如果使用了切线空间法向贴图，最好使用 BufferGeometryUtils.computeMikkTSpaceTangents 中的 MikkTSpace 算法。
computeVertexNormals () : undefined
通过面片法向量的平均值计算每个顶点的法向量。
dispose () : undefined
从内存中销毁对象。
如果在运行是需要从内存中删除 BufferGeometry，则需要调用该函数。
getAttribute ( name : String ) : BufferAttribute
返回指定名称的 attribute。
getIndex () : BufferAttribute
返回缓存相关的 index。
hasAttribute ( name : String ) : Boolean
检查是否存在有指定名称的 attribute，如果有返回 true。
lookAt ( vector : Vector3 ) : this
旋转几何体朝向控件中的一点。
该过程通常在一次处理中完成，不会循环处理。
典型的用法是过通过调用 Object3D.lookAt 实时改变 mesh 朝向。
normalizeNormals () : undefined
几何体中的每个法向量长度将会为 1。
这样操作会更正光线在表面的效果。
deleteAttribute ( name : String ) : BufferAttribute
删除具有指定名称的 attribute。
rotateX ( radians : Float ) : this
在 X 轴上旋转几何体。
该操作一般在一次处理中完成，不会循环处理。
典型的用法是通过调用 Object3D.rotation 实时旋转几何体。
rotateY ( radians : Float ) : this
在 Y 轴上旋转几何体。
该操作一般在一次处理中完成，不会循环处理。
典型的用法是通过调用 Object3D.rotation 实时旋转几何体。
rotateZ ( radians : Float ) : this
在 Z 轴上旋转几何体。
该操作一般在一次处理中完成，不会循环处理。
典型的用法是通过调用 Object3D.rotation 实时旋转几何体。
scale ( x : Float, y : Float, z : Float ) : this
缩放几何体。
该操作一般在一次处理中完成，不会循环处理。
典型的用法是通过调用 Object3D.scale 实时缩放几何体。
setIndex ( index : BufferAttribute ) : this
设置缓存的 index。
setDrawRange ( start : Integer, count : Integer ) : undefined
设置缓存的 drawRange。
setFromPoints ( points : Array ) : this
通过点队列设置该 BufferGeometry 的 attribute。
toJSON () : Object
返回代表该 BufferGeometry 的 JSON 对象。
toNonIndexed () : BufferGeometry
返回已索引的 BufferGeometry 的非索引版本。
translate ( x : Float, y : Float, z : Float ) : this
移动几何体。
该操作一般在一次处理中完成，不会循环处理。
典型的用法是通过调用 Object3D.translate 实时移动几何体。
代码
<!DOCTYPE html>
<html lang="zh">
<head><title></title><meta charset="UTF-8"><script src="ThreeJS/three.js"></script><script src="ThreeJS/jquery.js"></script></head>
<body>
<div id="myContainer"></div>
<script type="text/javascript">// 创建一个WebGL渲染器实例，并开启抗锯齿处理 const myRenderer = new THREE.WebGLRenderer({antialias: true});// 设置渲染器的大小为窗口的宽度和高度 myRenderer.setSize(window.innerWidth, window.innerHeight);// 将渲染器的DOM元素 (即canvas元素) 添加到ID为"myContainer"的HTML元素中 $("#myContainer").append(myRenderer.domElement);// 创建一个新的Three.js场景 const myScene = new THREE.Scene();// 设置场景的背景颜色为白色 myScene.background = new THREE.Color('white');// 创建一个透视相机，设置其视野角度、长宽比、近裁剪面和远裁剪面 const myCamera = new THREE.PerspectiveCamera(45,window.innerWidth / window.innerHeight, 0.1, 1000);// 设置相机的初始位置 myCamera.position.set(0, 40, 700);// 将相机添加到场景中，使其成为场景的一部分 myScene.add(myCamera);// 加载字库并绘制字母 const myFontLoader = new THREE.FontLoader();myFontLoader.load('Data/optimer_bold.typeface.json', function (font) {// 使用加载的字库创建几何体 (这里是字母"three.js") const myGeometry = new THREE.TextGeometry('three.js', {font: font, size: 160});// 计算当前几何体的范围 (边界框) myGeometry.computeBoundingBox();// 计算字母 (几何体) 当前中心的偏移量，以确保字母位于其边界框的中心位置 const myOffsetX = (myGeometry.boundingBox.max.x - myGeometry.boundingBox.min.x) / 2;const myOffsetY = (myGeometry.boundingBox.max.y - myGeometry.boundingBox.min.y) / 2;// 创建一个基本材质，设置其颜色为蓝色 (0x0000ff是蓝色的十六进制代码) const myMaterial = new THREE.MeshBasicMaterial({color: 0x0000ff});// 使用几何体和材质创建一个新的网格 (Mesh) 对象，即字母模型 (这里是字母"three.js") const myTextMesh = new THREE.Mesh(myGeometry, myMaterial);// 设置字母模型的位置，使其位于其几何体的中心点 (即边界框的中心) myTextMesh.position.x = myGeometry.boundingBox.min.x - myOffsetX;myTextMesh.position.y = myGeometry.boundingBox.min.y + myOffsetY;// 将字母模型添加到场景中，使其显示在屏幕上 myScene.add(myTextMesh);});//渲染绘制的字母animate();function animate() {requestAnimationFrame(animate);myCamera.lookAt(new THREE.Vector3(0, 150, 0));myRenderer.render(myScene, myCamera);}
</script>
</body>
</html>演示链接
示例链接