Three.jsのジオメトリーの種類

Three.jsで用意されているジオメトリーのうち、いくつかの表示を試してみます。

サンプルコード

まずジオメトリーを試す前に、Three.jsのそれ以外の部分のコードを用意します。

import * as THREE from 'three';
import {OrbitControls} from 'three/addons/controls/OrbitControls.js';

// シーンの作成
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);

// カメラ操作の設定
const controls = new OrbitControls(camera, renderer.domElement);

// カメラの位置変更と更新
camera.position.set(200, 100, 200);
controls.update();

// オブジェクトの作成
// ここに追加

function animate() {
	renderer.render(scene, camera);
}
renderer.setAnimationLoop(animate);

23行目部分にジオメトリーの追加などを行っていきます。
今回は枠組みが分かりやすいように、materialのwireframeをtrueにして確認します。

BoxGeometry

BoxGeometryは直方体です。
引数は6つあり、1つ目は幅(X軸)、2つ目は高さ(Y軸)、3つ目は奥行き(Z軸)でそれぞれの初期値は1になります。

// オブジェクトの作成
const geometry = new THREE.BoxGeometry(100, 100, 100);
const material = new THREE.MeshBasicMaterial({
  color: "orange"
});
material.wireframe = true;
const object = new THREE.Mesh(geometry, material);
scene.add(object);

BoxGeometryのデモページ

SphereGeometry

SphereGeometryは球体です。
引数は7つあり、1つ目は半径で初期値は1になります。

// オブジェクトの作成
const geometry = new THREE.SphereGeometry(100);
const material = new THREE.MeshBasicMaterial({
  color: "orange"
});
material.wireframe = true;
const object = new THREE.Mesh(geometry, material);
scene.add(object);

SphereGeometryのデモページ

PlaneGeometry

PlaneGeometryは平面の四角形です。
引数は4つあり、1つ目が幅(X軸)、2つ目が高さ(Y軸)で、それぞれ初期値は1です。

// オブジェクトの作成
const geometry = new THREE.PlaneGeometry(100, 100);
const material = new THREE.MeshBasicMaterial({
  color: "orange"
});
material.wireframe = true;
const object = new THREE.Mesh(geometry, material);
scene.add(object);

PlaneGeometryのデモページ

CircleGeometry

CircleGeometryは平面の円や正多角形です。
引数は4つあり、1つ目が半径で初期値は1、2つ目がセグメントの数で初期値は32です。

// オブジェクトの作成
const geometry = new THREE.CircleGeometry(100, 32);
const material = new THREE.MeshBasicMaterial({
  color: "orange"
});
material.wireframe = true;
const object = new THREE.Mesh(geometry, material);
scene.add(object);

CircleGeometryのデモページ

2つ目の引数は内側の三角形の数で、例えば引数を6にすると正六角形になります。

// オブジェクトの作成
const geometry = new THREE.CircleGeometry(100, 6);
const material = new THREE.MeshBasicMaterial({
  color: "orange"
});
material.wireframe = true;
const object = new THREE.Mesh(geometry, material);
scene.add(object);

CircleGeometryのデモページ2

TetrahedronGeometry

TetrahedronGeometryは四面体です。
引数は2つで、1つ目が半径で初期値が1になります。

// オブジェクトの作成
const geometry = new THREE.TetrahedronGeometry(100);
const material = new THREE.MeshBasicMaterial({
  color: "orange"
});
material.wireframe = true;
const object = new THREE.Mesh(geometry, material);
scene.add(object);

TetrahedronGeometryのデモページ

OctahedronGeometry

OctahedronGeometryは八面体です。
引数は2つで、1つ目が半径で初期値が1になります。

// オブジェクトの作成
const geometry = new THREE.OctahedronGeometry(100);
const material = new THREE.MeshBasicMaterial({
  color: "orange"
});
material.wireframe = true;
const object = new THREE.Mesh(geometry, material);
scene.add(object);

OctahedronGeometryのデモページ

DodecahedronGeometry

DodecahedronGeometryは十二面体です。
引数は2つで、1つ目が半径で初期値が1になります。

// オブジェクトの作成
const geometry = new THREE.DodecahedronGeometry(100);
const material = new THREE.MeshBasicMaterial({
  color: "orange"
});
material.wireframe = true;
const object = new THREE.Mesh(geometry, material);
scene.add(object);

DodecahedronGeometryのデモページ

IcosahedronGeometry

IcosahedronGeometryは二十面体です。
引数は2つで、1つ目が半径で初期値が1になります。

// オブジェクトの作成
const geometry = new THREE.IcosahedronGeometry(100);
const material = new THREE.MeshBasicMaterial({
  color: "orange"
});
material.wireframe = true;
const object = new THREE.Mesh(geometry, material);
scene.add(object);

IcosahedronGeometryのデモページ

ConeGeometry

ConeGeometryは円錐です。
引数は7つで、1つ目が底部の半径、2つ目が高さで、それぞれ初期値は1です。

// オブジェクトの作成
const geometry = new THREE.ConeGeometry(100, 200);
const material = new THREE.MeshBasicMaterial({
  color: "orange"
});
material.wireframe = true;
const object = new THREE.Mesh(geometry, material);
scene.add(object);

ConeGeometryのデモページ

CylinderGeometry

CylinderGeometryは円柱です。
引数は8つあり、1つ目が上部の半径、2つ目が下部の半径、3つ目が高さで、それぞれ初期値は1です。

// オブジェクトの作成
const geometry = new THREE.CylinderGeometry(100, 100, 200);
const material = new THREE.MeshBasicMaterial({
  color: "orange"
});
material.wireframe = true;
const object = new THREE.Mesh(geometry, material);
scene.add(object);

CylinderGeometryデモページ

CapsuleGeometry

CapsuleGeometryはカプセル型です。
引数は4つで、1つ目が半径、2つ目が中央部分の高さで、それぞれ初期値は1です。

// オブジェクトの作成
const geometry = new THREE.CapsuleGeometry(100, 200);
const material = new THREE.MeshBasicMaterial({
  color: "orange"
});
material.wireframe = true;
const object = new THREE.Mesh(geometry, material);
scene.add(object);

CapsuleGeometryのデモページ

TorusGeometry

TorusGeometryはドーナツ型です。
引数は5つあり、1つ目が中心から周囲の輪郭の中心までの半径で初期値は1、2つ目が輪郭部分の半径で初期値は0.4になります。

// オブジェクトの作成
const geometry = new THREE.TorusGeometry(100, 20);
const material = new THREE.MeshBasicMaterial({
  color: "orange"
});
material.wireframe = true;
const object = new THREE.Mesh(geometry, material);
scene.add(object);

TorusGeometryのデモページ

RingGeometry

RingGeometryは平面のリング状です。
引数は6つあり、1つ目が内側の半径で初期値は0.5、2つ目が全体の半径で初期値は1になります。

// オブジェクトの作成
const geometry = new THREE.RingGeometry(20, 50);
const material = new THREE.MeshBasicMaterial({
  color: "orange"
});
material.wireframe = true;
const object = new THREE.Mesh(geometry, material);
scene.add(object);

RingGeometryのデモページ