序文
編集者は、以前に幾何学的な形状と素材について公開してきました。あなたが読んで学んだ後、私たちはそれらを使用してオブジェクトを作成できると信じています。最も一般的に使用されるオブジェクトは、頂点、エッジ、顔などで構成されるオブジェクトであるメッシュです。他のオブジェクトには、ラインセグメント、骨、粒子システムなどが含まれます。オブジェクトを作成するには、幾何学的な形状と材料を指定する必要があります。その中で、幾何学的な形状がオブジェクトの頂点やその他の情報の位置を決定し、素材はオブジェクトの色、テクスチャ、その他の情報を決定します。
1.グリッドを作成します
前の記事では、幾何学的な形状と素材を作成する方法を学び、メッシュを作成することは非常にシンプルで、幾何学的な形状と素材をコンストラクターに渡すだけです。最も一般的に使用されるオブジェクトは、ポイント、線、表面を含むジオメトリを表すメッシュです。そのコンストラクターは次のとおりです。
メッシュ（ジオメトリ、素材）
ここでは、特定の例でグリッドを作成する方法を学びましょう。
var material = new 3.meshlambertmaterial（{color：0xffff00}）; var geometry = new 3.cubegeometry（1、2、3）; var mesh = new Three.mesh（geometry、material）; scene.add（mesh）;材料とジオメトリがその後再利用されない場合、それらは一緒に書くこともできます。
var mesh = new 3.mesh（new 3.CubeGeometry（1、2、3）、new 3.meshlambertmaterial（{color：0xffff00}））; sean.add（mesh）;照明を追加した後、結果は次のとおりです。
材料が指定されていない場合、真のワイヤーフレームを備えた材料が毎回ランダムに割り当てられます。ページを更新した後の色は異なります。考えられる効果の1つは、次のとおりです。
ソースコード：
<！Doctype html> <html> <head> <meta charset = "utf-8"> <title> 3.jsテスト9.1 </title> </head> <body onload = "init（）"> <canvas id = "maincanvas"> </canvas> </body> <script = "text/javascript" src = "> <script 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（-2.5、2.5、1.875、-1.875、0.1、100）; camera.position.set（5、5、20）; camera.lookat（new 3.Vector3（0、0、0））; shene.add（カメラ）; var material = new 3.meshlambertmaterial（{color：0xffff00}）; // var material = new 3.meshbasicmaterial（{// color：0xffff00、// wireframe：true //}）; var geometry = new 3.CubeGeometry（1、2、3）; var mesh = new Three.mesh（geometry、Material）; shene.add（mesh）; var light = new Three.DirectionAllight（0xffffff）; light.position.set（20、10、5）; shene.add（light）; // render renderer.render（シーン、カメラ）; } </script> </html>2。プロパティを変更します
2.1材料を変更します
コンストラクターの材料の指定に加えて、メッシュが作成された後に材料を変更することもできます。
var material = new 3.meshlambertmaterial（{color：0xffff00}）; var geometry = new 3.cubegeometry（1、2、3）; var mesh = new 3.mesh（Geometry、Material）; shene.add（mesh）; mesh.material = new 3.meshlambertmaterial（{color：0xff0000}）;最後の色は赤です：
ソースコード：
<！doctype html> <html> <head> <meta charset = "utf-8"> <title> 3.js test9.2 </title> </head> <body onload = "init（）"> <canvas = "maincanvas"> </canvas> </body> <script = "text/javascript" src = "> firct"> 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（-2.5、2.5、1.875、-1.875、0.1、100）; camera.position.set（5、5、20）; camera.lookat（new 3.Vector3（0、0、0））; shene.add（カメラ）; var material = new 3.meshlambertmaterial（{color：0xffff00}）; var geometry = new 3.CubeGeometry（1、2、3）; var mesh = new Three.mesh（geometry、Material）; shene.add（mesh）; mesh.material = new 3.meshlambertmaterial（{color：0xff0000}）; var light = new Three.DirectionAllight（0xffffff）; light.position.set（20、10、5）; shene.add（light）; // render renderer renderer.render（シーン、カメラ）; } </script> </html>2.2位置、ズーム、回転
位置、スケーリング、および回転は、オブジェクトの3つの一般的な特性です。 Three.meshはThree.Object3dに基づいているため、スケール、回転、および位置の3つの属性が含まれています。それらはすべて3つのインスタンスであるため、値を変更する方法は同じであり、ここでは例としてポジションを取っています。
Three.vector3には、x、y、zの3つの属性があります。属性の1つだけを設定する場合は、次の方法を使用できます。
mesh.position.z = 1;
複数のプロパティを同時に設定する必要がある場合は、次の2つの方法を使用できます。
mesh.position.set（1.5、-0.5、0）;
または：
mesh.position = new 3.Vector3（1.5、-0.5、0）;
スケーリングの対応する属性はスケールであり、回転の対応する属性は回転です。特定の方法は、上記の例と同じです。これは、それぞれ3つの軸x、y、zに沿ったスケーリングまたは回転を示しています。
ソースコード：
<！Doctype html> <html> <head> <meta charset = "utf-8"> <title> 3.js test9.3 </title> </head> <body onload = "init（）"> <canvas = "maincanvas"> </canvas> </body> <script = "text/javascript" src = "Js 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（-2.5、2.5、1.875、-1.875、0.1、100）; camera.position.set（5、5、20）; camera.lookat（new 3.Vector3（0、0、0））; shene.add（カメラ）; var material = new 3.meshlambertmaterial（{color：0xffff00}）; var geometry = new 3.CubeGeometry（1、2、3）; var mesh = new Three.mesh（geometry、Material）; shene.add（mesh）; mesh.position.set（1.5、-0.5、0）; mesh.position = new 3.Vector3（1.5、-0.5、0）; mesh.position.z = 1; var light = new Three.DirectionAllight（0xffffff）; light.position.set（20、10、5）; shene.add（light）; Drawaxes（シーン）; // render renderer.render（シーン、カメラ）; }関数drawaxes（seent）{// x-axis var xgeo = new 3.geometry（）; xgeo.vertices.push（new 3.vector3（0、0、0））; xgeo.vertices.push（new 3.vector3（1、0、0））; var xmat = new 3.linebasicmaterial（{color：0xff0000}）; var xaxis = new 3.line（xgeo、xmat）; shene.add（xaxis）; // y-axis var ygeo = new 3.geometry（）; ygeo.vertices.push（new 3.vector3（0、0、0））; ygeo.vertices.push（new 3.vector3（0、1、0））; var ymat = new 3.linebasicmaterial（{color：0x00ff00}）; var yaxis = new 3.line（ygeo、ymat）; shene.add（yaxis）; // z-axis var zgeo = new 3.geometry（）; zgeo.vertices.push（new 3.Vector3（0、0、0））; zgeo.vertices.push（new 3.vector3（0、0、1））; var zmat = new 3.linebasicmaterial（{color：0x00ccff}）; var zaxis = new 3.line（zgeo、zmat）; shene.add（zaxis）; } </script> </html>この記事の内容はここで終わります。この記事では、詳細な例と写真を通じて3.jsのグリッドを紹介します。この記事が3つのjsを学ぶのに役立つことを願っています。