💡

実践Three.js：クリエイティブコーディングの世界

に公開
WebGL
Three.js
Creative Coding
webdevelopment
interactiveart
tech

実践 Three.js: クリエイティブコーディングの世界

はじめに

Three.jsは、ウェブブラウザ上でインタラクティブな3Dグラフィックスを作成するためのオープンソースJavaScriptライブラリです。その直感的なAPIと強力な機能により、Three.jsはWeb開発者やデザイナーにとって、没入型の3D体験を作成するための貴重なツールとなっています。この技術記事では、Three.jsの基礎を把握し、そのクリエイティブな可能性を探求します。

Three.jsのセットアップ

プロジェクトにThree.jsを追加するには、以下のコードスニペットをHTMLドキュメントの<head>セクションに貼り付けます。

<script src="https://threejs.org/build/three.min.js"></script>

これにより、Three.jsの完全なライブラリがドキュメントに読み込まれます。

シーンの作成

シーンは、3Dオブジェクト、照明、カメラを含む3D環境を表します。Three.jsを使用してシーンを作成するには、以下のコードを使用します。

const scene = new THREE.Scene();

カメラの設定

シーン内の3Dオブジェクトをレンダリングするには、カメラが必要です。Three.jsは、透視カメラと平行カメラという2種類の基本的なカメラタイプを提供しています。ここでは、透視カメラを使用します。

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 2;

このコードでは、視野角が75度で、アスペクト比がウィンドウの幅と高さの比率、近平面が0.1、遠平面が1000の透視カメラを作成します。さらに、カメラの位置をz軸方向に2に設定して、シーンを見渡すようにしています。

レンダラーの設定

レンダラーは、シーンを2Dキャンバスにレンダリングする責任があります。Three.jsは、WebGLレンダラーとCanvasレンダラーという2種類のレンダラーを提供しています。ここでは、WebGLレンダラーを使用します。

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);

このコードでは、WebGLレンダラーを作成し、そのサイズをウィンドウの幅と高さに設定しています。さらに、ピクセル密度をデバイスのピクセル密度に設定して、高精細なレンダリングを実現しています。

オブジェクトの作成

シーンに3Dオブジェクトを追加するには、メッシュを使用します。メッシュは、ジオメトリとマテリアルの組み合わせです。

ジオメトリの作成

ジオメトリは、3Dオブジェクトの形を定義します。Three.jsは、立方体、球体、トーラスなどのさまざまな組み込みジオメトリを提供しています。ここでは、立方体を作成します。

const geometry = new THREE.BoxGeometry(1, 1, 1);

マテリアルの作成

マテリアルは、オブジェクトの表面特性を定義します。Three.jsは、基本マテリアル、phongマテリアル、lambertマテリアルなどのさまざまな組み込みマテリアルを提供しています。ここでは、基本マテリアルを使用します。

const material = new THREE.MeshBasicMaterial({color: 0x00ff00});

メッシュの作成

メッシュは、ジオメトリとマテリアルを組み合わせて作成します。

const cube = new THREE.Mesh(geometry, material);

シーンへのオブジェクトの追加

オブジェクトを作成したら、シーンに追加できます。

scene.add(cube);

アニメーション

シーンをアニメーション化するには、レンダリングループを使用します。レンダリングループは、ブラウザが更新されるたびにシーンをレンダリングします。

function animate() {
  requestAnimationFrame(animate);

  // オブジェクトのアニメーション処理

  renderer.render(scene, camera);
}
animate();

照明の追加

シーンに照明を追加すると、オブジェクトに影やハイライトが加わり、リアリズムが向上します。Three.jsは、環境光、平行光、スポットライトなどのさまざまな組み込み照明を提供しています。

const light = new THREE.AmbientLight(0x404040);
scene.add(light);

このコードでは、環境光を追加し、シーン全体を均一に照らしています。

ユーザーインターフェース

Three.jsには、ユーザーがシーンを操作するための組み込みのユーザーインターフェース要素が用意されていません。ユーザーインターフェースを追加するには、OrbitControlsライブラリなどの外部ライブラリを使用する必要があります。

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';

const controls = new OrbitControls(camera, renderer.domElement);

このコードでは、OrbitControlsライブラリを読み込み、カメラを操作するためのユーザーインターフェースを追加しています。

その他の機能

Three.jsには、創造性をさらに向上させるために役立つ、他にも多くの機能が用意されています。

  • テクスチャ: オブジェクトの表面にテクスチャ画像を追加できます。
  • シェーダー: カスタムシェーディングやポスト処理効果を作成できます。
  • 物理シミュレーション: 物理法則に従ってオブジェクトをシミュレートできます。
  • VR/ARサポート: 仮想現実と拡張現実の体験を作成できます。

結論

Three.jsは、Webブラウザ上でインタラクティブな3Dグラフィックスを作成するための強力で用途の広いライブラリです。その直感的なAPIと柔軟なアーキテクチャにより、開発者は印象的な3D体験を簡単に作成できます。この技術記事では、Three.jsの基礎を理解し、その能力を実践する上で役立つ基本的な概念を取り上げました。

次のステップ

Three.jsの習得をさらに深めるには、次のリソースを参照することをお勧めします。

GitHubで編集を提案

Discussion