初めてのThree.js：3Dグラフィックス入門ガイド

Three.jsは、JavaScriptを使ってブラウザ上で簡単に3Dグラフィックスを描画するためのライブラリです。初めてThree.jsを触る方のために、基本的なセットアップから簡単な3Dシーンの作成までのステップを紹介します。

Three.jsの基本

Three.jsを使うと、HTML5のCanvas要素を利用して高度な3D描画が可能になります。WebGLを抽象化し、扱いやすいAPIを提供してくれるため、初心者でも手軽に3Dシーンを作成できます。

環境のセットアップ

まずは、Three.jsの環境を整えます。以下の手順でセットアップを行いましょう。

HTMLファイルの作成

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Three.js 入門</title>
</head>
<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script src="main.js"></script>
</body>
</html>

JavaScriptファイルの作成

main.jsというファイルを作成し、基本的なThree.jsのセットアップを行います。

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

コードの解説

シーンの作成javascriptコードをコピーするconst scene = new THREE.Scene(); Three.jsのシーンを作成します。シーンは、カメラやライト、オブジェクトを含む3D空間です。
カメラの作成javascriptコードをコピーするconst camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.z = 5; カメラは視点を決定します。ここでは視野角75度、アスペクト比をウィンドウサイズに設定し、近距離と遠距離のクリップ範囲を指定しています。
レンダラーの作成javascriptコードをコピーするconst renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); WebGLレンダラーを作成し、サイズをウィンドウ全体に設定します。レンダラーのDOM要素をHTMLのbodyに追加します。
ジオメトリとマテリアルの作成javascriptコードをコピーするconst geometry = new THREE.BoxGeometry(); const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); const cube = new THREE.Mesh(geometry, material); scene.add(cube); ボックスジオメトリと基本的なマテリアルを作成し、メッシュに結合します。メッシュはシーンに追加されます。
アニメーションループjavascriptコードをコピーするfunction animate() { requestAnimationFrame(animate); cube.rotation.x += 0.01; cube.rotation.y += 0.01; renderer.render(scene, camera); } animate(); requestAnimationFrameを使用してアニメーションループを作成します。キューブを回転させ、シーンをカメラからレンダリングします。

まとめ

このガイドでは、Three.jsを使った基本的な3Dシーンのセットアップと簡単なアニメーションの作成方法を紹介しました。Three.jsを学ぶことで、ブラウザ上でリッチな3Dグラフィックスを実現することができます。さらに詳しく学びたい場合は、公式ドキュメントやオンラインチュートリアルを参照してください。

Three.jsの基本

環境のセットアップ

コードの解説

まとめ

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル