Claude Code और Three.js से व्यावहारिक 3D Web UI बनाएं

Three.js WebGL को आसान बनाता है, लेकिन production-ready 3D UI केवल घूमता हुआ object नहीं होता। आपको camera, lighting, canvas size, mobile GPU load, cleanup, और model fail होने पर fallback तक सोचना पड़ता है। यही फर्क demo और usable feature के बीच आता है।

Claude Code इस काम में उपयोगी है क्योंकि यह Three.js का boilerplate जल्दी बना सकता है। फिर भी अगर prompt सिर्फ “एक अच्छा 3D scene बना दो” है, तो code सुंदर लग सकता है पर resize टूट सकता है, page navigation के बाद renderer memory में रह सकता है, या phone पर scene बहुत heavy हो सकता है।

इस लेख में Vite + React + Three.js का copy-paste वाला छोटा viewer है। साथ में यह भी है कि Claude Code से किस तरह review करवाएं ताकि code सच में production के करीब हो।

पहले3D का उद्देश्य तय करें

Code लिखने से पहले तय करें कि user को 3D से क्या समझना है। Product viewer में color, material, back side और scale important हो सकते हैं। Data visualization में cluster, outlier या time movement दिखाना उद्देश्य हो सकता है। Education scene में user को सही part पर focus कराना जरूरी हो सकता है।

Claude Code को vague instruction देने के बजाय constraints दें।

Vite + React + TypeScript + three से 3D product viewer बनाइए।
Requirements:
- canvas को parent element के अंदर render करें
- parent container के resize को follow करें
- OrbitControls से rotate और zoom दें
- unmount पर geometry, material, renderer और controls dispose करें
- mobile GPU के लिए devicePixelRatio को 2 तक सीमित करें
- code src/App.tsx में सीधे paste करके चलना चाहिए

ये constraints harness हैं, यानी agent के लिए सुरक्षित काम करने का ढांचा। इससे blank canvas, stretched scene, memory leak और mobile heating जैसी समस्याएं कम होती हैं। API के लिए Three.js official docs और WebGLRenderer docs देखें।

Vite/React का न्यूनतम setup

पहले raw Three.js को React component में समझना बेहतर है। React Three Fiber बाद में उपयोगी हो सकता है, लेकिन शुरुआत में renderer create करना, DOM में add करना, resize सुनना, animation चलाना और dispose करना साफ दिखना चाहिए।

npm create vite@latest three-claude-demo -- --template react-ts
cd three-claude-demo
npm i three
npm run dev

flowchart LR
  A["React component"] --> B["mount div"]
  B --> C["WebGLRenderer canvas"]
  C --> D["Scene"]
  D --> E["Camera and lights"]
  D --> F["Mesh and material"]
  C --> G["OrbitControls"]
  G --> H["resize and dispose"]

Copy-paste 3D viewer

नीचे का code src/App.tsx में paste करें। यह simple product-like object बनाता है, light और camera control जोड़ता है, container resize को follow करता है और unmount पर resources release करता है।

import { useEffect, useRef } from "react";
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import "./App.css";

export default function App() {
  const mountRef = useRef<HTMLDivElement | null>(null);

  useEffect(() => {
    const mount = mountRef.current;
    if (!mount) return;

    const scene = new THREE.Scene();
    scene.background = new THREE.Color(0xf6f7fb);

    const camera = new THREE.PerspectiveCamera(45, 1, 0.1, 100);
    camera.position.set(3.5, 2.2, 4.5);

    const renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
    renderer.outputColorSpace = THREE.SRGBColorSpace;
    renderer.shadowMap.enabled = true;
    mount.appendChild(renderer.domElement);

    const controls = new OrbitControls(camera, renderer.domElement);
    controls.enableDamping = true;
    controls.minDistance = 2.5;
    controls.maxDistance = 8;
    controls.target.set(0, 0.4, 0);

    scene.add(new THREE.HemisphereLight(0xffffff, 0x7c8594, 1.6));

    const keyLight = new THREE.DirectionalLight(0xffffff, 2.4);
    keyLight.position.set(3, 5, 4);
    keyLight.castShadow = true;
    scene.add(keyLight);

    const productGeometry = new THREE.BoxGeometry(1.8, 1.2, 1.1, 4, 4, 4);
    const productMaterial = new THREE.MeshStandardMaterial({
      color: 0x2f6f73,
      roughness: 0.42,
      metalness: 0.08,
    });
    const product = new THREE.Mesh(productGeometry, productMaterial);
    product.castShadow = true;
    product.position.y = 0.75;
    scene.add(product);

    const floorGeometry = new THREE.CircleGeometry(2.2, 64);
    const floorMaterial = new THREE.MeshStandardMaterial({
      color: 0xd9dee8,
      roughness: 0.7,
    });
    const floor = new THREE.Mesh(floorGeometry, floorMaterial);
    floor.rotation.x = -Math.PI / 2;
    floor.receiveShadow = true;
    scene.add(floor);

    const resize = () => {
      const width = mount.clientWidth;
      const height = mount.clientHeight;
      if (width === 0 || height === 0) return;

      camera.aspect = width / height;
      camera.updateProjectionMatrix();
      renderer.setSize(width, height, false);
    };

    let frameId = 0;
    const clock = new THREE.Clock();

    const animate = () => {
      const elapsed = clock.getElapsedTime();
      product.rotation.y = elapsed * 0.45;
      product.rotation.x = Math.sin(elapsed * 0.8) * 0.08;
      controls.update();
      renderer.render(scene, camera);
      frameId = window.requestAnimationFrame(animate);
    };

    resize();
    animate();
    window.addEventListener("resize", resize);

    return () => {
      window.removeEventListener("resize", resize);
      window.cancelAnimationFrame(frameId);
      controls.dispose();

      scene.traverse((object) => {
        if (object instanceof THREE.Mesh) {
          object.geometry.dispose();
          const materials = Array.isArray(object.material)
            ? object.material
            : [object.material];
          materials.forEach((material) => material.dispose());
        }
      });

      renderer.dispose();
      renderer.domElement.remove();
    };
  }, []);

  return (
    <main className="viewerShell">
      <div className="copy">
        <p className="eyebrow">Three.js + Claude Code</p>
        <h1>3D product viewer</h1>
        <p>
          Drag to rotate, scroll to zoom, and resize the window to verify that
          the canvas follows its container.
        </p>
      </div>
      <div ref={mountRef} className="viewerStage" />
    </main>
  );
}

src/App.css भी जोड़ें। अगर parent height zero है तो canvas मौजूद होने पर भी blank दिखेगा।

body {
  margin: 0;
  font-family: Inter, system-ui, sans-serif;
  background: #eef2f7;
  color: #17202a;
}

.viewerShell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(260px, 0.8fr) minmax(320px, 1.2fr);
  gap: 32px;
  align-items: center;
  padding: 40px;
  box-sizing: border-box;
}

.copy {
  max-width: 520px;
}

.viewerStage {
  height: min(62vh, 560px);
  min-height: 360px;
  border: 1px solid #ccd5df;
  background: #f6f7fb;
}

.viewerStage canvas {
  display: block;
}

@media (max-width: 760px) {
  .viewerShell {
    grid-template-columns: 1fr;
    padding: 24px;
  }

  .viewerStage {
    min-height: 300px;
  }
}

Claude Code से review करवाएं

पहली implementation के बाद यह prompt दें।

इस React + Three.js implementation को review करें।
Check करें:
1. canvas parent size को follow करता है या नहीं
2. geometry, material, renderer और controls unmount पर dispose होते हैं या नहीं
3. requestAnimationFrame रुकता है या नहीं
4. high-density mobile screens के लिए devicePixelRatio safe है या नहीं
5. Next.js या Astro SSR में window/document access टूटेगा या नहीं
6. camera, lighting और controls product inspection के लिए सही हैं या नहीं
Concrete diff और manual test checklist दें।

यह review जरूरी है क्योंकि resource leak screenshot में नहीं दिखता। Page से बाहर जाकर वापस आएं और DevTools में Memory और Performance देखें।

तीन practical use cases

Use case	3D क्यों उपयोगी है	Claude Code से क्या बनवाएं
3D product viewer	user color, finish, depth और back side देख सकता है	OrbitControls, color variants, lighting, mobile checks
Data visualization	clusters, outliers और time movement spatial रूप में दिखते हैं	point cloud, 3D bars, camera transitions, legends
Portfolio/education scene	object rotate करके parts समझाए जा सकते हैं	labels, highlight, guided camera positions

Product viewer का लक्ष्य खरीदारी की शंका कम करना है। Data visualization में 3D तभी रखें जब comparison बेहतर हो; नहीं तो 2D fallback दें। Education scene में free rotation के साथ guided sequence भी चाहिए।

आम गलतियां और fixes

समस्या	कारण	Fix
canvas blank	parent height 0, camera गलत, light नहीं	CSS height दें, camera position और controls target देखें
resize पर scene stretch	camera.aspect और renderer size साथ update नहीं	camera.updateProjectionMatrix() और renderer.setSize() call करें
navigation के बाद app slow	dispose missing	unmount पर scene traverse करके resources dispose करें
phone heat होता है	high pixelRatio, heavy shadows, dense geometry	pixelRatio limit करें, shadows और segments कम करें
SSR error	server render में window/document access	Three.js init को useEffect या client-only component में रखें

Blank canvas debug करते समय सबसे पहले scene को simple करें: light background, एक cube, एक light, known camera. GLB, HDR और postprocessing को साथ में debug न करें।

Release checklist और CTA

Release से पहले target phone पर fps, heat, model size, WebGL fallback और accessible text check करें। Canvas architecture के लिए Claude Code Canvas guide और motion tuning के लिए Claude Code animation guide देखें।

Claude Code Lab 3D product viewer, WebGL data visualization और educational scenes की review तथा team training में मदद कर सकता है। Consultation में target devices, framework, model format, performance budget और business goal लेकर आएं।

वास्तविक परीक्षण का परिणाम

मैंने code को Vite React TypeScript project में paste करके desktop और mobile widths पर resize check किया। .viewerStage की explicit height से blank canvas issue नहीं आया। devicePixelRatio को 2 पर limit करने से high-density screens पर GPU work कम हुआ। Claude Code से dispose path review करवाने पर navigation के बाद resource leak का जोखिम पहले पकड़ना आसान हुआ।