1。テキスト形状
3Dテキストといえば、私は初期の頃に言葉で芸術的な言葉を覚えています。
次に、 TextGeometry使用して、3次元のテキスト形状を作成できます。
テキスト形状を使用するには、追加のフォントライブラリをダウンロードして引用する必要があります。ここでは、 helvetikerフォントを例として見てみましょう。
引用：
<script type = "text/javascript" src = "your path/helvetiker_ remulary.typeface.json"> </script>
TextGeometryのコンストラクターは次のとおりです。
Three.TextGeometry（テキスト、パラメーター）
テキストは文字通りの文字列です。
パラメーターは、次のパラメーターで構成されるオブジェクトです。
・サイズ：フォントサイズ、一般的に大文字の高さ
・身長：テキストの厚さ
curvese式：アークセグメントの数は、テキストの曲線をよりスムーズにします
・フォント：フォント、デフォルトは「helvetiker」、および参照する必要があるフォントファイルです
・重量：値は「通常」または「太字」であり、厚いかどうかを示します
・スタイル：値は「通常」または「斜体」であり、斜体が斜体であるかどうかを示します
bevelEnabled：ブール値、面取りを使用するかどうか、端で斜めにカットすることを意味する
bevelthick性：面取りの厚さ
bevelsize：面取り幅
3次元テキストを作成します： new THREE.TextGeometry('Hello', {size: 1, height: 1})，その効果は次のとおりです。
材料と照明は、望ましい効果を達成するために適切に調整できます。
//金属製の輝くオブジェクトvar材料=新しい3.meshphongmaterial（{color：0xffff00、specular：0xffff00、//材料の明るさとハイライトパーツの色を指定します。 30}）; // Directional Light var Light = new 3.DirectionAllight（0xffffff）; light.position.set（-5、10、5）; sean.add（light）;ソースコード：
<！Doctype html> <html> <head> <meta charset = "utf-8"> <title> 3.jsテスト6 </title> </head> <body onload = "init（）"> <canvas = "maincanvas"> </canvas> </body> <script = "" src = "js詳細については、https：//github.com/mrdoob/three.js/tree/master/examples/fonts-> <スクリプトタイプ= "text/javascript"> function init（）{var renderer = new 3.webglrenderer（{canvas：document.getelementyid（ 'maincanvas'）; renderer.setClearColor（0x0000000）; varシーン= new 3.scene（）; //カメラvarカメラ= new 3.othographiccamera（-2.5、2.5、1.875、-1.875、0.1、100）; camera.position.set（5、5、20）; camera.lookat（new 3.Vector3（1、0、0））; shene.add（カメラ）; // var material = new 3.meshbasicmaterial（{// color：0xffff00、// wireframe：true //}）; // Metal Shining Object var Material = new 3.meshphongmaterial（{color：0xffff00、鏡：0xffff00、//材料の明るさとハイライトパーツの色を指定します。 //方向ライトvar light = new 3.DirectionAllight（0xffffffff）; light.position.set（-5、10、5）; shene.add（light）; //フォントvar loader = new 3.fontloader（）; loader.load（ './ helvetiker_ regulary.typeface.json'、function（font）{var mesh = new 3.mesh（new 3.textgeometry（ 'hello'、{font：font、size：1、height：1}）、material.add（mesh）; } </script> </html>2。カスタムシェイプ
Three.jsによって提供されていない形状の場合、作成するためにカスタムシェイプを提供できます。
カスタムシェイプでは、各頂点の位置と頂点接続の手動仕様が必要であるため、形状が非常に複雑な場合、プログラマーの計算は比較的大きくなります。この場合、3DS Maxなどのモデリングソフトウェアでモデルを作成し、3.jsを使用してシーンにインポートすることをお勧めします。
カスタムシェイプは、 CubeGeometry 、 SphereGeometryなどの他の幾何学的形状の親クラスであるGeometryクラスを使用し、そのコンストラクターは次のとおりです。
THREE.Geometry()
ジオメトリを初期化し、頂点の位置と頂点接続ステータスを設定します。
ソースコード：
<！Doctype html> <HTML> <head> <meta charset = "utf-8"> <title> 3.js Test Six-two </title> </head> <body onload = "init（）"> <canvas id = "maincanvas"> </canvas> </body> <script = "text/javascript" src = " type = "text/javascript"> function init（）{var renderer = new 3.webglrenderer（{canvas：document.getElementbyId（ 'maincanvas'）}）; renderer.setClearColor（0x0000000）; varシーン= new 3.scene（）; //カメラvarカメラ= new 3.othographiccamera（-5、5、3.75、-3.75、0.1、100）; camera.position.set（25、25、25）; camera.lookat（new 3.Vector3（0、0、0））; shene.add（カメラ）; var material = new 3.meshbasicmaterial（{color：0xffff00、wireframe：true}）; // Geometryを初期化するvar geometry = new 3.geometry（）; //頂点の位置を設定しますgeometry.vertices.push（new 3.Vector3（1、2、-1））; geometry.vertices.push（new 3.Vector3（1、2、1））; geometry.vertices.push（new 3.Vector3（-1、2、1））; geometry.vertices.push（new 3.Vector3（-1、2、1））; geometry.vertices.push（new 3.Vector3（-1、2、1））; geometry.vertices.push（new 3.Vector3（-1、2、1））; geometry.vertices.push（new 3.Vector3（-1、2、1））; //下の4つの頂点Geometry.vertices.push（new 3.Vector3（-2、0、-2））; geometry.vertices.push（new 3.Vector3（2、0、-2））; geometry.vertices.push（new 3.Vector3（2、0、2））; geometry.vertices.push（new 3.Vector3（2、0、2））; geometry.vertices.push（new 3.vector3（-2、0、2））; //頂点接続ステータスを設定// top geometry.faces.push（new 3.face3（0、1、3））; geometry.faces.push（new 3.face3（1、2、3））; // geometry.faces.push（new 3.face4（0、1、2、3））; // bottom geometry.faces.push（new 3.face3（4、5、6））; geometry.faces.push（new 3.face3（5、6、7））; // geometry.faces.push（new 3.face4（4、5、6、7））; // side geometry.faces.push（new 3.face3（1、5、6））; geometry.faces.push（new 3.face3（6、2、1））; geometry.faces.push（new 3.face3（2、6、7））; geometry.faces.push（new 3.face3（7、3、2））; geometry.faces.push（new 3.face3（3、7、0））; geometry.faces.push（new 3.face3（7、4、0））; geometry.faces.push（new 3.face3（0、4、5））; geometry.faces.push（new 3.face3（0、4、5））; geometry.faces.push（new 3.face3（0、4、5））; geometry.faces.push（new 3.face3（0、5、1））; // // 4つの頂点で構成されている顔// geometry.faces.push（new 3.face4（0、1、5、4））; // geometry.faces.push（new 3.face4（1、2、6、5））; // geometry.faces.push（new 3.face4（2、3、7、6））; // geometry.faces.push（new 3.face4（3、0、4、7））; var mesh = new Three.mesh（geometry、Material）; shene.add（mesh）; // render renderer.render（シーン、カメラ）; } </script> </html> new THREE.Vector3(-1, 2, -1) geometry.vertices Arrayにvertex位置として追加されるベクトルを作成することに注意してください。
3つの頂点で構成される顔はnew THREE.Face3(0, 1, 2)によって作成され、 geometry.faces配列に追加されます。 3つのパラメーターは、幾何学の3つの頂点のシーケンス番号ですgeometry.vertices 。 4つの頂点で構成されるパッチを設定する必要がある場合は、同様にTHREE.Face4を使用できます。
// top geometry.faces.push（new 3.face4（0、1、2、3））; // bottom geometry.faces.push（new 3.face4（4、5、6、7））; // 4つの側面ジオメトリ。 5））; geometry.faces.push（new 3.face4（2、3、7、6））; geometry.faces.push（new 3.face4（2、3、7、6））; geometry.faces.push（new 3.face4（3、0、4、7））;
上記は、編集者によってコンパイルされたThree.js学習テキスト形状とカスタムシェイプのコンテンツ全体です。編集者は、3つのJSに関するいくつかの関連記事も編集しました。必要な場合は、以下の関連記事のリンクを使用して表示できます。 Three.jsを学ぶすべての人を助けることができることを願っています。