1.文字形狀
說起3d文字想起了早年word里的一些藝術(shù)字：
那么TextGeometry可以用來創(chuàng)建三維的文字形狀。
使用文字形狀需要下載和引用額外的字體庫(kù)。這里，我們以 helvetiker字體為例。
引用：
<script type="text/javascript" src="你的路徑/helvetiker_regular.typeface.json"></script>
TextGeometry的構(gòu)造函數(shù)是：
THREE.TextGeometry(text, parameters)
text是文字字符串；
parameters是以下參數(shù)組成的對(duì)象：
? size：字號(hào)大小，一般為大寫字母的高度
? height：文字的厚度
? curveSegments：弧線分段數(shù)，使得文字的曲線更加光滑
? font：字體，默認(rèn)是'helvetiker'，需對(duì)應(yīng)引用的字體文件
? weight：值為'normal'或'bold'，表示是否加粗
? style：值為'normal'或'italics'，表示是否斜體
? bevelEnabled：布爾值，是否使用倒角，意為在邊緣處斜切
? bevelThickness：倒角厚度
? bevelSize：倒角寬度
創(chuàng)建一個(gè)三維文字：new THREE.TextGeometry('Hello', {size: 1, height: 1})，其效果為：
可以適當(dāng)調(diào)整材質(zhì)和光照以達(dá)到期望效果：
//金屬發(fā)亮物體var material = new THREE.MeshPhongMaterial({ color: 0xffff00, specular:0xffff00, //指定該材質(zhì)的光亮程度及其高光部分的顏色，如果設(shè)置成和color屬性相同的顏色，則會(huì)得到另一個(gè)更加類似金屬的材質(zhì)，如果設(shè)置成grey灰色，則看起來像塑料 shininess:0 //指定高光部分的亮度，默認(rèn)值為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測(cè)試六</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// }); //金屬發(fā)亮物體 var material = new THREE.MeshPhongMaterial({ color: 0xffff00, specular:0xffff00, //指定該材質(zhì)的光亮程度及其高光部分的顏色，如果設(shè)置成和color屬性相同的顏色，則會(huì)得到另一個(gè)更加類似金屬的材質(zhì)，如果設(shè)置成grey灰色，則看起來像塑料 shininess:0 //指定高光部分的亮度，默認(rèn)值為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.自定義形狀
對(duì)于Three.js沒有提供的形狀，可以提供自定義形狀來創(chuàng)建。
由于自定義形狀需要手動(dòng)指定每個(gè)頂點(diǎn)位置，以及頂點(diǎn)連接情況，如果該形狀非常復(fù)雜，程序員的計(jì)算量就會(huì)比較大。在這種情況下，建議在3ds Max之類的建模軟件中創(chuàng)建模型，然后使用Three.js導(dǎo)入到場(chǎng)景中，這樣會(huì)更高效方便。
自定義形狀使用的是Geometry類，它是其他如CubeGeometry、SphereGeometry等幾何形狀的父類，其構(gòu)造函數(shù)是：
THREE.Geometry()
初始化一個(gè)幾何形狀，然后設(shè)置頂點(diǎn)位置以及頂點(diǎn)連接情況：
源碼：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>3.js測(cè)試六-二</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(); // 設(shè)置頂點(diǎn)位置 // 頂部4頂點(diǎn) 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頂點(diǎn) 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)); // 設(shè)置頂點(diǎn)連接情況 // 頂面 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)); // 側(cè)面 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));// // 四個(gè)頂點(diǎn)組成的面// 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)創(chuàng)建一個(gè)矢量，作為頂點(diǎn)位置追加到geometry.vertices數(shù)組中。
而由new THREE.Face3(0, 1, 2)創(chuàng)建一個(gè)三個(gè)頂點(diǎn)組成的面，追加到geometry.faces數(shù)組中。三個(gè)參數(shù)分別是三個(gè)頂點(diǎn)在geometry.vertices中的序號(hào)。如果需要設(shè)置由四個(gè)頂點(diǎn)組成的面片，可以類似地使用THREE.Face4。
//頂面geometry.faces.push(new THREE.Face4(0, 1, 2, 3));//底面geometry.faces.push(new THREE.Face4(4, 5, 6, 7));//四個(gè)側(cè)面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學(xué)習(xí)之文字形狀及自定義形狀的全部?jī)?nèi)容，之前小編也整理了幾篇關(guān)于Three.js的相關(guān)文章，有需要的可以通過下面相關(guān)文章的鏈接查看，希望能幫到學(xué)習(xí)Three.js的大家。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
