1.文字形狀
說起3d文字想起了早年word裡的一些藝術字：
那麼TextGeometry可以用來創建三維的文字形狀。
使用文字形狀需要下載和引用額外的字體庫。這裡，我們以helvetiker字體為例。
引用：
<script type="text/javascript" src="你的路徑/helvetiker_regular.typeface.json"></script>
TextGeometry的構造函數是：
THREE.TextGeometry(text, parameters)
text是文字字符串；
parameters是以下參數組成的對象：
・ size：字號大小，一般為大寫字母的高度
・ height：文字的厚度
・ curveSegments：弧線分段數，使得文字的曲線更加光滑
・ font：字體，默認是'helvetiker'，需對應引用的字體文件
・ weight：值為'normal'或'bold'，表示是否加粗
・ style：值為'normal'或'italics'，表示是否斜體
・ bevelEnabled：布爾值，是否使用倒角，意為在邊緣處斜切
・ bevelThickness：倒角厚度
・ bevelSize：倒角寬度
創建一個三維文字： new THREE.TextGeometry('Hello', {size: 1, height: 1})，其效果為：
可以適當調整材質和光照以達到期望效果：
//金屬發亮物體var material = new THREE.MeshPhongMaterial({ color: 0xffff00, specular:0xffff00, //指定該材質的光亮程度及其高光部分的顏色，如果設置成和color屬性相同的顏色，則會得到另一個更加類似金屬的材質，如果設置成grey灰色，則看起來像塑料shininess:0 //指定高光部分的亮度，默認值為30}); //方向光var light = new THREE.DirectionalLight(0xffffff);light.position.set(-5, 10, 5);scene.add(light);源碼：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>3.js測試六</title> </head> <body onload="init()"> <canvas id="mainCanvas" ></canvas> </body> <script type="text/javascript" src="js/three.min.js"></script> <!-- Find more information at https://github.com/mrdoob/three.js/tree/master/examples/fonts --> <script type="text/javascript"> function init() { var renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('mainCanvas') }); renderer.setClearColor(0x000000); var scene = new THREE.Scene(); // camera var camera = new THREE.OrthographicCamera(-2.5, 2.5, 1.875, -1.875, 0.1, 100); camera.position.set(5, 5, 20); camera.lookAt(new THREE.Vector3(1, 0, 0)); scene.add(camera); // var material = new THREE.MeshBasicMaterial({// color: 0xffff00,// wireframe: true// }); //金屬發亮物體var material = new THREE.MeshPhongMaterial({ color: 0xffff00, specular:0xffff00, //指定該材質的光亮程度及其高光部分的顏色，如果設置成和color屬性相同的顏色，則會得到另一個更加類似金屬的材質，如果設置成grey灰色，則看起來像塑料shininess:0 //指定高光部分的亮度，默認值為30 }); //方向光var light = new THREE.DirectionalLight(0xffffff); light.position.set(-5, 10, 5); scene.add(light); // load font var loader = new THREE.FontLoader(); loader.load('./helvetiker_regular.typeface.json', function(font) { var mesh = new THREE.Mesh(new THREE.TextGeometry('Hello', { font: font, size: 1, height: 1 }), material); scene.add(mesh); // render renderer.render(scene, camera); }); } </script></html>2.自定義形狀
對於Three.js沒有提供的形狀，可以提供自定義形狀來創建。
由於自定義形狀需要手動指定每個頂點位置，以及頂點連接情況，如果該形狀非常複雜，程序員的計算量就會比較大。在這種情況下，建議在3ds Max之類的建模軟件中創建模型，然後使用Three.js導入到場景中，這樣會更高效方便。
自定義形狀使用的是Geometry類，它是其他如CubeGeometry 、 SphereGeometry等幾何形狀的父類，其構造函數是：
THREE.Geometry()
初始化一個幾何形狀，然後設置頂點位置以及頂點連接情況：
源碼：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>3.js測試六-二</title> </head> <body onload="init()"> <canvas id="mainCanvas" ></canvas> </body> <script type="text/javascript" src="js/three.js"></script> <script type="text/javascript"> function init() { var renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('mainCanvas') }); renderer.setClearColor(0x000000); var scene = new THREE.Scene(); // camera var camera = new THREE.OrthographicCamera(-5, 5, 3.75, -3.75, 0.1, 100); camera.position.set(25, 25, 25); camera.lookAt(new THREE.Vector3(0, 0, 0)); scene.add(camera); var material = new THREE.MeshBasicMaterial({ color: 0xffff00, wireframe: true }); // 初始化幾何形狀var geometry = new THREE.Geometry(); // 設置頂點位置// 頂部4頂點geometry.vertices.push(new THREE.Vector3(-1, 2, -1)); geometry.vertices.push(new THREE.Vector3(1, 2, -1)); geometry.vertices.push(new THREE.Vector3(1, 2, 1)); geometry.vertices.push(new THREE.Vector3(-1, 2, 1)); // 底部4頂點geometry.vertices.push(new THREE.Vector3(-2, 0, -2)); geometry.vertices.push(new THREE.Vector3(2, 0, -2)); geometry.vertices.push(new THREE.Vector3(2, 0, 2)); geometry.vertices.push(new THREE.Vector3(-2, 0, 2)); // 設置頂點連接情況// 頂面geometry.faces.push(new THREE.Face3(0, 1, 3)); geometry.faces.push(new THREE.Face3(1, 2, 3));// geometry.faces.push(new THREE.Face4(0, 1, 2, 3)); // 底面geometry.faces.push(new THREE.Face3(4, 5, 6)); geometry.faces.push(new THREE.Face3(5, 6, 7));// geometry.faces.push(new THREE.Face4(4, 5, 6, 7)); // 側面geometry.faces.push(new THREE.Face3(1, 5, 6)); geometry.faces.push(new THREE.Face3(6, 2, 1)); geometry.faces.push(new THREE.Face3(2, 6, 7)); geometry.faces.push(new THREE.Face3(7, 3, 2)); geometry.faces.push(new THREE.Face3(3, 7, 0)); geometry.faces.push(new THREE.Face3(7, 4, 0)); geometry.faces.push(new THREE.Face3(0, 4, 5)); geometry.faces.push(new THREE.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.Mesh(geometry, material); scene.add(mesh); // render renderer.render(scene, camera); } </script></html>需要注意的是， new THREE.Vector3(-1, 2, -1)創建一個矢量，作為頂點位置追加到geometry.vertices數組中。
而由new THREE.Face3(0, 1, 2)創建一個三個頂點組成的面，追加到geometry.faces數組中。三個參數分別是三個頂點在geometry.vertices中的序號。如果需要設置由四個頂點組成的面片，可以類似地使用THREE.Face4 。
//頂面geometry.faces.push(new THREE.Face4(0, 1, 2, 3));//底面geometry.faces.push(new THREE.Face4(4, 5, 6, 7));//四個側面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));
以上就是小編為大家整理的Three.js學習之文字形狀及自定義形狀的全部內容，之前小編也整理了幾篇關於Three.js的相關文章，有需要的可以通過下面相關文章的鏈接查看，希望能幫到學習Three.js的大家。