1。キューブ
この形状の名前はキューブジオメトリですが、実際には立方体です。つまり、長さ、幅、高さを異なる値に設定できます。そのコンストラクターは次のとおりです。
THREE.CubeGeometry(width,height,depth,widthSegments,heightSegments, depthSegments)
幅: x方向の長さ
高さ: Y方向の長さ
深さ: Z方向の長さ
widthsegments: x方向のセグメントの数(オプション、デフォルト値1)
Heightsegments: Y方向のセグメントの数(上記と同じ)
奥深い: Z方向のセグメントの数(上記と同じ)
対立していない:
var material = new 3.meshbasicmaterial({color:0xffff00、wireframe:true}); drawcube(sene、material); function drawcube(sean、material){var cube = new 3.mesh(new 3.cubegeometry(1、2、3)、材料); seen.add(cube);}オブジェクトのデフォルトの位置は、原点であり、キューブの場合は、オリジンの幾何学的中心の位置です。
セグメンテーション:
var cube = new 3.mesh(new 3.CubeGeometry(1、2、3、2、2、3)、材料);
なぜそんなに多くの邪悪な線があるのですか?バージョンの問題。 R73バージョン:
このセグメンテーションは、キューブのボクセルではなく6つの面をセグメント化しているため、キューブの中央にセグメント化されておらず、セグメント化された辺のみがセグメント化されていることに注意してください。
2。平面
ここの平面(平面形成)は実際には長方形であり、数学的な意味では無限のサイズの平面ではありません。そのコンストラクターは次のとおりです。
THREE.PlaneGeometry(width, height, widthSegments, heightSegments)
幅: x方向の長さ
高さ: Y方向の長さ
widthsegments: x方向のセグメントの数(オプション、デフォルト値1)
Heightsegments: Y方向のセグメントの数(上記と同じ)
新しい3.planegeometry(2、4);作成された飛行機は、X軸とY軸が配置されている平面にあり、効果は次のとおりです。
3。球体
球体のコンストラクター(球体測定)は次のとおりです。
3つの球形調節測定(半径、セグメントスイッド、セグメントシェイト、フィスタート、フィラウンド、フィリング、シタストアート、シータル長)//半径:半径//セグメントスイッド:長所のセグメント数//セグメントシェイト:緯度のセグメントの数緯度の始まり// thetalength:緯度の開始時の半径
3.1緯度と経度セグメントの数
まず、SegmentSwidthとSegmentSheightを理解しましょう。 VAR Sphere = new Three.SphereGeometry(3、8、6)を使用して、3の半径を持つ球体を作成し、次の図に示すように、8つの部分に分割され、緯度を6つの部分に分割します。
Segmentswidthは、経度がいくつかの花びらに切断されるのと同等ですが、セグメントシェイトは緯度がいくつかの層にカットされるのと同等です。
新しい3.Spheregeometryの効果(3、5、4):
新しい3.Spheregeometryの効果(3、8、6):
新しい3.Spheregeometryの効果(3、18、12):
グラフの基礎となる層の実装では、曲線の概念はなく、曲線はすべて複数のポリライン近似で構成されています。球体の場合、これら2つの値が大きい場合、形成されたポリヘドロンは球体とほぼ見なすことができます。
3.2経度アーク
new THREE.SphereGeometry(3, 8, 6, Math.PI / 6, Math.PI / 3)開始経度がMath.Pi / 6であり、経度スパンがMath.Pi / 3であることを意味します。
効果は次のとおりです。
ここでのセグメントスイスは、経度がMath.pi/6がMath.pi/3を交差させる領域の8ブロックに分割されることを意味することに注意してください。
3.3緯度ラジアン
同じことが緯度のラジアンにも当てはまります。 new THREE.SphereGeometry(3, 8, 6, 0, Math.PI * 2, Math.PI / 6, Math.PI / 3) Math.Pi / 3を介してMath.pi / 6から緯度にまたがることを意味します。
効果は次のとおりです。
new THREE.SphereGeometry(3, 8, 6, Math.PI / 2, Math.PI, Math.PI / 6, Math.PI / 2) :
4。ソースコード
<!doctype html> <html> <head> <meta charset = "utf-8"> <title> 3.jsテスト4 </title> </head> <body onload = "init()"> <canvas = "maincanvas"> </canvas> </body> <script = "text/javascript" sr> 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材料=新しい3.meshbasicmaterial({color:0xffff00、wireframe:true}); DrawCube(シーン、マテリアル); // cube // drawplane(シーン、マテリアル); //平面// drawsphere(シーン、マテリアル); // Sphere // Renderer Renderer.Render(シーン、カメラ); }関数drawcube(シーン、マテリアル){var cube = new 3.mesh(new 3.cubegeometry(1、2、3、2、2、3)、材料); shene.add(cube); }関数drawplane(sean、material){var plane = new 3.mesh(new 3.planegeometry(2、4)、Material); shene.add(平面); }関数DrawSphere(シーン、マテリアル){var Sphere = new Three.mesh(new 3.spheregeometry(3、18、12)、Material); // var Sphere = new 3.Shesh(3、8、6、6、Math.pi/ 6、Math.pi/ 3)、Material); 0、Math.Pi * 2、Math.Pi / 6、Math.Pi / 3)、Material); // var Sphere = new Three.mesh(new 3.Spheregeometry(3、8、6、Math.pi / 2、Math.pi、Math.pi / 6、Math.pi / 2)、材料); scene.add(球体); } </script> </html>上記は、Three.jsで学習した幾何学的形状の内容全体です。編集者は、次々と3.jsに関する記事を更新します。引き続きwulin.comに注意を払います。