三射流研究…学习之文字形状及自定义形状

时间：2021-09-08 来源：互联网编辑：宝哥软件园浏览：次

1.文字形状

说起三维(三维的缩写)文字想起了早年单词里的一些艺术字：

那么文本几何可以用来创建三维的文字形状。

使用文字形状需要下载和引用额外的字体库。这里，我们以赫尔维蒂克公司字体为例。

引用：

脚本类型=' text/JavaScript ' src=' http :你的路径/helveticker _正则。字样。json'/scriptTextGeometry的构造函数是：

三个。文本几何（文本，参数)文本是文字字符串；

因素是以下参数组成的对象：

尺寸：字号大小，一般为大写字母的高度

高度：文字的厚度

曲线段：弧线分段数，使得文字的曲线更加光滑

字体：字体，默认是' helvetiker '，需对应引用的字体文件

重量：值为正常或粗体，表示是否加粗

风格：值为正常或斜体，表示是否斜体

斜面使能：布尔值，是否使用倒角，意为在边缘处斜切

斜面厚度：倒角厚度

斜面尺寸：倒角宽度

创建一个三维文字：新的三TextGeometry('Hello '，{size: 1，height: 1})，其效果为：

可以适当调整材质和光照以达到期望效果：

//金属发亮物体可变材料=新的三.mesh Phong material({ color :0x ffff 00，镜象：00x ffff 00，//指定该材质的光亮程度及其高光部分的颜色，如果设置成和颜色属性相同的颜色，则会得到另一个更加类似金属的材质，如果设置成灰色灰色，则看起来像塑料shinines 33600//指定高光部分的亮度，默认值为30});//方向光var light=new THREE .DirectionalLight(0x ffffff)；light.position.set(-5，10，5)；场景添加（光);

源码：

！DOCTYPE html html head meta charset=' UTF-8 '标题3。射流研究…测试六/title/head body on load=' init()' canvas id=' mainCanvas ' width=' 400 px ' height=' 300 px '/canvas/body script type=' text/JavaScript ' src=' http : js/three。量滴js '/脚本！-在https://github.com/mrdoob/three.js/tree/master/examples/fonts找到更多信息-脚本类型='text/javascript '函数init() { var renderer=new THREE .WebGLRenderer({ canvas :文档。getelementbyid(' mainCanvas ')})；渲染器。SetClearColor(0x 000000)；定义变量场景=新三。场景();//相机var相机=新三.正投影摄像机(-2.5,2.5,1.875,-1.875,0.1,100);camera.position.set(5，5，20)；相机。看（新的三。向量3(1,0,0));scene.add(摄像机);//var material=new THREE .mesbasicmaterial({//color :0x ffff 00，//线框： true//})；//金属发亮物体可变材料=新的三.mesh Phong material({ color :0x ffff 00，镜象：00x ffff 00，//指定该材质的光亮程度及其高光部分的颜色，如果设置成和颜色属性相同的颜色，则会得到另一个更加类似金属的材质，如果设置成灰色灰色，则看起来像塑料shinines 33600//指定高光部分的亮度，默认值为30 });//方向光var light=new THREE .DirectionalLight(0x ffffff)；light.position.set(-5，10，5)；场景添加（光);//加载字体var loader=new THREE .font loader()；loader.load(' ./helveticker _正则。字体。函数(字体){ var mesh=new THREE .网状（新三TextGeometry('Hello '，{ font: font，size: 1，height: 1 })，材质);scene.add(网格);//渲染渲染。渲染(场景、摄像机);});} /script/html2 .自定义形状

对于三。射流研究…没有提供的形状，可以提供自定义形状来创建。

由于自定义形状需要手动指定每个顶点位置，以及顶点连接情况，如果该形状非常复杂，程序员的计算量就会比较大。在这种情况下，建议在3ds Max之类的建模软件中创建模型，然后使用三。射流研究…导入到场景中，这样会更高效方便。

自定义形状使用的是几何学类，它是其他如立方体几何、球面几何等几何形状的父类，其构造函数是：

三个。几何图形()

初始化一个几何形状，然后设置顶点位置以及顶点连接情况：

源码：

！DOCTYPE html html head meta charset=' UTF-8 '标题3。射流研究…测试六-二/title/head body on load=' init()' canvas id=' mainCanvas ' width=' 400 px ' height=' 300 px '/canvas/body script type=' text/JavaScript ' src=' http : js/THREE。js '/script脚本类型=' text/JavaScript '函数init(){ var renderer=new THREE .WebGLRenderer({ canvas :文档。getelementbyid(' mainCanvas ')})；渲染器。SetClearColor(0x 000000)；定义变量场景=新三。场景();//相机var相机=新三.正投影摄像机(-5,5,3.75,-3.75,0.1,100);摄像机位置设置(25，25，25)；相机。看（新的三Vector3(0，0，0))；scene.add(摄像机);可变材料=新的三.mesh basic material({ color :0x ffff 00，线框： true })；//初始化几何形状变化几何=新三。几何();//设置顶点位置//顶部四顶点几何。顶点。推动（新三Vector3(-1，2，-1))；几何。顶点。推动（新三。向量3(1,2,-1));几何。顶点。推动（新三Vector3(1，2，1))；几何。顶点。推动（新三Vector3(-1，2，1))；//底部四顶点几何。顶点。推动（新三Vector3(-2，0，-2))；几何。顶点。推动（新三。向量3(2,0,-2));几何。顶点。推动（新三。向量3(2,0,2));几何。顶点。推动（新三Vector3(-2，0，2))；//设置顶点连接情况//顶面几何。面。推（新三Face3(0，1，3))；几何。面。推（新三Face3(1，2，3))；//geometry.faces.push(new THREE .Face4(0，1，2，3))；//底面几何。面。推（新三Face3(4，5，6))；几何。面。推（新三Face3(5，6，7))；//geometry.faces.push(new THREE .Face4(4，5，6，7))；//侧面几何。面。推（新三Face3(1，5，6))；几何。面。推（新三Face3(6，2，1))；几何。面。推（新三Face3(2，6，7))；几何。面。推（新三Face3(7，3，2))；几何。面。推（新三Face3(3，7，0))；几何。面。推（新三Face3(7，4，0))；几何。面。推（新三Face3(0，4，5))；几何。面。推（新三Face3(0，5，1))；////四个顶点组成的面//geometry.faces.push(new THREE .Face4(0，1，5，4))；//geometry.faces.push(new THREE .Face4(1，2，6，5))；//geometry.faces.push(new THREE .Face4(2，3，7，6))；//geometry.faces.push(new THREE .Face4(3，0，4，7))；var mesh=new THREE .网格（几何、材料);scene.add(网格);//渲染渲染。渲染(场景、摄像机);}/脚本/html需要注意的是，新三。向量3(-1,2,-1)创建一个矢量，作为顶点位置追加到几何图形。顶点数组中。

而由新的三。面3(0,1,2)创建一个三个顶点组成的面，追加到几何图形。面数组中。三个参数分别是三个顶点在几何图形。顶点中的序号。如果需要设置由四个顶点组成的面片，可以类似地使用三个。面4 .

//顶面几何。面。推（新三Face4(0，1，2，3))；//底面几何。面。推（新三Face4(4，5，6，7))；//四个侧面几何。面。推（新三Face4(0，1，5，4))；几何。面。推（新三Face4(1，2，6，5))；几何。面。推（新三Face4(2，3，7，6))；几何。面。推（新三Face4(3，0，4，7))；