Three.js | 3Dグラフィックスを描く | 複数の実例で理解するJavaScriptライブラリ解説

スポンサーリンク

スポンサーリンク

Three.jsについての解説

Three.jsは、WebGLを簡単に扱うことができるJavaScriptライブラリです。3Dグラフィックスをブラウザ上で描画するために広く使用され、立方体、球、テキスト、テクスチャなど、多様な3Dオブジェクトを作成することができます。

Three.jsの実装方法

Three.jsを使用するためには、以下のコードを<head>内に記述してライブラリを読み込みます。

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>

Three.jsの特徴

特徴 説明
WebGLをラップ Three.jsは、複雑なWebGLの操作を簡単にするラッパーライブラリです。
3Dグラフィックスの描画 Three.jsを使うことで、ブラウザ上で立体的なオブジェクトを描画することができます。
簡単なカメラ操作 カメラの視点やオブジェクトの回転・移動を簡単に設定できます。
テクスチャ対応 オブジェクトに画像をマッピングしてリアルな描画を行うことが可能です。

プロパティとその値の一覧表

プロパティ名 説明 値の例
THREE.Scene() 3D空間を表現するシーンを作成します。 new THREE.Scene()
THREE.PerspectiveCamera() 視野角、アスペクト比、描画距離を設定するカメラを作成します。 new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
THREE.Mesh() ジオメトリとマテリアルを使ってオブジェクトを描画します。 new THREE.Mesh(geometry, material)
THREE.BoxGeometry() 立方体のジオメトリを生成します。 new THREE.BoxGeometry()
THREE.WebGLRenderer() WebGLを使って3Dグラフィックスを描画します。 new THREE.WebGLRenderer()

立方体を表示する例

実行例

HTMLとJavaScriptコード


// 立方体を表示するHTML要素
<div id="cubeExample"></div>

// Three.jsで立方体を表示
<script>
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, 600); // 高さ600pxに設定
document.getElementById('cubeExample').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);

camera.position.z = 5;

function animate() {
    requestAnimationFrame(animate);
    cube.rotation.x += 0.01; // X軸方向に回転
    cube.rotation.y += 0.01; // Y軸方向に回転
    renderer.render(scene, camera);
}
animate();
</script>

解説

この立方体の例では、Three.jsを使って立方体を3D空間に描画しています。アニメーションを用いて、X軸とY軸方向に回転させることで、立体感を表現しています。

異なる色を持つ立方体を表示する例

実行例

HTMLとJavaScriptコード


// 異なる色を持つ立方体を表示するHTML要素
<div id="colorCubeExample"></div>

// Three.jsで異なる色の立方体を表示
<script>
const sceneColorCube = new THREE.Scene();
const cameraColorCube = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const rendererColorCube = new THREE.WebGLRenderer();
rendererColorCube.setSize(window.innerWidth, 600); // 高さ600pxに設定
document.getElementById('colorCubeExample').appendChild(rendererColorCube.domElement);

// 各面に異なる色を持つ立方体の作成
const geometryColorCube = new THREE.BoxGeometry();
const materials = [
    new THREE.MeshBasicMaterial({ color: 0xff0000 }), // 赤
    new THREE.MeshBasicMaterial({ color: 0x00ff00 }), // 緑
    new THREE.MeshBasicMaterial({ color: 0x0000ff }), // 青
    new THREE.MeshBasicMaterial({ color: 0xffff00 }), // 黄色
    new THREE.MeshBasicMaterial({ color: 0xff00ff }), // 紫
    new THREE.MeshBasicMaterial({ color: 0x00ffff })  // 水色
];
const colorCube = new THREE.Mesh(geometryColorCube, materials);
sceneColorCube.add(colorCube);

cameraColorCube.position.z = 5;

function animateColorCube() {
    requestAnimationFrame(animateColorCube);
    colorCube.rotation.x += 0.01; // X軸方向に回転
    colorCube.rotation.y += 0.01; // Y軸方向に回転
    rendererColorCube.render(sceneColorCube, cameraColorCube);
}
animateColorCube();
</script>

解説

この例では、各面に異なる色を持つ立方体を表示しています。色の変化によって回転が視覚的に確認しやすくなっています。

テキストを表示する例

実行例

HTMLとJavaScriptコード


// テキストを表示するHTML要素
<div id="textExample"></div>

// Three.jsでテキストを表示
<script>
const sceneText = new THREE.Scene();
const cameraText = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const rendererText = new THREE.WebGLRenderer();
rendererText.setSize(window.innerWidth, 600); // 高さ600pxに設定
document.getElementById('textExample').appendChild(rendererText.domElement);

const loader = new THREE.FontLoader();
loader.load('https://threejs.org/examples/fonts/helvetiker_regular.typeface.json', function (font) {
    const geometryText = new THREE.TextGeometry('Hello Three.js!', {
        font: font,
        size: 1,
        height: 0.2,
    });
    const materialText = new THREE.MeshBasicMaterial({ color: 0xffffff });
    const textMesh = new THREE.Mesh(geometryText, materialText);
    sceneText.add(textMesh);
    cameraText.position.z = 5;

    function animateText() {
        requestAnimationFrame(animateText);
        textMesh.rotation.y += 0.01; // Y軸方向に回転
        rendererText.render(sceneText, cameraText);
    }
    animateText();
});
</script>

解説

この例では、Three.jsの`TextGeometry`を使って3Dテキストを作成し、画面に表示しています。Y軸方向に回転させて、立体的な表現をしています。

Three.jsの公式サイト

Three.js – JavaScript 3D Library
threejs.org
スポンサーリンク