Three.js 3D dengan Claude Code

Three.js 3Dpengembangan dengan Claude Code: 加速

Three.js WebGL/WebGPU 扱いやすくラップ 3Dlibrary.3Dビジュアライゼーション、製品preview、インタラクティブ体験 dll.幅広い用途 使え.Claude Code pemanfaatanすれば、3Dプログラミング特有 kompleksな数学やAPI juga efisien 扱え.

pembangunan dasarシーン

> Three.js dengan ライティング付き dasarシーン buatkan.
> OrbitControls dengan カメラoperasi juga dengan きるよう.

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);

// objek
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);

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

React Three Fiberで宣言的3Dpengembangan

> React Three Fiber dengan 製品previewkomponen buatkan.
> モデル 回転、ズーム、マテリアルperalihan implementasikan.

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>
  );
}

カスタマイズ シェーダー

> グラデーションanimasi カスタムシェーダー buatkan.

// 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);
}

Optimasi Performa

Claude Code 3Dシーン performapeningkatan 依頼 bisa dilakukan.

> 3Dシーン performa optimalkan.
> ジオメトリ integrasi、LOD、インスタンシング 検討して。

主なoptimasiポイント ジオメトリ 結合（BufferGeometryUtils.mergeGeometries）、InstancedMesh よる同一objek 効率描画、テクスチャアトラス penggunaan.

Summary

Three.js dan Claude Code 組み合わせ 、kompleksな3Dシーン pembangunanやシェーダーpengembangan efisien 進められ.Canvaspengembanganpanduanやanimasiimplementasi juga bisa dijadikan referensi.

Untuk Three.jsの詳細, lihat Three.js公式ドキュメント.