📦 その他コミュニティ

threejs-builder

Three.jsを使って、シーンの構成、照明、形状、素材、アニメーション、レスポンシブ対応まで含んだシンプルな3Dウェブアプリを簡単に作成し、ウェブコンテンツを魅力的に表現するSkill。

📜 元の英語説明(参考)

Creates simple Three.js web apps with scene setup, lighting, geometries, materials, animations, and responsive rendering. Use for: "Create a threejs scene/app/showcase" or when user wants 3D web content. Supports ES modules, modern Three.js r150+ APIs.

🇯🇵 日本人クリエイター向け解説

一言でいうと

※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。

⚡ おすすめ: コマンド1行でインストール(60秒)

下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。ダウンロード → 解凍 → 配置まで全自動。

🍎 Mac / 🐧 Linux

mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o threejs-builder.zip https://jpskill.com/download/17763.zip && unzip -o threejs-builder.zip && rm threejs-builder.zip

🪟 Windows (PowerShell)

$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/17763.zip -OutFile "$d\threejs-builder.zip"; Expand-Archive "$d\threejs-builder.zip" -DestinationPath $d -Force; ri "$d\threejs-builder.zip"

完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。

💾 手動でダウンロードしたい(コマンドが難しい人向け)

1. 下の青いボタンを押して threejs-builder.zip をダウンロード
2. ZIPファイルをダブルクリックで解凍 → threejs-builder フォルダができる
3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
4. Claude Code を再起動

⬇ .zip でダウンロード(推奨) ⬇ .skill 形式(上級者用) 元のソース ↗

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
- · macOS / Linux: ~/.claude/skills/
- · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →

最終更新: 2026-05-18
取得日時: 2026-05-18
同梱ファイル: 2

📖 Skill本文(日本語訳)

※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

[Skill 名] threejs-builder

Three.js Builder

最新の ES モジュールパターンを使用して、シンプルで高性能な Three.js Web アプリケーションを作成するための、特化したスキルです。

哲学: シーングラフのメンタルモデル

Three.js は シーングラフ 上に構築されています。これは、親の変換が子に影響を与えるオブジェクトの階層的なツリーです。このメンタルモデルを理解することが、効果的な 3D Web 開発の鍵となります。

Three.js アプリを作成する前に、以下を問いかけてください:

コアとなる視覚要素 は何ですか？ (geometry, shape, model)
ユーザーはどのような インタラクション を必要としますか？ (none, orbit controls, custom input)
どのような パフォーマンス 制約がありますか？ (mobile, desktop, WebGL capabilities)
どのような アニメーション がそれを生き生きとさせますか？ (rotation, movement, transitions)

コアとなる原則:

シーングラフを最初に: scene に追加されたものはすべてレンダリングされます。階層的な変換には Group を使用します。
プリミティブを構成要素として: 組み込みのジオメトリ (Box, Sphere, Torus) は、単純なユースケースの 80% をカバーします。
アニメーションを変換として: requestAnimationFrame または renderer.setAnimationLoop を使用して、時間経過とともに position/rotation/scale を変更します。
シンプルさによるパフォーマンス: オブジェクト、ドローコールを減らし、再利用可能なジオメトリ/マテリアルを使用します。

クイックスタート: 必須のセットアップ

最小限の HTML テンプレート

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Three.js App</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { overflow: hidden; background: #000; }
        canvas { display: block; }
    </style>
</head>
<body>
    <script type="module">
        import * as THREE from 'https://unpkg.com/three@0.160.0/build/three.module.js';

        // Scene setup
        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        const renderer = new THREE.WebGLRenderer({ antialias: true });

        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
        document.body.appendChild(renderer.domElement);

        // Your 3D content here
        // ...

        camera.position.z = 5;

        // Animation loop
        renderer.setAnimationLoop((time) => {
            renderer.render(scene, camera);
        });

        // Handle resize
        window.addEventListener('resize', () => {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        });
    </script>
</body>
</html>

Geometries

組み込みのプリミティブは、ほとんどの単純なアプリのニーズをカバーします。カスタムシェイプには BufferGeometry のみを使用してください。

一般的なプリミティブ:

BoxGeometry(width, height, depth) - 立方体、箱
SphereGeometry(radius, widthSegments, heightSegments) - ボール、惑星
CylinderGeometry(radiusTop, radiusBottom, height) - チューブ、シリンダー
TorusGeometry(radius, tube) - ドーナツ、リング
PlaneGeometry(width, height) - 床、壁、背景
ConeGeometry(radius, height) - スパイク、コーン
IcosahedronGeometry(radius, detail) - ローポリの球 (detail=0)

使用例:

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshStandardMaterial({ color: 0x44aa88 });
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

Materials

照明のニーズと視覚的なスタイルに基づいてマテリアルを選択してください。

マテリアルの選択ガイド:

MeshBasicMaterial - 照明なし、フラットな色。用途: UI、ワイヤーフレーム、非照明エフェクト
MeshStandardMaterial - PBR ライティング。リアルな表面のデフォルト
MeshPhysicalMaterial - clearcoat, transmission を備えた高度な PBR。ガラス、水
MeshNormalMaterial - デバッグ、法線に基づく虹色
MeshPhongMaterial - レガシー、光沢の制御。Standard よりも高速

一般的なマテリアルのプロパティ:

{
    color: 0x44aa88,           // Hex color
    roughness: 0.5,            // 0=glossy, 1=matte (Standard/Physical)
    metalness: 0.0,            // 0=non-metal, 1=metal (Standard/Physical)
    emissive: 0x000000,        // 自己発光色
    wireframe: false,          // エッジのみを表示
    transparent: false,        // 透明度を有効にする
    opacity: 1.0,              // 0=invisible, 1=opaque (transparent:true が必要)
    side: THREE.FrontSide      // FrontSide, BackSide, DoubleSide
}

Lighting

光がない = 真っ黒な画面 (BasicMaterial/NormalMaterial を除く)。

光の種類:

AmbientLight(intensity) - 全体的な基本照明。0.3〜0.5 を使用
DirectionalLight(color, intensity) - 太陽のような平行な光線。影を落とす
PointLight(color, intensity, distance) - 電球、全方向に放射
SpotLight(color, intensity, angle, penumbra) - フラッシュライト、光の円錐

典型的な照明のセットアップ:

const ambientLight = new THREE.AmbientLight(0xffffff, 0.4);
scene.add(ambientLight);

const mainLight = new THREE.DirectionalLight(0xffffff, 1);
mainLight.position.set(5, 10, 7);
scene.add(mainLight);

const fillLight = new THREE.DirectionalLight(0x88ccff, 0.5);
fillLight.position.set(-5, 0, -5);
scene.add(fillLight);

影 (高度、必要な場合に使用):

renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;

mainLight.castShadow = true;
mainLight.shadow.mapSize.width = 2048;
mainLight.shadow.mapSize.height = 2048;

mesh.castShadow = true;
mesh.receiveShadow = true;

Animation

アニメーションループを使用して、オブジェクトを時間経過とともに変換します。

アニメーションパターン:

連続回転:

renderer.setAnimationLoop((time) => {
 mesh.rotation.x = time * 0.001;
 mesh.rotation.y = time * 0.0005;
 renderer.render(scene, camera);
});

波/上下運動:


renderer.setAnimationLoop((time) => {
 mesh.position.y = Math.sin

(原文がここで切り詰められています)

📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

Three.js Builder

A focused skill for creating simple, performant Three.js web applications using modern ES module patterns.

Philosophy: The Scene Graph Mental Model

Three.js is built on the scene graph—a hierarchical tree of objects where parent transformations affect children. Understanding this mental model is key to effective 3D web development.

Before creating a Three.js app, ask:

What is the core visual element? (geometry, shape, model)
What interaction does the user need? (none, orbit controls, custom input)
What performance constraints exist? (mobile, desktop, WebGL capabilities)
What animation brings it to life? (rotation, movement, transitions)

Core principles:

Scene Graph First: Everything added to scene renders. Use Group for hierarchical transforms.
Primitives as Building Blocks: Built-in geometries (Box, Sphere, Torus) cover 80% of simple use cases.
Animation as Transformation: Change position/rotation/scale over time using requestAnimationFrame or renderer.setAnimationLoop.
Performance Through Simplicity: Fewer objects, fewer draw calls, reusable geometries/materials.

Quick Start: Essential Setup

Minimal HTML Template

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Three.js App</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { overflow: hidden; background: #000; }
        canvas { display: block; }
    </style>
</head>
<body>
    <script type="module">
        import * as THREE from 'https://unpkg.com/three@0.160.0/build/three.module.js';

        // Scene setup
        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        const renderer = new THREE.WebGLRenderer({ antialias: true });

        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
        document.body.appendChild(renderer.domElement);

        // Your 3D content here
        // ...

        camera.position.z = 5;

        // Animation loop
        renderer.setAnimationLoop((time) => {
            renderer.render(scene, camera);
        });

        // Handle resize
        window.addEventListener('resize', () => {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        });
    </script>
</body>
</html>

Geometries

Built-in primitives cover most simple app needs. Use BufferGeometry only for custom shapes.

Common primitives:

BoxGeometry(width, height, depth) - cubes, boxes
SphereGeometry(radius, widthSegments, heightSegments) - balls, planets
CylinderGeometry(radiusTop, radiusBottom, height) - tubes, cylinders
TorusGeometry(radius, tube) - donuts, rings
PlaneGeometry(width, height) - floors, walls, backgrounds
ConeGeometry(radius, height) - spikes, cones
IcosahedronGeometry(radius, detail) - low-poly spheres (detail=0)

Usage:

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshStandardMaterial({ color: 0x44aa88 });
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

Materials

Choose material based on lighting needs and visual style.

Material selection guide:

MeshBasicMaterial - No lighting, flat colors. Use for: UI, wireframes, unlit effects
MeshStandardMaterial - PBR lighting. Default for realistic surfaces
MeshPhysicalMaterial - Advanced PBR with clearcoat, transmission. Glass, water
MeshNormalMaterial - Debug, rainbow colors based on normals
MeshPhongMaterial - Legacy, shininess control. Faster than Standard

Common material properties:

{
    color: 0x44aa88,           // Hex color
    roughness: 0.5,            // 0=glossy, 1=matte (Standard/Physical)
    metalness: 0.0,            // 0=non-metal, 1=metal (Standard/Physical)
    emissive: 0x000000,        // Self-illumination color
    wireframe: false,          // Show edges only
    transparent: false,        // Enable transparency
    opacity: 1.0,              // 0=invisible, 1=opaque (needs transparent:true)
    side: THREE.FrontSide      // FrontSide, BackSide, DoubleSide
}

Lighting

No light = black screen (except BasicMaterial/NormalMaterial).

Light types:

AmbientLight(intensity) - Base illumination everywhere. Use 0.3-0.5
DirectionalLight(color, intensity) - Sun-like, parallel rays. Cast shadows
PointLight(color, intensity, distance) - Light bulb, emits in all directions
SpotLight(color, intensity, angle, penumbra) - Flashlight, cone of light

Typical lighting setup:

const ambientLight = new THREE.AmbientLight(0xffffff, 0.4);
scene.add(ambientLight);

const mainLight = new THREE.DirectionalLight(0xffffff, 1);
mainLight.position.set(5, 10, 7);
scene.add(mainLight);

const fillLight = new THREE.DirectionalLight(0x88ccff, 0.5);
fillLight.position.set(-5, 0, -5);
scene.add(fillLight);

Shadows (advanced, use when needed):

renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;

mainLight.castShadow = true;
mainLight.shadow.mapSize.width = 2048;
mainLight.shadow.mapSize.height = 2048;

mesh.castShadow = true;
mesh.receiveShadow = true;

Animation

Transform objects over time using the animation loop.

Animation patterns:

Continuous rotation:

renderer.setAnimationLoop((time) => {
 mesh.rotation.x = time * 0.001;
 mesh.rotation.y = time * 0.0005;
 renderer.render(scene, camera);
});

Wave/bobbing motion:

renderer.setAnimationLoop((time) => {
 mesh.position.y = Math.sin(time * 0.002) * 0.5;
 renderer.render(scene, camera);
});

Mouse interaction:
```
const mouse = new THREE.Vector2();
```

window.addEventListener('mousemove', (event) => { mouse.x = (event.clientX / window.innerWidth) 2 - 1; mouse.y = -(event.clientY / window.innerHeight) 2 + 1; });

renderer.setAnimationLoop(() => { mesh.rotation.x = mouse.y 0.5; mesh.rotation.y = mouse.x 0.5; renderer.render(scene, camera); });


---

## Camera Controls

Import OrbitControls from examples for interactive camera movement:

```html
<script type="module">
    import * as THREE from 'https://unpkg.com/three@0.160.0/build/three.module.js';
    import { OrbitControls } from 'https://unpkg.com/three@0.160.0/examples/jsm/controls/OrbitControls.js';

    // ... scene setup ...

    const controls = new OrbitControls(camera, renderer.domElement);
    controls.enableDamping = true;
    controls.dampingFactor = 0.05;

    renderer.setAnimationLoop(() => {
        controls.update();
        renderer.render(scene, camera);
    });
</script>

Common Scene Patterns

Rotating Cube (Hello World)

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshStandardMaterial({ color: 0x00ff88 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

renderer.setAnimationLoop((time) => {
    cube.rotation.x = time * 0.001;
    cube.rotation.y = time * 0.001;
    renderer.render(scene, camera);
});

Floating Particle Field

const particleCount = 1000;
const geometry = new THREE.BufferGeometry();
const positions = new Float32Array(particleCount * 3);

for (let i = 0; i < particleCount * 3; i += 3) {
    positions[i] = (Math.random() - 0.5) * 50;
    positions[i + 1] = (Math.random() - 0.5) * 50;
    positions[i + 2] = (Math.random() - 0.5) * 50;
}

geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
const material = new THREE.PointsMaterial({ color: 0xffffff, size: 0.1 });
const particles = new THREE.Points(geometry, material);
scene.add(particles);

Animated Background with Foreground Object

// Background grid
const gridHelper = new THREE.GridHelper(50, 50, 0x444444, 0x222222);
scene.add(gridHelper);

// Foreground object
const mainGeometry = new THREE.IcosahedronGeometry(1, 0);
const mainMaterial = new THREE.MeshStandardMaterial({
    color: 0xff6600,
    flatShading: true
});
const mainMesh = new THREE.Mesh(mainGeometry, mainMaterial);
scene.add(mainMesh);

Colors

Three.js uses hexadecimal color format: 0xRRGGBB

Common hex colors:

Black: 0x000000, White: 0xffffff
Red: 0xff0000, Green: 0x00ff00, Blue: 0x0000ff
Cyan: 0x00ffff, Magenta: 0xff00ff, Yellow: 0xffff00
Orange: 0xff8800, Purple: 0x8800ff, Pink: 0xff0088

Anti-Patterns to Avoid

Basic Setup Mistakes

❌ Not importing OrbitControls from correct path Why bad: Controls won't load, THREE.OrbitControls is undefined in modern Three.js Better: Use import { OrbitControls } from 'three/addons/controls/OrbitControls.js' or unpkg examples/jsm path

❌ Forgetting to add object to scene Why bad: Object won't render, silent failure Better: Always call scene.add(object) after creating meshes/lights

❌ Using old requestAnimationFrame pattern instead of setAnimationLoop Why bad: More verbose, doesn't handle XR/WebXR automatically Better: renderer.setAnimationLoop((time) => { ... })

Performance Issues

❌ Creating new geometries in animation loop Why bad: Massive memory allocation, frame rate collapse Better: Create geometry once, reuse it. Transform only position/rotation/scale

❌ Using too many segments on primitives Why bad: Unnecessary vertices, GPU overhead Better: Default segments are usually fine. SphereGeometry(1, 32, 16) not SphereGeometry(1, 128, 64)

❌ Not setting pixelRatio cap Why bad: 4K/5K displays run at full resolution, poor performance Better: Math.min(window.devicePixelRatio, 2)

Code Organization

❌ Everything in one giant function Why bad: Hard to modify, hard to debug Better: Separate setup into functions: createScene(), createLights(), createMeshes()

❌ Hardcoding all values Why bad: Difficult to tweak and experiment Better: Define constants at top: const CONFIG = { color: 0x00ff88, speed: 0.001 }

Variation Guidance

IMPORTANT: Each Three.js app should feel unique and context-appropriate.

Vary by scenario:

Portfolio/showcase: Elegant, smooth animations, muted colors
Game/interactive: Bright colors, snappy controls, particle effects
Data visualization: Clean lines, grid helpers, clear labels
Background effect: Subtle, slow movement, dark/gradient backgrounds
Product viewer: Realistic lighting, PBR materials, smooth orbit

Vary visual elements:

Geometry choice: Not everything needs to be a cube. Explore spheres, tori, icosahedra
Material style: Mix flat shaded, glossy, metallic, wireframe
Color palettes: Use complementary, analogous, or monochromatic schemes
Animation style: Rotation, oscillation, wave motion, mouse tracking

Avoid converging on:

Default green cube as first example every time
Same camera angle (front-facing, z=5)
Identical lighting setup (always directional light at 1,1,1)

Remember

Three.js is a tool for interactive 3D on the web.

Effective Three.js apps:

Start with the scene graph mental model
Use primitives as building blocks
Keep animations simple and performant
Vary visual style based on purpose
Import from modern ES module paths

Modern Three.js (r150+) uses ES modules from three package or CDN. CommonJS patterns and global THREE variable are legacy.

For advanced topics (GLTF models, shaders, post-processing), see references/advanced-topics.md.

Claude is capable of creating elegant, performant 3D web experiences. These patterns guide the way—they don't limit the result.

同梱ファイル

※ ZIPに含まれるファイル一覧。`SKILL.md` 本体に加え、参考資料・サンプル・スクリプトが入っている場合があります。

📄 SKILL.md (12,374 bytes)
📎 references/advanced-topics.md (11,193 bytes)