+ 216 54 00 73 87Download CV
github carthabot

Project Details - Robot Playground

Robot Playground is an experimental 3D web project built with Next.js, Three.js, and React Three Fiber. It integrates Blender models and interactive animations to create immersive, real-time experiences directly in the browser. This project pushes the limits of modern web technology and showcases the future of 3D web development.

Project information

The robot is smiling at the camera

Project Story

Robot Playground was born out of my curiosity to explore the world of 3D web development and experiment with advanced web technologies. Using tools like Next.js, Three.js, and React Three Fiber, I set out to create an interactive experience where users could engage with 3D models and animations. The project includes Blender model integration, dynamic lighting, and postprocessing effects such as Bloom to deliver a visually engaging experience. Scrolling triggers animations, adding another layer of interaction.

The main goal of this project is to showcase how far 3D web experiences can be pushed within modern web browsers. By combining real-time performance and stunning visuals, it serves as a playground for exploring new techniques in web development. As the developer, my role was to handle the entire technical stack, including Blender integration, animation, and optimizing performance to ensure smooth interaction across devices.

Start Date

2 Jun 2024

Client

Self

Role

Developer

The robot is smiling at the camera with closed eyes
Our robot have chosen one skill from the list of skills available

Exploration

Working on Robot Playground allowed me to dive deep into 3D web development and the powerful tools available today. I integrated Blender models seamlessly into a Next.js application, mastered React Three Fiber for handling complex animations, and used Framer Motion to trigger animations based on user scroll. Visual effects like Bloom and dynamic lighting were challenging but rewarding to implement, adding cinematic quality to the project. I also introduced custom camera controls to ensure smooth user experience and incorporated a performance monitoring panel to keep track of frame rates. This project pushed my skills in both frontend development and 3D modeling, proving what’s possible with modern web technologies.

A robot manifesting some sort of skills and is choosing one.

Github stats

Total star earned

-

Total commits

6

Total PRs

2

Total Issues

-

Total tests

-

Technologies

next jstailwind css

Language

Typescript - 84.1%

CSS - 11.6%

Javascript - 4.3%

Other Projects