Webデザイナーのためのthree.js入門

## はじめに：なぜThree.jsから逃げるのか

「Webで3Dとか重いだけや！何もメリットない。やめろ。」って思ってたけど、
気づいたらThree.jsの沼にハマってた。

**結論から言うと、Three.js覚えたら幸せになった。**

これは楽しいぞ！



## Three.jsって何なの？死ぬの？

Three.jsは簡単に言うと「**ブラウザで3Dグリグリ動かせる魔法のライブラリ**」。

WebGLっていうクッソ難しい技術を、まるで**jQuery感覚で使えるようにした神ツール**なんだわ。

```javascript
// WebGL生書きだとこんな感じ（地獄）
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
// あと100行くらい続く...ｵﾜﾀ＼(^o^)／

// Three.jsだとこれだけ
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
```

**は？これだけ？**って思うだろ？そうなんだよ、これだけなんだよ。

## なぜWebデザイナーがThree.jsを覚えるべきなのか

### 1. 差別化できる（マジで）

「私、Photoshop使えます！」→ **誰でも使えるわｗｗｗ**
「私、Three.js使えます！」→ **！？**

この差よ。

### 2. 単価が違う

- 普通のLP制作：5〜30万
- Three.js使ったLP制作：30〜100万

**倍率ドン！さらに倍！**

### 3. 実は簡単（大嘘）

いや、嘘じゃないんだけど、最初はちょっとキツい。
でも**数学アレルギーでも大丈夫**。四則演算できれば何とかなる。

## 環境構築：npmとか知らんやつは泣きながら覚えろ

```bash
# まずnpmインストールしろ（してない奴は反省しろ）
npm init -y
npm install three

# もしくはCDNでズルする（初心者はこっち推奨）
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
```

## Hello World的なやつ（立方体クルクル）

これがThree.js界の「Hello World」だ。コピペして動かせ。

```javascript
// シーン作る（舞台みたいなもん）
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);

// 立方体作る
const geometry = new THREE.BoxGeometry(1, 1, 1);
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;
    cube.rotation.y += 0.01;
    
    renderer.render(scene, camera);
}
animate();
```

**おめでとう！これでお前も3Dエンジニアだ！**（大嘘）

## Three.jsの三種の神器

### 1. Scene（シーン）
舞台。ここに全部置く。**何も置かないと真っ黒で泣く。**

### 2. Camera（カメラ）
お前の視点。これがないと**何も見えなくて泣く。**

### 3. Renderer（レンダラー）
実際に描画する係。これがないと**何も表示されなくて泣く。**

## よくある罠と対処法

### 罠1：真っ黒画面
```javascript
// ライトを忘れてる（あるある）
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(0, 1, 1);
scene.add(light);

// もしくはMeshBasicMaterialを使え（ライト不要）
```

### 罠2：重すぎて死ぬ
```javascript
// ポリゴン数減らせ
geometry = new THREE.SphereGeometry(5, 32, 32); // 細かすぎ
geometry = new THREE.SphereGeometry(5, 16, 16); // これでいい
```

### 罠3：数学アレルギー発症
```javascript
// 三角関数とか使わなくても動く（最初は）
// gsapとか使えば数学知らなくてもアニメーション作れる
gsap.to(cube.rotation, {
    x: Math.PI * 2,
    duration: 2,
    repeat: -1
});
```

## 実践：かっこいいエフェクト3選

### 1. パーティクルで宇宙っぽいやつ

```javascript
const particlesGeometry = new THREE.BufferGeometry();
const count = 5000;
const positions = new Float32Array(count * 3);

for(let i = 0; i < count * 3; i++) {
    positions[i] = (Math.random() - 0.5) * 10;
}

particlesGeometry.setAttribute('position', 
    new THREE.BufferAttribute(positions, 3)
);

const particlesMaterial = new THREE.PointsMaterial({
    color: 0xffffff,
    size: 0.1
});

const particles = new THREE.Points(particlesGeometry, particlesMaterial);
scene.add(particles);
```

**これでお前のサイトも宇宙だ！**

### 2. テキストを3Dで表示（フォント読み込み必須）

```javascript
const loader = new THREE.FontLoader();
loader.load('fonts/helvetiker_regular.typeface.json', (font) => {
    const geometry = new THREE.TextGeometry('ｷﾀ━━━(ﾟ∀ﾟ)━━━!!', {
        font: font,
        size: 1,
        height: 0.2,
        curveSegments: 12,
        bevelEnabled: true,
        bevelThickness: 0.03,
        bevelSize: 0.02,
        bevelOffset: 0,
        bevelSegments: 5
    });
    
    const material = new THREE.MeshNormalMaterial();
    const text = new THREE.Mesh(geometry, material);
    scene.add(text);
});
```

### 3. グリッチエフェクト（バグった感じのやつ）

```javascript
// ポストプロセシング使う（ちょっと上級）
import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';
import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js';
import { GlitchPass } from 'three/examples/jsm/postprocessing/GlitchPass.js';

const composer = new EffectComposer(renderer);
composer.addPass(new RenderPass(scene, camera));
composer.addPass(new GlitchPass());

// animate内でrenderer.renderの代わりに
composer.render();
```

## パフォーマンス最適化（重要）

### 1. dispose()を忘れるな
```javascript
// メモリリークで死ぬ
geometry.dispose();
material.dispose();
texture.dispose();
```

### 2. レンダリング最適化
```javascript
// 見えないものは描画しない
mesh.frustumCulled = true;

// LOD（遠いものは雑に描画）
const lod = new THREE.LOD();
lod.addLevel(highDetailMesh, 0);
lod.addLevel(lowDetailMesh, 50);
```

### 3. テクスチャサイズ
- 2の累乗にしろ（512x512、1024x1024とか）
- でかすぎるテクスチャは死

## まとめ：結局Three.jsやるべきなの？

**やれ。**

理由：
1. 差別化できる
2. 単価上がる
3. なんかカッコいい
4. 女子にモテる（要出典）

ただし：
- 最初は泣く
- バグで泣く
- パフォーマンスで泣く
- でも慣れたら楽しい

## 次のステップ

1. **公式ドキュメント読め**（英語だけど頑張れ）
2. **Three.js Journey**（有料だけど神）
3. **シェーダー勉強しろ**（沼）
4. **WebGPU対応に備えろ**（未来）

---



**追記1：** 「数学いらない」は嘘です。でも高校数学レベルでなんとかなる。

**追記2：** React Three Fiberっていうのもあるけど、まず生Three.js覚えろ。話はそれからだ。

## 宣伝
それじゃ、また会おう。Three.jsの沼で。