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>