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" width="400px" height="300px" ></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" width="400px" height="300px" ></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中常用的3種材質
上一篇：其他幾何形狀