Whether you're a beginner building your first interactive website or an experienced creative developer, these resources can help you bring your ideas to life.
Three.jsThe most popular JavaScript library for creating 3D graphics on the web.
Perfect for:
-
Interactive 3D scenes
-
Animations
-
Product showcases
-
Games
-
Visual effects
Recommended for anyone building a custom 3D experience.
React Three Fiberhttps://docs.pmnd.rs/react-three-fiber
A React renderer for Three.js that makes creating complex 3D applications easier and more organized.
Perfect for:
-
React developers
-
Large-scale projects
-
Interactive experiences
-
Modern web applications
A free and professional 3D modeling, animation, rendering, and simulation software.
Use Blender to:
-
Create custom models
-
Build environments
-
Design animations
-
Generate assets for your website
Industry-standard and completely free.
SplineA beginner-friendly tool for creating interactive 3D scenes directly in the browser.
Perfect for:
-
Quick prototypes
-
Landing pages
-
Interactive hero sections
-
Beginners with little 3D experience
No advanced 3D knowledge required.
GSAPOne of the most powerful animation libraries available for the web.
Use GSAP to:
-
Create smooth animations
-
Build scroll-driven experiences
-
Add transitions and interactions
-
Bring your website to life
Often used alongside Three.js and React Three Fiber.
SketchfabA massive library of 3D models created by artists from around the world.
Use it to:
-
Find free and paid 3D assets
-
Explore inspiration
-
Download models for your projects
Always check asset licenses before using them.
Poly HavenA collection of completely free, high-quality assets.
Includes:
-
HDRIs
-
Textures
-
Materials
-
3D models
All assets are available without attribution requirements.
BlenderKitA huge asset library integrated directly into Blender.
Find:
-
Models
-
Materials
-
Environments
-
Furniture
-
Nature assets
Great for rapidly building beautiful scenes.
MixamoAdobe's free character animation platform.
Use Mixamo to:
-
Rig characters automatically
-
Download animations
-
Create animated characters quickly
Excellent for adding life and movement to your projects.
FigmaA collaborative interface and design tool used by professionals worldwide.
Use Figma to:
-
Design layouts
-
Plan user interfaces
-
Create mockups
-
Organize visual ideas before development
Highly recommended for planning your project before coding.
Learning ResourcesIf you're new to 3D web development, these tutorials are excellent starting points:
• Three.js Journey — https://threejs-journey.com
• Bruno Simon's Creative Development Course — https://threejs-journey.com
• React Three Fiber Documentation — https://docs.pmnd.rs/react-three-fiber
• Blender Beginner Tutorials — https://www.youtube.com/@blenderguru
AI ToolsAI assistance is allowed in this hackathon.
Participants may use tools such as:
-
ChatGPT
-
Claude
-
Gemini
-
GitHub Copilot
-
Cursor
Use these tools to learn, brainstorm, debug, generate assets, and accelerate development.
Build something unforgettable. Good luck, and have fun creating!