Three.js 3D：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 Code3Dシーンの性能改善を依頼可以。

> 3Dシーンの性能を优化して。
> ジオメトリの集成、LOD、インスタンシングを検討して。

主な优化ポイントはジオメトリの結合（BufferGeometryUtils.mergeGeometries）、InstancedMesh通过同一对象の効率描画、テクスチャアトラスの使用です。

总结

Three.jsとClaude Codeの組み合わせで、複雑な3Dシーンの构建やシェーダー开发を高效地進められます。Canvas开发指南や动画实现也可以参考。

Three.js的详细信息请参阅Three.js官方文档。