JavaScript

Three.js is an open-source library that allows you to easily render 3D graphics in a browser using JavaScript.

Three.js

　Three.jsは、JavaScriptで3Dグラフィックスを表示するためのオープンソースのライブラリです。これにより、WebGLを簡単に扱うことができ、ブラウザ上で3Dモデルやアニメーションをレンダリングすることができます。

基本的な特徴

シーン（Scene）
3Dオブジェクトを配置する空間です。シーンにはカメラやライト、メッシュなどのオブジェクトを追加します。
カメラ（Camera）
シーンをどのように見るかを決定します。Three.jsには様々な種類のカメラがありますが、一般的には PerspectiveCamera（透視カメラ）がよく使われます。
レンダラー（Renderer）
シーンとカメラを基に3Dグラフィックスを描画します。WebGLRendererが最も一般的です。
ジオメトリ（Geometry）
3Dオブジェクトの形状を定義します。BoxGeometry、SphereGeometryなど、様々なプリミティブ形状があります。
マテリアル（Material）
オブジェクトの表面の見た目を定義します。MeshBasicMaterial、MeshStandardMaterialなどがあります。
メッシュ（Mesh）
ジオメトリとマテリアルを組み合わせた3Dオブジェクトです。

基本的な使い方

JavaScript

// シーンを作成
const scene = new THREE.Scene();

// カメラを作成
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

// レンダラーを作成
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// ジオメトリとマテリアルを作成
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });

// メッシュを作成してシーンに追加
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// アニメーションループを作成
function animate() {
	requestAnimationFrame(animate);

	// メッシュを回転
	cube.rotation.x += 0.01;
	cube.rotation.y += 0.01;

	// シーンとカメラを基に描画
	renderer.render(scene, camera);
}

// アニメーションを開始
animate();

利用例

　Three.jsは、以下のような用途でよく利用されます。

　Three.jsを使うことで、Web開発者は複雑な3Dグラフィックスを簡単に作成し、ブラウザ上で実行することができます。

Sample

HTML

<div>
	<canvas id="myCanvas"></canvas>
</div>

CSS

div {
	display: flex;
}
div canvas{
	margin: 1em auto;
}

JavaScript

window.addEventListener('DOMContentLoaded', init);

function init() {
	const width = 230;
	const height = 230;

	// レンダラーを作成
	const renderer = new THREE.WebGLRenderer({
		canvas: document.querySelector('#myCanvas')
	});
	renderer.setPixelRatio(window.devicePixelRatio);
	renderer.setSize(width, height);

	// シーンを作成
	const scene = new THREE.Scene();

	// カメラを作成
	const camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
	camera.position.set(0, 0, +1000);

	// 箱を作成
	const geometry = new THREE.BoxGeometry(200, 200, 200);
	const material = new THREE.MeshStandardMaterial({color: 0x0000FF});
	const box = new THREE.Mesh(geometry, material);
	scene.add(box);

	// 平行光源
	const light = new THREE.DirectionalLight(0xFFFFFF);
	light.intensity = 2; // 光の強さを倍に
	light.position.set(1, 1, 1);
	// シーンに追加
	scene.add(light);

	// 初回実行
	tick();

	function tick() {
		requestAnimationFrame(tick);

		// 箱を回転させる
		box.rotation.x += 0.01;
		box.rotation.y += 0.01;

		// レンダリング
		renderer.render(scene, camera);
	}
}