Gummy bear

🧸 Interactive 3D Gummy Bear — React App Specification

✅ Tech Stack

• Framework: React + TypeScript
• Styling: Tailwind CSS
• 3D Engine: Three.js via:
  • @react-three/fiber
  • @react-three/drei
  • @react-spring/three
• Icons: Lucide-React

🎯 Objective

Create an interactive, hyper-realistic 3D gummy bear that behaves like a soft, translucent jelly object with physics-driven interaction and polished UI controls.

🧩 3D Model — Procedural Generation

• Construct the gummy bear programmatically by merging primitive geometries:
  • CapsuleGeometry → body and limbs
  • SphereGeometry → head, ears, snout
• Arm Positioning (Important):
  • Place arms lower on the torso
  • Rotate them forward toward the Z-axis
  • Avoid upward or outward angles
• The final mesh should appear as one seamless molded piece — no visible separations.

🍬 Material & Appearance

Use MeshTransmissionMaterial from @react-three/drei to achieve a jelly-like look.

Material must support configurable:

• Roughness → controls blur
• Transmission → controls translucency
• Color

Internal Glow

• Add a pointLight inside the bear mesh.
• Light intensity must be user-adjustable.

🎞 Animation & Interaction

Idle Animation

• Bear should gently float when inactive.

Physics-Based Interaction

Implement a squeeze + wobble effect using @react-spring/three.

On click/tap:

• Bear squashes slightly.

On release:

• Bear rebounds and wobbles with high tension (jello-like behavior).

💡 Scene & Lighting

3-Point Lighting Setup

• Ambient light
• Strong Key light
• Dedicated Backlight (Rim light)
  • Enhances subsurface scattering

🌗 Environment Modes

Dark Mode

• Background: #000000
• Include a star field using <Stars />

Light Mode

• Background: soft gray

🎛 UI Controls (Overlay)

Top Right

• Toggle button → Dark / Light mode

Bottom Left — Glassmorphism Panel

Include two sliders:

• Inner Light
  • Controls intensity of internal point light
• Blur
  • Maps to material roughness

Bottom Center

• Preset color buttons:
  • Red
  • Green
  • Yellow
  • Clear
  • (extendable)
• Custom color picker input

Bottom Right — Glassmorphism Panel

• Slider labeled “Opaqueness”
  • Controls the inverse of transmission

⚙️ Technical Constraints

• Use functional components + hooks
• Canvas must:
  • Fill the viewport
  • Handle resizing gracefully

‍

‍