【Three.js】Geometry(ジオメトリ)の種類と変更方法-3Dモデルのデモ付きで紹介
Three.jsのGeometry(ジオメトリ)の基本的な種類を実際に3Dモデルのデモを動かしながら確認してみてましょう。
もしThree.jsの基本的な操作の一連の流れを知らないという場合は、Three.jsの基本的な操作の一連の流れがとても短くまとめた記事なので参考にしてみてください。
具体的なコードとデモが見たい場合は、【WebGL&Three.js入門】Three.jsの一番シンプルなサンプルコードのチュートリアルの解説でデモもみれる状態にしているので参考にしてみてください。
目次から読む
- 1. Three.jsのGeometry(ジオメトリ)の基本的な種類のサンプル
- 2. Three.jsのGeometry(ジオメトリ)をドキュメントで調べる方法
- 3. Three.jsの初期化 (initializeThreeJS 関数)
- 4. シーン、カメラ、レンダラーの設定
- 5. ジオメトリの生成
- 5.1. BoxGeometry
- 5.2. CapsuleGeometry
- 5.3. CircleGeometry
- 5.4. ConeGeometry
- 5.5. CylinderGeometry
- 5.6. DodecahedronGeometry
- 5.7. EdgesGeometry
- 5.8. ExtrudeGeometry
- 5.9. IcosahedronGeometry
- 5.10. LatheGeometry
- 5.11. OctahedronGeometry
- 5.12. PlaneGeometry
- 5.13. PolyhedronGeometry
- 5.14. RingGeometry
- 5.15. ShapeGeometry
- 5.16. SphereGeometry
- 5.17. TetrahedronGeometry
- 5.18. TorusGeometry
- 5.19. TorusKnotGeometry
- 5.20. TubeGeometry
- 5.21. WireframeGeometry
- 6. マテリアルとメッシュの設定
- 7. アニメーション関数
- 8. まとめ
Three.jsのGeometry(ジオメトリ)の基本的な種類のサンプル
さっそく3Dモデルのデモを確認してみましょう。Three.jsのGeometry(ジオメトリ)をドキュメントで調べる方法
Three.jsの公式サイトのドキュメントにアクセスして、「geometry」と検索窓で検索します。 具体的には以下にアクセスするとgeometryを確認することができます。 https://threejs.org/docs/index.html?q=geometry#manual/en/introduction/Creating-a-sceneThree.jsの初期化 (initializeThreeJS 関数)
import * as THREE from "three";
export default function initializeThreeJS(geometryType) {
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
let geometry;
switch (geometryType) {
case "Box":
geometry = new THREE.BoxGeometry();
break;
case "Capsule":
geometry = new THREE.CapsuleGeometry();
break;
case "Circle":
geometry = new THREE.CircleGeometry();
break;
case "Cone":
geometry = new THREE.ConeGeometry();
break;
case "Cylinder":
geometry = new THREE.CylinderGeometry();
break;
case "Dodecahedron":
geometry = new THREE.DodecahedronGeometry();
break;
case "Edges":
const baseGeometry = new THREE.BoxGeometry();
geometry = new THREE.EdgesGeometry(baseGeometry);
break;
case "Extrude":
geometry = new THREE.ExtrudeGeometry();
break;
case "Icosahedron":
geometry = new THREE.IcosahedronGeometry();
break;
case "Lathe":
geometry = new THREE.LatheGeometry();
break;
case "Octahedron":
geometry = new THREE.OctahedronGeometry();
break;
case "Plane":
geometry = new THREE.PlaneGeometry(2, 2);
break;
case "Polyhedron":
const verticesOfPolyhedron = [
/* 頂点の配列 */
1, 1, 1, // 頂点0
-1, -1, 1, // 頂点1
-1, 1, -1, // 頂点2
1, -1, -1 // 頂点3
];
const indicesOfFaces = [
/* 面のインデックス配列 */
2, 1, 0, // 面0
0, 3, 2, // 面1
1, 3, 0, // 面2
2, 3, 1 // 面3
];
geometry = new THREE.PolyhedronGeometry(
verticesOfPolyhedron,
indicesOfFaces
);
break;
case "Ring":
geometry = new THREE.RingGeometry();
break;
case "Shape":
geometry = new THREE.ShapeGeometry();
break;
case "Sphere":
geometry = new THREE.SphereGeometry();
break;
case "Tetrahedron":
geometry = new THREE.TetrahedronGeometry();
break;
case "Torus":
geometry = new THREE.TorusGeometry();
break;
case "TorusKnot":
geometry = new THREE.TorusKnotGeometry();
break;
case "Tube":
geometry = new THREE.TubeGeometry();
break;
case "Wireframe":
const wireframeBaseGeometry = new THREE.BoxGeometry();
geometry = new THREE.WireframeGeometry(wireframeBaseGeometry);
break;
default:
console.warn("Unknown geometry type: " + geometryType);
return;
}
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
function animate() {
requestAnimationFrame(animate);
cube.rotation.x = cube.rotation.x + 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
}シーン、カメラ、レンダラーの設定
Scene, PerspectiveCamera, WebGLRendererのインスタンスを作成します。 カメラの位置を設定し、レンダラーのサイズをウィンドウのサイズに合わせます。ジオメトリの生成
引数geometryTypeに基づいて、さまざまなタイプのジオメトリ（Box, Sphere, Cylinderなど）を生成します。 ジオメトリのタイプはswitch文で管理されており、各ケースは特定のジオメトリを作成します。 今回はここがメインですのでコード解説します。let geometry;
switch (geometryType) {
case "Box":
geometry = new THREE.BoxGeometry();
break;
case "Capsule":
geometry = new THREE.CapsuleGeometry();
break;
case "Circle":
geometry = new THREE.CircleGeometry();
break;
case "Cone":
geometry = new THREE.ConeGeometry();
break;
case "Cylinder":
geometry = new THREE.CylinderGeometry();
break;
case "Dodecahedron":
geometry = new THREE.DodecahedronGeometry();
break;
case "Edges":
const baseGeometry = new THREE.BoxGeometry();
geometry = new THREE.EdgesGeometry(baseGeometry);
break;
case "Extrude":
geometry = new THREE.ExtrudeGeometry();
break;
case "Icosahedron":
geometry = new THREE.IcosahedronGeometry();
break;
case "Lathe":
geometry = new THREE.LatheGeometry();
break;
case "Octahedron":
geometry = new THREE.OctahedronGeometry();
break;
case "Plane":
geometry = new THREE.PlaneGeometry(2, 2);
break;
case "Polyhedron":
const verticesOfPolyhedron = [
/* 頂点の配列 */
1, 1, 1, // 頂点0
-1, -1, 1, // 頂点1
-1, 1, -1, // 頂点2
1, -1, -1 // 頂点3
];
const indicesOfFaces = [
/* 面のインデックス配列 */
2, 1, 0, // 面0
0, 3, 2, // 面1
1, 3, 0, // 面2
2, 3, 1 // 面3
];
geometry = new THREE.PolyhedronGeometry(
verticesOfPolyhedron,
indicesOfFaces
);
break;
case "Ring":
geometry = new THREE.RingGeometry();
break;
case "Shape":
geometry = new THREE.ShapeGeometry();
break;
case "Sphere":
geometry = new THREE.SphereGeometry();
break;
case "Tetrahedron":
geometry = new THREE.TetrahedronGeometry();
break;
case "Torus":
geometry = new THREE.TorusGeometry();
break;
case "TorusKnot":
geometry = new THREE.TorusKnotGeometry();
break;
case "Tube":
geometry = new THREE.TubeGeometry();
break;
case "Wireframe":
const wireframeBaseGeometry = new THREE.BoxGeometry();
geometry = new THREE.WireframeGeometry(wireframeBaseGeometry);
break;
default:
console.warn("Unknown geometry type: " + geometryType);
return;
}