Three.js 3D avec Claude Code

Three.js 3D開発をClaude Codeで加速する

Three.jsはWebGL/WebGPUを扱いやすくラップした3Dライブラリです。3Dビジュアライゼーション、製品プレビュー、インタラクティブ体験など幅広い用途に使えます。Claude Codeを活用すれば、3Dプログラミング特有の複雑な数学やAPIも効率的に扱えます。

基本シーンの構築

> Three.jsでライティング付きの基本シーンを作成して。
> OrbitControlsでカメラ操作もできるようにして。

import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

// シーン・カメラ・レンダラー
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x1a1a2e);

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

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
document.body.appendChild(renderer.domElement);

// コントロール
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;

// ライティング
const ambientLight = new THREE.AmbientLight(0x404040, 0.5);
scene.add(ambientLight);

const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(10, 10, 5);
directionalLight.castShadow = true;
scene.add(directionalLight);

// オブジェクト
const geometry = new THREE.TorusKnotGeometry(1, 0.3, 128, 32);
const material = new THREE.MeshStandardMaterial({
  color: 0x6366f1,
  metalness: 0.5,
  roughness: 0.2,
});
const torusKnot = new THREE.Mesh(geometry, material);
torusKnot.castShadow = true;
scene.add(torusKnot);

// 床
const floorGeometry = new THREE.PlaneGeometry(20, 20);
const floorMaterial = new THREE.MeshStandardMaterial({ color: 0x333333 });
const floor = new THREE.Mesh(floorGeometry, floorMaterial);
floor.rotation.x = -Math.PI / 2;
floor.position.y = -2;
floor.receiveShadow = true;
scene.add(floor);

// アニメーションループ
function animate() {
  requestAnimationFrame(animate);
  torusKnot.rotation.x += 0.01;
  torusKnot.rotation.y += 0.005;
  controls.update();
  renderer.render(scene, camera);
}
animate();

React Three Fiberで宣言的3D開発

> React Three Fiberで製品プレビューコンポーネントを作って。
> モデルの回転、ズーム、マテリアル切り替えを実装して。

import { Canvas, useFrame } from '@react-three/fiber';
import { OrbitControls, Environment, useGLTF } from '@react-three/drei';
import { useRef, useState } from 'react';
import * as THREE from 'three';

function ProductModel({ color }: { color: string }) {
  const meshRef = useRef<THREE.Mesh>(null);
  const { scene } = useGLTF('/models/product.glb');

  useFrame((state) => {
    if (meshRef.current) {
      meshRef.current.rotation.y =
        Math.sin(state.clock.elapsedTime * 0.3) * 0.2;
    }
  });

  return (
    <mesh ref={meshRef}>
      <primitive object={scene} />
      <meshStandardMaterial color={color} />
    </mesh>
  );
}

export default function ProductViewer() {
  const [color, setColor] = useState('#6366f1');

  return (
    <div style={{ height: '500px' }}>
      <Canvas camera={{ position: [0, 2, 5], fov: 50 }}>
        <ambientLight intensity={0.5} />
        <spotLight position={[10, 10, 10]} angle={0.15} />
        <ProductModel color={color} />
        <OrbitControls
          enablePan={false}
          minDistance={3}
          maxDistance={10}
        />
        <Environment preset="studio" />
      </Canvas>
      <div className="flex gap-2 mt-4 justify-center">
        {['#6366f1', '#ef4444', '#22c55e'].map((c) => (
          <button
            key={c}
            onClick={() => setColor(c)}
            style={{ backgroundColor: c, width: 32, height: 32 }}
          />
        ))}
      </div>
    </div>
  );
}

シェーダーのカスタマイズ

> グラデーションアニメーションのカスタムシェーダーを作って。

// vertexShader
varying vec2 vUv;
void main() {
  vUv = uv;
  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}

// fragmentShader
uniform float uTime;
varying vec2 vUv;
void main() {
  vec3 color1 = vec3(0.388, 0.400, 0.945);
  vec3 color2 = vec3(0.933, 0.267, 0.267);
  float mixer = sin(vUv.y * 3.14 + uTime) * 0.5 + 0.5;
  vec3 color = mix(color1, color2, mixer);
  gl_FragColor = vec4(color, 1.0);
}

パフォーマンス最適化

Claude Codeに3Dシーンのパフォーマンス改善を依頼できます。

> 3Dシーンのパフォーマンスを最適化して。
> ジオメトリの統合、LOD、インスタンシングを検討して。

主な最適化ポイントはジオメトリの結合（BufferGeometryUtils.mergeGeometries）、InstancedMeshによる同一オブジェクトの効率描画、テクスチャアトラスの使用です。

Summary

Three.jsとClaude Codeの組み合わせで、複雑な3Dシーンの構築やシェーダー開発を効率的に進められます。Canvas開発ガイドやアニメーション実装も参考にしてください。

Three.jsの詳細はThree.js公式ドキュメントを参照してください。