日本語

WebGLチュートリアル

WebGL アプリケーション

WebGLの例

WebGL - インタラクティブな立方体

こんにちは、将来のプログラマーさんたち！今日は、WebGLの世界に興味深い旅に出ます。マウスで回転できるインタラクティブな立方体を作成します。コードを書いたことがない人も心配しないでください。turtleの忍耐強さを持って、ステップバイステップで案内します。さあ、潜りましょう！

WebGL - Interactive Cube

基本を理解する

立方体を描く前に、基本的な概念について簡単に説明します。

WebGLとは？

WebGL（Web Graphics Library）は、ブラウザ内で3DグラフィックスをレンダリングするためのJavaScript APIです。あなたのウェブページに驚くようなビジュアルエフェクトを与えるスーパーパワーのようなものです！

必要なもの

  1. テキストエディタ（Notepad++やVisual Studio Codeなど）
  2. ウェブブラウザ（Chrome、Firefox、または他の現代ブラウザ）
  3. 少々の好奇心と少しの忍耐力！

例 - インタラクティブな立方体を描く

ステップ1: HTMLの設定

まず、ウェブページの骨組みを作成します。テキストエディタを開き、interactive_cube.htmlという新しいファイルを作成します。以下のコードをコピー＆ペーストします：

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>WebGL インタラクティブな立方体</title>
<style>
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<canvas id="myCanvas"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script>
// WebGLのコードをここに記述します
</script>
</body>
</html>

これでHTML構造が設定され、Three.jsライブラリが含まれており、WebGLの作業がずっと楽になります。

ステップ2: シーンの作成

次に、JavaScriptを追加して3Dシーンを作成します。スクリプトタグ内のコメントを以下のコードに置き換えます：

// シーン、カメラ、レンダラーを設定
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('myCanvas') });
renderer.setSize(window.innerWidth, window.innerHeight);

// 立方体を作成
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;

これを分解すると：

  • シーンを作成し、3Dオブジェクトのステージのようにします。
  • カメラは視点を定義します。
  • レンダラーはシーンを描画する責任を持ちます。
  • BoxGeometryを使って立方体を作成し、緑色を設定します。
  • 最後に、カメラを中心から5ユニット離れた位置に設定します。

ステップ3: 立方体のアニメーション

立方体を回転させるために、アニメーションループを追加します。前のブロックの後ろに以下のコードを追加します：

function animate() {
requestAnimationFrame(animate);

cube.rotation.x += 0.01;
cube.rotation.y += 0.01;

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

この関数は繰り返し呼び出され、各フレームで立方体を少し回転させ、シーンを再レンダリングします。

ステップ4: インタラクティブにする

次に、マウスで立方体を回転させることができるインタラクティブな要素を追加します。animate()関数の前に以下のコードを追加します：

let isDragging = false;
let previousMousePosition = { x: 0, y: 0 };

document.addEventListener('mousedown', () => isDragging = true);
document.addEventListener('mouseup', () => isDragging = false);
document.addEventListener('mousemove', (e) => {
if (isDragging) {
const deltaMove = {
x: e.offsetX - previousMousePosition.x,
y: e.offsetY - previousMousePosition.y
};

cube.rotation.y += deltaMove.x * 0.01;
cube.rotation.x += deltaMove.y * 0.01;
}

previousMousePosition = {
x: e.offsetX,
y: e.offsetY
};
});

このコードは、マウス操作のイベントリスナーを追加し、クリック＆ドラッグで立方体を回転させることができます。

ステップ5: ピッazzazzを追加する

立方体を少し面白くするために、各面に異なる色を設定します。マテリアル生成行を以下のように置き換えます：

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 cube = new THREE.Mesh(geometry, materials);

今、立方体の各面が異なる色を持っています！

結論

おめでとうございます！あなたは刚刚、WebGLを使ってインタラクティブな3D立方体を作成しました。これは3Dグラフィックスプログラミングの冰山の一角です。あなたが旅を続ける中で、もっと素晴らしいものが見つかるでしょう。

覚えておいてください、コードを学ぶことは自転車を乗ることと似ています。最初は不安定かもしれませんが、練習を重ねればすぐにスムーズに乗れるようになります！

以下に、私たちが主に使用したメソッドの表を示します：

メソッド 説明
THREE.Scene() 新しい3Dシーンを作成します
THREE.PerspectiveCamera() カメラの視点を設定します
THREE.WebGLRenderer() シーンのレンダリングをhandlesします
THREE.BoxGeometry() 立方体の幾何形状を作成します
THREE.MeshBasicMaterial() 立方体のマテリアルを定義します
THREE.Mesh() 幾何形状とマテリアルを組み合わせます
requestAnimationFrame() アニメーションループを呼び出します

実験を続け、学び続け、最も重要なのは、楽しむことです！WebGLの世界はあなたのものですし、探索するための装備を手に入れました。お楽しみに！

Credits: Image by storyset

前のチュートリアル:
WebGL - キューブの回転