Three.jsで3Dグラフィックスを作成する – JavaScriptで始めるプログラミング

Three.jsで3Dグラフィックスを作成する – JavaScriptで始めるプログラミング

Web開発の分野で3Dレンダリング技術が急速に進化し続けています。Three.jsは、その中でも人気のあるJavaScriptライブラリの一つです。さらに、このライブラリを使用すると、ウェブサイトに高度な3Dグラフィックスを簡単に追加することができます。この記事では、Three.js(外部リンク)を使用して3Dグラフィックスを作成する基本的な手順について説明します。

Three.jsのインストール

まずは、Three.jsをインストールする必要があります。npmを使用してインストールする方法は以下のとおりです。

npm install three

基本的な3Dシーンの作成

Three.jsをインストールしたら、次に基本的な3Dシーンを作成します。以下のコードは、シーン、カメラ、およびレンダラーを生成する方法を示しています。

import * as THREE from 'three';

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);

また、camera.position.zを調整してカメラの位置を設定します。

camera.position.z = 5;

ジオメトリーの追加

次に、3Dオブジェクトをシーンに追加するためにジオメトリーとマテリアルを作成します。例えば、立方体を追加するには以下のコードを使用します。

const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
アニメーションループの設定

3Dシーンをレンダリングし続けるためには、アニメーションループを設定する必要があります。以下のコードを追加して、継続的にシーンをレンダリングします。

function animate() {
    requestAnimationFrame(animate);
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    renderer.render(scene, camera);
}
animate();
まとめ

以上のステップにより、簡単な3Dシーンを作成し、アニメーション化することができます。Three.jsは非常に強力であり、複雑な3Dシーンを作成するための多くの機能を提供します。公式ドキュメンテーション(外部リンク)を参考にして、さらに深く学ぶことをお勧めします。

「プログラミングは芸術である。」

参考文献

コメントを残す