Neon Lights in Three.js & React Three Fiber! (Devlog #1)
🎄 Welcome to Neon Christmas Devlog #1! 🎄
In this video, I'll walk you through how I build a 3D neon lights effect using Three.js and React Three Fiber, perfect for immersive and interactive holiday or LA street-themed projects. Discover the magic of creating festive post-processing effects. Whether you're building a holiday-themed project or love the glow of neon lights, this devlog has you covered!
👉🏻 Live: https://neon-christmas-sk027.vercel.app/
👉🏻 Code: https://github.com/SahilK-027/neon-ch...
What You'll Explore:
Setting up a 3D scene with Three.js and React Three Fiber.
Using Blender's drawing tool to create 3D models.
Creating realistic neon light materials and post-processing effects.
Inspiration for creating immersive Christmas-themed projects.
Chapters:
00:00 Introduction
00:12 Project Setup: Tools & Environment
01:48 Git Init: Adding Version Control
02:23 Test Scene: Setting Up Initial Render
03:43 Post-Processing Neon Glow Effects
04:48 Backdrop, Ground, & Fog for Atmosphere
07:11 Camera Parallax: Adding Depth to the Scene
08:15 Setup Leva Debug Control
10:34 Modeling Neon Tubes in Blender
13:40 Adding Ground Textures
15:24 Shader Programming: Creating Custom Effect
18:36 Mouse Interactivity: Enhancing User Experience
20:36 Final Project: Showcasing the Finished Scene
🔔 Subscribe for more creative coding adventures!
#Threejs #ReactThreeFiber #blender #CreativeCoding #NeonLights #WebGL