Mâu Thuẫn Biện Chứng — Ngày & Đêm

An immersive, interactive 3D website explaining the philosophical concept "Mâu Thuẫn Biện Chứng – Sự Thống Nhất Và Đấu Tranh Giữa Các Mặt Đối Lập" (Dialectical Contradiction — the unity and struggle of opposites) through the relationship between Day and Night.

Blender (procedural assets) → GLB export → Next.js → React Three Fiber → Three.js → GSAP → TailwindCSS

Project_3D_Blender/
├─ blender/
│  └─ generate_assets.py     # Procedural low/medium-poly PBR asset generator
├─ web/                       # Next.js 16 app (App Router, TS, Tailwind v4)
│  ├─ public/models/*.glb     # 13 exported assets (≈380 KB total)
│  ├─ lib/                    # store.ts (Zustand), layout.ts (world constants)
│  ├─ components/
│  │  ├─ Experience.tsx       # Client shell: fixed canvas + scrolling UI
│  │  ├─ Scene.tsx            # Canvas, lighting, controls, postprocessing
│  │  ├─ three/               # Earth, Sun, Moon, OrbitArrows, DaySide, NightSide,
│  │  │                       # CameraRig (GSAP), Effects, Glow, Hotspot, Model loader
│  │  └─ ui/                  # Header, Controls, InfoPanel, Content, LoaderOverlay
│  └─ ...
└─ addon.py                   # Blender MCP add-on (installed into Blender 5.1)

blender/generate_assets.py builds every solid asset procedurally with PBR (Principled BSDF) materials and exports each as an optimized GLB.

Regenerate any time:

"C:\Program Files\Blender Foundation\Blender 5.1\blender.exe" --background --python blender/generate_assets.py

Exported models: earth, sun, moon, farmer, buffalo, plow, owl, bird, tree, bed (with sleeper + pillow + blanket), cloud, flower, rice.

Particle/shader-based elements that don't belong in a mesh file are generated in React Three Fiber instead: starfield, spiral galaxy particles, rainbow, instanced grass, atmosphere glow (Fresnel shader), god rays + bloom.

cd web
npm install      # already done
npm run dev      # http://localhost:3000
npm run build    # production build

• Earth centered, with a natural day/night terminator (lit toward the Sun).
• Golden (Day) + blue (Night) arrows continuously orbit Earth — "Ngày chuyển thành Đêm, Đêm chuyển thành Ngày."
• Left = Day: Sun (bloom + god rays), clouds, rainbow, 3 flying birds, farmer
  • buffalo + plow, grass, flowers, rice — warm sunlight.
• Right = Night: full Moon, dense stars, galaxy particles, sleeper in bed, owl on a tree — cool blue moonlight.

• OrbitControls: drag to rotate, wheel to zoom, right-drag to pan.
• GSAP cinematic camera transitions between focuses.
• Hotspots (Sun→Day, Earth→unity, Moon→Night, Farmer→labor) and glassmorphism buttons (Explore Day / Earth / Night / Farmer / Reset).
• Scroll down for the Thesis → Antithesis → Synthesis explanation with GSAP scroll reveals.

Earth rotation · Sun pulse · Moon rotation · orbiting arrows · farmer hoeing · buffalo plodding · 3 birds flight loop · cloud floating · sleeper breathing · star twinkle (Sparkles) · galaxy rotation.

Next.js 16 · React 19 · React Three Fiber 9 · drei 10 · three 0.184 · @react-three/postprocessing 3 · GSAP 3 · TailwindCSS 4 · Zustand 5.