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的大家。