22title : Three.jsのジオメトリの基本
33author : 池田 泰延
44published_date : 2017-11-03
5- modified_date : 2019-01-08
5+ modified_date : 2019-06-11
66---
77
88形状(ジオメトリとも言います)を指定することで「球体」や「直方体」、「平面」などさまざまな3Dのオブジェクトを表示できます。言葉で説明するより、実際に動くものを見たほうがわかりやすいと思いますので、次のデモを試してみてください。
@@ -46,7 +46,7 @@ Three.jsに用意されているさまざまな形状を実現するコードを
4646
4747### 球体のジオメトリ
4848
49- < img class = " aligncenter " src = " https://ics.media/wp-content/uploads/2014/01/away3d-sphere .png" alt = " Three.js-sphere " width = " 639 " height = " 330 " >
49+ ![ ] ( ../imgs/geometry_shpere .png)
5050
5151``` js
5252const geometry = new THREE.SphereGeometry ( 5 , 32 , 32 );
@@ -61,7 +61,7 @@ scene.add( sphere );
6161
6262### 直方体のジオメトリ
6363
64- < img class = " aligncenter " src = " https://ics.media/wp-content/uploads/2014/01/away3d-cube .png" alt = " Three.js-cube " width = " 639 " height = " 330 " >
64+ ![ ] ( ../imgs/geometry_box .png)
6565
6666``` js
6767const geometry = new THREE.BoxGeometry ( 1 , 1 , 1 );
@@ -76,7 +76,7 @@ scene.add( cube );
7676
7777### 平面のジオメトリ
7878
79- < img class = " aligncenter " src = " https://ics.media/wp-content/uploads/2014/01/away3d-plane .png" alt = " Three.js-plane " width = " 639 " height = " 330 " >
79+ ![ ] ( ../imgs/geometry_plane .png)
8080
8181``` js
8282const geometry = new THREE.PlaneGeometry ( 5 , 20 , 32 );
@@ -92,7 +92,7 @@ scene.add( plane );
9292
9393### 三角錐のジオメトリ
9494
95- < img class = " size-full wp-image-1152 aligncenter " src = " https://ics.media/wp-content/uploads/2014/01/away3d-cone .png" alt = " Three.js-cone " width = " 639 " height = " 330 " >
95+ ![ ] ( ../imgs/geometry_cone .png)
9696
9797``` js
9898const geometry = new THREE.ConeGeometry ( 5 , 20 , 32 );
@@ -105,10 +105,9 @@ scene.add( cone );
105105
106106
107107
108-
109108### 円柱のジオメトリ
110109
111- < img class = " size-full wp-image-1154 aligncenter " src = " https://ics.media/wp-content/uploads/2014/01/away3d-cylinder .png" alt = " Three.js-cylinder " width = " 639 " height = " 330 " >
110+ ![ ] ( ../imgs/geometry_cylinder .png)
112111
113112``` js
114113const geometry = new THREE.CylinderGeometry ( 5 , 5 , 20 , 32 );
@@ -117,15 +116,15 @@ const cylinder = new THREE.Mesh( geometry, material );
117116scene .add ( cylinder );
118117```
119118
120-
121119※このジオメトリの使い方は公式ドキュメント(英語)の「[ CylinderGeometry \- three\. js docs] ( https://threejs.org/docs/#api/geometries/CylinderGeometry ) 」を確認ください。
122120
123121
124122
125123
124+
126125### ドーナツ形状のジオメトリ
127126
128- < img class = " size-full wp-image-1157 aligncenter " src = " https://ics.media/wp-content/uploads/2014/01/away3d-torus .png" alt = " Three.js-torus " width = " 639 " height = " 330 " >
127+ ![ ] ( ../imgs/geometry_torus .png)
129128
130129``` js
131130const geometry = new THREE.TorusGeometry ( 10 , 3 , 16 , 100 );
0 commit comments