Zenn
🐈

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

に公開
Three.js
tech

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

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

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

これは楽しいぞ！

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

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

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

// 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とか知らんやつは泣きながら覚えろ

# まず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」だ。コピペして動かせ。

// シーン作る（舞台みたいなもん）
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：真っ黒画面

// ライトを忘れてる（あるある）
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(0, 1, 1);
scene.add(light);

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

罠2：重すぎて死ぬ

// ポリゴン数減らせ
geometry = new THREE.SphereGeometry(5, 32, 32); // 細かすぎ
geometry = new THREE.SphereGeometry(5, 16, 16); // これでいい

罠3：数学アレルギー発症

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

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

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

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で表示（フォント読み込み必須）

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. グリッチエフェクト（バグった感じのやつ）

// ポストプロセシング使う（ちょっと上級）
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()を忘れるな

// メモリリークで死ぬ
geometry.dispose();
material.dispose();
texture.dispose();

2. レンダリング最適化

// 見えないものは描画しない
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の沼で。

Discussion