# Videos > Videos from the Anderson Mancini YouTube channel: Three.js, React Three Fiber and WebGPU projects, tutorials, source code walkthroughs, game trailers and talks. Canonical page: https://andersonmancini.dev/videos Channel: [Anderson Mancini - Threejs Creative Developer](https://www.youtube.com/@AndersonMancini) · [Subscribe](https://www.youtube.com/@AndersonMancini?sub_confirmation=1) · [Video catalog (JSON)](https://andersonmancini.dev/videos.json) ## 2026 - [ODD & OUT — Official Trailer | Free 3D Game in Your Browser](https://andersonmancini.dev/videos/odd-and-out-official-trailer-free-3d-game-in-your-browser.md) — Odd was napping. Out pressed the one button nobody was supposed to press. Now their ship is in 16 pieces across 8 floating worlds, and this planet is very… (2026-10-12, 0:30) - [Halloween nights just landed in Graveyard Pinball](https://andersonmancini.dev/videos/halloween-nights-just-landed-in-graveyard-pinball.md) — With every score multiplier, the ghosts rise from their graves and drift toward you, and while they haunt the table, they keep your ball from falling into… (2026-10-09, 0:56) - [Slice Tilt – a 3D pinball on a pizza, built with WebGPU/TSL + Rapier2D](https://andersonmancini.dev/videos/slice-tilt-a-3d-pinball-on-a-pizza-built-with-webgpu-tsl.md) — I just released Slice Tilt, a free browser pinball game where the table is a round pizza cut into four slices. (2026-10-09, 0:35) - [I Built a Haunted Pinball Table That Runs in Your Browser (Free)](https://andersonmancini.dev/videos/i-built-a-haunted-pinball-table-that-runs-in-your-browser.md) — Graveyard Pinball is a haunted 3D pinball table that runs right in your browser. It's free to play, with no download and no sign-up. (2026-10-05, 3:53) - [My game won Site of the Day on FWA! Threejs Punk Racing Game](https://andersonmancini.dev/videos/my-game-won-site-of-the-day-on-fwa-threejs-punk-racing-game.md) — Threejs Punk is Site of the Day on FWA on October 3rd! (2026-10-03, 0:32) - [Lantern Valley - New Indie cozy game](https://andersonmancini.dev/videos/lantern-valley-new-indie-cozy-game.md) — Lantern Valley is in production, and early access is coming soon! (2026-09-30, 8:30) - [How I Make My Three.js Projects - WebGPU Production - Threejs Conference Talk Keynote](https://andersonmancini.dev/videos/how-i-make-my-three-js-projects-webgpu-production-threejs.md) — For years, people have asked me: How do you make these projects? (2026-09-28, 46:14) - [My first ThreeJS racing game is live](https://andersonmancini.dev/videos/my-first-threejs-racing-game-is-live.md) — This is NOT a demo. It’s a full racing game made with . (2026-09-28, 1:42) - [Playing my game - Threejs Punk Driving](https://andersonmancini.dev/videos/playing-my-game-threejs-punk-driving.md) — Just playing my game to show some of the features. (2026-09-28, 44:54) - [How Far Can Three.js Push Web Games?](https://andersonmancini.dev/videos/how-far-can-three-js-push-web-games.md) — A big city to explore, drifting, missions, and a lot of crazy things to discover. And yes — it will be free to play. (2026-09-25, 1:47) - [Threejs CyberPunk WebGPU - Threejs Conference](https://andersonmancini.dev/videos/threejs-cyberpunk-webgpu-threejs-conference.md) — As promised, the Cyberpunk Project got an update, and the source code is now available. You can download it, learn from it, or feed it into your AI if… (2026-09-23, 0:48) - [Threejs WebGPU Advanced Glass rendering thick glass objects](https://andersonmancini.dev/videos/threejs-webgpu-advanced-glass-rendering-thick-glass-objects.md) — My WebGPU Advanced Glass Material rendering thick glass objects with multi-layered surfaces in comparison with the default MeshPhysicalMaterial. (2026-09-21, 1:14) - [Threejs Conference Talk Keynote](https://andersonmancini.dev/videos/threejs-conference-talk-keynote.md) — If you missed threejs conference, I will be presenting that same content again. Let's review a WebGPU project together and learn some of the techniques I… (2026-09-19, 47:05) - [Three.js - Water collision and Splashes - CyberPunk project for Threejs Conference Paris](https://andersonmancini.dev/videos/three-js-water-collision-and-splashes-cyberpunk-project-for.md) — The Cyberpunk project just got an update! Video by Anderson Mancini about Three.js - Water collision and Splashes - CyberPunk project for Threejs Conference… (2026-09-02, 0:48) - [Threejs Advanced Glass Material for R3F - Perfume Example](https://andersonmancini.dev/videos/threejs-advanced-glass-material-for-r3f-perfume-example.md) — Some folks asked me about the difference between my Advanced Glass Material and the default Three.js MeshPhysical material using glass properties. (2026-08-28, 1:55) - [WebGPU Advanced Glass Material for Threejs](https://andersonmancini.dev/videos/webgpu-advanced-glass-material-for-threejs.md) — A closer look at two unique features of my Advanced Glass Material: colored caustics and glass-to-glass interaction. (2026-08-19, 2:53) - [Threejs WebGPU Advanced Glass Material - Rendering Edge Chromatic Dispersion](https://andersonmancini.dev/videos/threejs-webgpu-advanced-glass-material-rendering-edge.md) — More experiments with WebGPU Advanced Glass Material for vanilla version. Added Independent Edge Dispersion for better results when morphing the glass shape. (2026-08-14, 0:35) - [WebGPU Glass Dispersion + Caustics - Threejs](https://andersonmancini.dev/videos/webgpu-glass-dispersion-caustics-threejs) — Rendering some glass dispersion and caustics in using WebGPU for my @threejsconf talk. (2026-08-13, 0:52) - [THE FORGE AWAITS - Threejs Game](https://andersonmancini.dev/videos/the-forge-awaits-threejs-game.md) — I built a small browser game inspired by the legendary forging trials of the gods, using , , and modern real-time rendering techniques. (2026-08-06, 0:44) - [WebGPU Glass Material Update](https://andersonmancini.dev/videos/webgpu-glass-material-update.md) — This new glass material was only possible because of the incredible work of all the contributors at Poimandres who brought Mesh Transmission Material into… (2026-08-03, 1:14) - [WebGPU Glass Material for React Three Fiber](https://andersonmancini.dev/videos/webgpu-glass-material-for-react-three-fiber.md) — The new WebGPU version of Mesh Transmission Material from Drei for React Three Fiber — created by Anderson Mancini. (2026-07-31, 3:31) - [Threejs Custom WebGPU Glass Material - Predator Cloak Material WebGPU for React Three Fiber](https://andersonmancini.dev/videos/threejs-custom-webgpu-glass-material-predator-cloak.md) — While updating my website, I found an old project that was broken and decided to bring it back to life using WebGPU + TSL in . (2026-07-29, 2:08) - [WebGPU Mesh Transmission Material for React Three Fiber](https://andersonmancini.dev/videos/webgpu-mesh-transmission-material-for-react-three-fiber.md) — Finally got the famous MeshTransmissionMaterial working in WebGPU (2026-07-29, 2:46) - [Three.js Cyberpunk Update - Water droplets and color themes](https://andersonmancini.dev/videos/three-js-cyberpunk-update-water-droplets-and-color-themes.md) — I've been experimenting with a few new visual themes for the project, and it's fascinating how dramatically they can change the mood. The same scene can… (2026-07-27, 1:37) - [CyberPunk Threejs - Conference Project Update](https://andersonmancini.dev/videos/cyberpunk-threejs-conference-project-update.md) — Three.js. No baking. No fake reflections. Just a rainy ASRM night to enjoy. (2026-07-22, 2:31) - [Lumen Decor Studio by Anderson Mancini - WebGPU Threejs SSGI + SSR](https://andersonmancini.dev/videos/lumen-decor-studio-by-anderson-mancini-webgpu-threejs-ssgi.md) — Built to showcase what's possible with real-time WebGPU rendering using . Just a 6.3 MB download, yet the lighting looks baked—until you grab the sun and… (2026-07-21, 0:57) - [Threejs Conference Workshop - Cyberpunk Inspired](https://andersonmancini.dev/videos/threejs-conference-workshop-cyberpunk-inspired.md) — Testing threejs limits on recreating a Cyberpunk-inspired scene using Roughness Blured reflector, custom Rain, Custom water distortion, Depth of Field, Lens… (2026-07-21, 2:22) - [Threejs WebGPU Custom Sun Controls for Lumen Decor Studio](https://andersonmancini.dev/videos/threejs-webgpu-custom-sun-controls-for-lumen-decor-studio.md) — Sun controls have finally been integrated into WebGPU Lumen Decor Studio. The rotation of the two scenes is now synchronized, making it easier to manipulate… (2026-07-20, 1:07) - [Threejs Lumen Decor Studio 2 + SSGI + SSR WebGPU](https://andersonmancini.dev/videos/threejs-lumen-decor-studio-2-ssgi-ssr-webgpu.md) — My Lumen Decor Studio is getting an update. Added a denoiser to the SSGI pass + better AO. I love how light bounces cascade on objects. It looks like… (2026-07-17, 0:22) - [New Open Source: r3f-webgpu-text](https://andersonmancini.dev/videos/new-open-source-r3f-webgpu-text.md) — React Three Fiber has had great text solutions for years… until you switched to WebGPU. There wasn’t a proper MSDF text component that worked with the new… (2026-07-05, 1:06) - [I Built a WebGPU Performance Monitor for React Three Fiber](https://andersonmancini.dev/videos/i-built-a-webgpu-performance-monitor-for-react-three-fiber.md) — One thing I missed while working with WebGPU in React Three Fiber was a performance monitor similar to r3f-perf. The existing tool is fantastic, but it… (2026-06-09, 0:43) - [Three.js r184 SSR Upgrade: More Realistic Reflections with Distance Blur](https://andersonmancini.dev/videos/three-js-r184-ssr-upgrade-more-realistic-reflections-with.md) — A quick look at a recent rendering improvement in my Three.js project. (2026-06-01, 1:28) - [Creating Powerful Scene Controls with React Three Fiber & Three.js](https://andersonmancini.dev/videos/creating-powerful-scene-controls-with-react-three-fiber-and.md) — One of the best things about building interactive experiences with is the creative freedom it unlocks. (2026-05-30, 2:42) - [Three.js + React Three Fiber Interactive Clubhouse Experience for Burnley FC](https://andersonmancini.dev/videos/three-js-react-three-fiber-interactive-clubhouse-experience.md) — There’s a hidden discount code somewhere inside this virtual clubhouse (2026-05-28, 0:38) - [CerealBnB - Threejs Archiviz Project](https://andersonmancini.dev/videos/cerealbnb-threejs-archiviz-project.md) — A fun website for a fun place to stay - a project that won the @Airbnb OMG! Fund contest . (2026-05-27, 1:22) - [Threejs WebGPU Light Probes Grid + SSGI - Technical Breakdown](https://andersonmancini.dev/videos/threejs-webgpu-light-probes-grid-ssgi-technical-breakdown.md) — Since using probes is a very technical subject and difficult to understand without visual examples, I decided to create a video with an exaggerated example… (2026-05-27, 2:42) - [Threejs Architecture Visualization - Lumen Decor Studio - WebGPU SSGI + PROBER](https://andersonmancini.dev/videos/threejs-architecture-visualization-lumen-decor-studio.md) — My Lumen Decor Studio is getting an update. It will now support more settings and more complex scenes, thanks to the latest library updates. (2026-05-25, 2:40) - [New Threejs Project - South Cliff Dental Group](https://andersonmancini.dev/videos/new-threejs-project-south-cliff-dental-group.md) — New live project. Developed in partnership with @thisisLDglobal, the new Souch Cliff Dental Group website breaks industry standards and shows how a website… (2026-05-04, 1:49) - [Threejs Ultra Realistic Diamond Rendering using WebGPU & TSL - React Three Fiber Jewelry](https://andersonmancini.dev/videos/threejs-ultra-realistic-diamond-rendering-using-webgpu-and.md) — GemGPU™ is my custom jewelry renderer built with using TSL and WebGPU through React Three Fiber. It includes a handy configurator panel for tweaking unique… (2026-02-11, 3:58) - [GemGPU - Threejs WebGPU Jewelry Renderer - Diamond Material for React Three Fiber](https://andersonmancini.dev/videos/gemgpu-threejs-webgpu-jewelry-renderer-diamond-material-for.md) — Working on my own gem renderer with a custom refraction material in TSL for , combining Screen Space Reflections + SSGTAO for superior results, as this… (2026-02-09, 3:44) - [Threejs WebGPU Fluid Painting tool - Light Painting](https://andersonmancini.dev/videos/threejs-webgpu-fluid-painting-tool-light-painting.md) — Using with WebGPU and TSL to build a light painting tool. It's not like watercolor, but I like how the paint dries over time. It's quite relaxing. (2026-01-29, 0:34) ## 2025 - [Threejs Architecture Visualization using WebGPU](https://andersonmancini.dev/videos/threejs-architecture-visualization-using-webgpu.md) — New features in the architecture visualization project for Planpoint. A neighborhood surroundings with points of interest integrated into the map, very… (2025-12-29, 2:08) - [Ultimate Lens Flare for Threejs WebGPU Version - Architecture Visualization](https://andersonmancini.dev/videos/ultimate-lens-flare-for-threejs-webgpu-version-architecture.md) — I finally finished porting my "Ultimate Lens Flare" to the WebGPU. This is a post-processing effect that allows many customization options for advanced Lens… (2025-12-15, 1:17) - [Threejs Horizon Fog - Atmosphere Effect by customizing the fog node](https://andersonmancini.dev/videos/threejs-horizon-fog-atmosphere-effect-by-customizing-the.md) — Not everyone knows this, but provides a very convenient node for customizing the fog in WebGPU effortlessly using . This allows you to create much more… (2025-12-10, 0:41) - [Threejs 3d Archiviz realistic Rendering - WebGPU SSGI](https://andersonmancini.dev/videos/threejs-3d-archiviz-realistic-rendering-webgpu-ssgi.md) — My new project using WebGPU is live. A fully realistic environment with 25,000 trees, advanced post-processing, and a smooth 60 FPS performance, all… (2025-12-03, 1:39) - [Planpoint WebGPU vs WebGL Comparison - Threejs SSGI](https://andersonmancini.dev/videos/planpoint-webgpu-vs-webgl-comparison-threejs-ssgi.md) — This is WIP Video by Anderson Mancini about Planpoint WebGPU vs WebGL Comparison - Threejs SSGI. (2025-11-27, 3:31) - [Octahedral Impostors in Threejs WebGPU React Three Fiber TSL](https://andersonmancini.dev/videos/octahedral-impostors-in-threejs-webgpu-react-three-fiber-tsl.md) — Experimenting with a new component for R3F: Octahedral Impostors via hashtag using hashtag . (2025-11-17, 1:45) - [Lumen Decor Studio - 3D Configurator - Threejs WebGPU TSL SSGI SSR](https://andersonmancini.dev/videos/lumen-decor-studio-3d-configurator-threejs-webgpu-tsl-ssgi.md) — My new project is live . Lumen Decor features WebGPU SSGI+SSR, showcasing how sunlight can influence decoration. Everything you see renders in real-time and… (2025-10-28, 2:48) - [Lumen Decor Studio - Color selection - New 3D Configurator - Threejs WebGPU TSL SSGI SSR](https://andersonmancini.dev/videos/lumen-decor-studio-color-selection-new-3d-configurator.md) — New update to my Lumen Decor Studio project. Video by Anderson Mancini about Lumen Decor Studio - Color selection - New 3D Configurator - Threejs WebGPU TSL… (2025-10-23, 3:01) - [Lumen Decor Studio - New 3D Configurator by Anderson Mancini - Threejs WebGPU TSL SSGI SSR](https://andersonmancini.dev/videos/lumen-decor-studio-new-3d-configurator-by-anderson-mancini.md) — Update on my new project, Lumen Decor Studio. Video by Anderson Mancini about Lumen Decor Studio - New 3D Configurator by Anderson Mancini - Threejs WebGPU… (2025-10-20, 2:22) - [Screen Space Global Illumination in Threejs via WebGPU and React Three Fiber](https://andersonmancini.dev/videos/screen-space-global-illumination-in-threejs-via-webgpu-and.md) — This is my first public experiment using Three.js WebGPU through React Three Fiber. (2025-10-15, 1:27) - [Threejs SSGI TSL WebGPU - R3F Demo by Anderson Mancini](https://andersonmancini.dev/videos/threejs-ssgi-tsl-webgpu-r3f-demo-by-anderson-mancini.md) — r181 is going to be insane. I’ve been playing with it before release — and we finally have native Screen Space Global Illumination via in and . Live link… (2025-10-12, 4:26) - [Using Threejs and Gaussian Splatting to achieve ultra-realistic surroundings in Real Estate](https://andersonmancini.dev/videos/using-threejs-and-gaussian-splatting-to-achieve-ultra.md) — Did you know that you can integrate Gaussian Splatting with meshes for hyper-realistic surroundings + interactivity? This is a powerful combo that… (2025-09-17, 0:42) - [Threejs Nuclear Reaction Fusion Energy using GLSL Shaders](https://andersonmancini.dev/videos/threejs-nuclear-reaction-fusion-energy-using-glsl-shaders.md) — Working on a new minigame using threejs and glsl. A custom Mantis XR immersive demo scene about fusion energy. Shader interactivity is so addictive . (2025-07-15, 1:45) - [Apple Liquid Glass using Threejs R3F](https://andersonmancini.dev/videos/apple-liquid-glass-using-threejs-r3f.md) — I increased the parallax effect in the background to visualize the liquid glass effect better and created a custom settings panel. The settings have a… (2025-06-15, 1:44) - [Apple Liquid Glass using WebGL Threejs React Three Fiber](https://andersonmancini.dev/videos/apple-liquid-glass-using-webgl-threejs-react-three-fiber.md) — I added some options to the Liquid Glass demo using . Since it's a real mesh, you can play around with the roughness and thickness parameters to get… (2025-06-11, 1:53) - [Apple Liquid Glass using Threejs and React Three Fiber - WebGL + glsl](https://andersonmancini.dev/videos/apple-liquid-glass-using-threejs-and-react-three-fiber.md) — Apple Liquid Glass via and React Three Fiber looks sick . As I can see, it shows some readability issues, but those can be easily addressed by adjusting the… (2025-06-10, 1:26) - [ThreeJS Classics Garage 2025 Update](https://andersonmancini.dev/videos/threejs-classics-garage-2025-update.md) — Some updates on my Classics Garage project. Now, if you're in a hurry and want to skip the game mode using ispect, you can use the Konami Code \[↑ ↑ ↓ ↓ ← →… (2025-06-09, 1:24) - [Threejs Water Hero Section - React Three Fiber WebGPU + TSL](https://andersonmancini.dev/videos/threejs-water-hero-section-react-three-fiber-webgpu-tsl.md) — I'm back to working on my water simulator for interactive experiences using + . This time, I'm experimenting with and for better performance. (2025-05-20, 1:03) - [Threejs Enviromment Map Tip - React Three Fiber](https://andersonmancini.dev/videos/threejs-enviromment-map-tip-react-three-fiber.md) — Just a quick tip that you can save for later: never underestimate the power of a custom envmap . Using the grounded projection envmap in a customization… (2025-05-12, 0:38) - [Schumacher, L+R win People's Voice at the 29th Annual Webby Awards - Threejs Project](https://andersonmancini.dev/videos/schumacher-l-r-win-people-s-voice-at-the-29th-annual-webby.md) — We are thrilled to hear that the project for L+R and F. Schumacher & Co. has been recognized as the leading Architecture, Art & Design website at the 29th… (2025-04-22, 1:59) - [3D Storefronts made easy - MantisXR - Threejs + React Three Fiber](https://andersonmancini.dev/videos/3d-storefronts-made-easy-mantisxr-threejs-react-three-fiber.md) — Now, you can enable your customers to dress a mannequin and try on different combinations before purchasing. We have also added new options for customizing… (2025-04-17, 1:35) - [MantisXR - Interactive 3D storefronts in just a few clicks - Powered by Threejs](https://andersonmancini.dev/videos/mantisxr-interactive-3d-storefronts-in-just-a-few-clicks.md) — We just launched something special at Mantis. Video by Anderson Mancini about MantisXR - Interactive 3D storefronts in just a few clicks - Powered by Threejs. (2025-04-08, 1:46) - [Schumacher House is a Webby Awards Nominee.](https://andersonmancini.dev/videos/schumacher-house-is-a-webby-awards-nominee.md) — We're thrilled that our hashtag project, in partnership with L+R, has been recognized as one of the best in digital experiences. F. Schumacher & Co. House… (2025-04-04, 1:53) - [Camden Yards - Threejs Project using React Three Fiber for MantisXR](https://andersonmancini.dev/videos/camden-yards-threejs-project-using-react-three-fiber-for.md) — Intro with dynamic physics, animated birds, animated clouds, lens flare, night/day switch, and ambient sounds to give more life. In the video, you can see… (2025-03-20, 1:59) - [Echoflow Update - Threejs Chatbot using ChatGPT API](https://andersonmancini.dev/videos/echoflow-update-threejs-chatbot-using-chatgpt-api.md) — EchoFlowAI, the AI assistant, can now dress like Siri and play audio, music, etc. You never saw Siri that close . (2025-02-14, 0:47) - [Threejs Chatbot using ChatGPT API](https://andersonmancini.dev/videos/threejs-chatbot-using-chatgpt-api.md) — What happens when you mix , and a creative game developer? You get the Apple Siri that the browser was missing (2025-02-10, 1:49) - [Threejs + - R3F Wind lines](https://andersonmancini.dev/videos/threejs-r3f-wind-lines.md) — Jumping on the boat, apparently, it knows more than me already . This is the result of just one prompt: "创建一个使用粗线技术渲染风线的 React Three Fiber 组件". Yes, I… (2025-01-30, 0:59) - [Creative Developer Portfolio Update](https://andersonmancini.dev/videos/creative-developer-portfolio-update.md) — I updated my portfolio to add some of my latest projects. Realistic water is now available in XR mode. The Mesh Transition material is available for… (2025-01-28, 0:24) - [Threejs WebGPU Post Processing with TSL in React Three Fiber - Free download](https://andersonmancini.dev/videos/threejs-webgpu-post-processing-with-tsl-in-react-three.md) — You can download this to start your scenes with react three fiber, threejs WebGPU Renderer, and Post-Processing using tsl. Using the transpiler, I also… (2025-01-13, 1:27) - [Threejs WebGPU Post Processing with React Three Fiber](https://andersonmancini.dev/videos/threejs-webgpu-post-processing-with-react-three-fiber.md) — I'm experimenting with some react three fiber with webGPU. We no longer need an EffectComposer to use post-processing effects in . Now, everything is done… (2025-01-10, 1:41) ## 2024 - [Threejs Windland in VR/AR](https://andersonmancini.dev/videos/threejs-windland-in-vr-ar.md) — My Windland project looks awesome in VR . I always dreamed of the day we could walk on those lands. Thanks to React three Fiber and BelaBohlender's work… (2024-12-17, 1:32) - [Threejs WebXR Realistic Water on Apple Vision Pro](https://andersonmancini.dev/videos/threejs-webxr-realistic-water-on-apple-vision-pro.md) — My WebXR water experiment using threejs and react three fiber now also supports Apple Vision Pro. We don't have AR sessions on it yet, as Apple is still… (2024-12-12, 1:23) - [WebXR Water created with Threejs for MetaQuest 3](https://andersonmancini.dev/videos/webxr-water-created-with-threejs-for-metaquest-3.md) — My realistic water experiment in using is live. If you have a WebXR-compatible device, you can access it here: (2024-11-21, 0:52) - [Threejs WebXR - Meta quest VR AR sessions Realistic water](https://andersonmancini.dev/videos/threejs-webxr-meta-quest-vr-ar-sessions-realistic-water.md) — The showcase using my Realistic Water project in is working perfectly in VR/AR sessions on Quest. Thanks to Bolaboher's excellent work in making things easy… (2024-11-12, 2:20) - [Threejs Realistic Water on Meta Quest 3 VR / AR/ WebXR](https://andersonmancini.dev/videos/threejs-realistic-water-on-meta-quest-3-vr-ar-webxr.md) — Using the Meta Quest 3 to navigate and interact with 3D content in the browser has been an excellent experience so far. Here, you can see my Realistic Water… (2024-11-10, 1:35) - [Google Pixel Watch Running Threejs Realistic Water with Caustics as a Watch Face](https://andersonmancini.dev/videos/google-pixel-watch-running-threejs-realistic-water-with.md) — People sometimes ask me, "How do you get such good performance in your projects?" The answer is that I set very high constraints. (2024-11-07, 1:13) - [Realistic Water Simulation with threejs is live](https://andersonmancini.dev/videos/realistic-water-simulation-with-threejs-is-live.md) — Realistic Water Simulation with threejs is live: Video by Anderson Mancini about Realistic Water Simulation with threejs is live. (2024-11-06, 2:33) - [Threejs Water Caustics Component for React Three Fiber rendering a Mojito](https://andersonmancini.dev/videos/threejs-water-caustics-component-for-react-three-fiber.md) — There's no point in making a Mojito glass with water and dynamic caustics in 3D, I know. But it's so cool! (2024-11-05, 0:19) - [Threejs Water with caustics underwater and droplets using react three fiber](https://andersonmancini.dev/videos/threejs-water-with-caustics-underwater-and-droplets-using.md) — I’ve taken the threejs water realism to the next level! Now with RGB distortion in the caustics, we get even more realistic, colorful light projections. The… (2024-11-04, 2:49) - [Threejs Water WebGL Pool](https://andersonmancini.dev/videos/threejs-water-webgl-pool.md) — Creating realistic water effects, including caustic, reflections. refraction of light and surrounding blocks! Using React Three Fiber mesh physical… (2024-11-02, 0:39) - [Mesh Transition Material - Master Smooth Color Transitions in React Three Fiber - Project Breakdown](https://andersonmancini.dev/videos/mesh-transition-material-master-smooth-color-transitions-in.md) — Are you ready to take your React Three Fiber projects to the next level? In this video, I’ll walk you through my newly-released component that allows for… (2024-10-31, 15:48) - [God of War mini game created with Threejs and React three fiber](https://andersonmancini.dev/videos/god-of-war-mini-game-created-with-threejs-and-react-three.md) — Just having some fun creating a minigame for Halloween using threejs and React Three fiber. Using an exaggerated post-processing effect, just because I like… (2024-10-29, 1:28) - [Mesh Transition Material is now available - Threejs + React Three Fiber](https://andersonmancini.dev/videos/mesh-transition-material-is-now-available-threejs-react.md) — I’m excited to share my new material for React Three Fiber! (2024-10-29, 1:38) - [How to Add Dark Mode in React Three Fiber & Three.js - Project Source Code Review - Wind Land](https://andersonmancini.dev/videos/how-to-add-dark-mode-in-react-three-fiber-and-three-js.md) — In this video, I’ll guide you through the steps to implement a smooth Dark Mode in a React Three Fiber and Three.js project using Valtio for state… (2024-10-27, 15:52) - [Threejs Award Winning Project Breakdown - Windland 3D Digital City - Source code review](https://andersonmancini.dev/videos/threejs-award-winning-project-breakdown-windland-3d-digital.md) — Subscribe for project and WebGL+Threejs news: Video by Anderson Mancini about Threejs Award Winning Project Breakdown - Windland 3D Digital City - Source… (2024-10-14, 12:12) - [Explore the Gomez Sim Racing Configurator with Three.js & WebGL: A Breakdown of Customization!](https://andersonmancini.dev/videos/explore-the-gomez-sim-racing-configurator-with-three-js-and.md) — Join me as I dive into the exciting world of the Gomez Sim Racing configurator! In this video, I break down how this innovative project uses the latest… (2024-10-11, 12:03) - [Create Stunning 3D Web Pages with Google ModelViewer & Three.js (Step-by-Step Tutorial)](https://andersonmancini.dev/videos/create-stunning-3d-web-pages-with-google-modelviewer-and.md) — In this 15-minute tutorial, we’ll dive into a different flavor of Three.js: Google’s ModelViewer. You’ll learn how to set up and configure a 3D motorcycle… (2024-10-09, 14:48) - [Part 2 - Beautiful Landing Page with React Fiber & Three.js (Free Course)](https://andersonmancini.dev/videos/part-2-beautiful-landing-page-with-react-fiber-and-three-js.md) — In this video, we’ll transform the project from Part 1 into a scrollable 3D experience by animating the camera with the useGSAP hook and adding HTML… (2024-10-05, 20:41) - [Part 1 - Beautiful Landing Page with React Fiber & Three.js (Free Course)](https://andersonmancini.dev/videos/part-1-beautiful-landing-page-with-react-fiber-and-three-js.md) — This is Part 1 of a FREE course where I’ll teach you how to create a stunning landing page featuring a 3D DNA chain and a transparent pill animation. We'll… (2024-09-28, 34:46) - [Mastering the AutoFocus Component in React Three Fiber](https://andersonmancini.dev/videos/mastering-the-autofocus-component-in-react-three-fiber.md) — Hey everyone! In today’s video, I'm diving into how to use the AutoFocus component from the React Three Fiber post-processing library. I created this handy… (2024-09-23, 11:41) - [Three.js Glsl Background for Blockade Labs](https://andersonmancini.dev/videos/three-js-glsl-background-for-blockade-labs.md) — A simple page that I created for my friends at Blockade Labs using , , and some magic. Something incredible is coming and this will change the way you… (2024-09-11, 0:20) - [Threejs Alien Romulus Facehugger - Project + Source Code Review](https://andersonmancini.dev/videos/threejs-alien-romulus-facehugger-project-source-code-review) — Using Threejs + React Three Fiber + Tensor flow. Video by Anderson Mancini about Threejs Alien Romulus Facehugger - Project + Source Code Review. (2024-09-08, 0:41) - [Apple Watch landing page concept using . Source code example available on my GitHub](https://andersonmancini.dev/videos/apple-watch-landing-page-concept-using-source-code-example) — Video by Anderson Mancini about Apple Watch landing page concept using . Source code example available on my GitHub. (2024-09-06, 0:56) - [Alien Romulus Inspired Website - Watch trailers in 3D](https://andersonmancini.dev/videos/alien-romulus-inspired-website-watch-trailers-in-3d.md) — I always find it a bit annoying how websites miss the opportunity to use 3D content to show movie trailers in an interactive and engaging way. In this… (2024-09-01, 1:15) - [New Threejs Project source code review](https://andersonmancini.dev/videos/new-threejs-project-source-code-review) — Video by Anderson Mancini about New Threejs Project source code review. (2024-09-01, 0:59) - [Threejs Source Code Review - Spaceship Project - Part 1 - Spaceship renderer](https://andersonmancini.dev/videos/threejs-source-code-review-spaceship-project-part-1.md) — Let's have some fun and review the source code of the Spaceship project using React Three Fiber and Three.js. (2024-09-01, 16:38) - [Alien Romulus Threejs Website](https://andersonmancini.dev/videos/alien-romulus-threejs-website.md) — Something new is cooking . An interactive scene using and for one of my favorite sci-fi movies . It will use all my latest components like LensFlare and… (2024-08-30, 1:19) - [Slik Digital - Paralympics Australia - Threejs Stadium using React Three Fiber](https://andersonmancini.dev/videos/slik-digital-paralympics-australia-threejs-stadium-using.md) — I had the great pleasure of participating in this virtual stadium project for the Paralympics Australia using and . The team at SLIK DIGITAL \[ did an… (2024-08-15, 1:15) - [Threejs Aircraft Exhibition on Apple Vision Pro](https://andersonmancini.dev/videos/threejs-aircraft-exhibition-on-apple-vision-pro.md) — It’s so special and rewarding when a project works well on newer devices without much effort. (2024-08-06, 1:54) - [Aivah July update - new features - Threejs + r3f A.I. Agents](https://andersonmancini.dev/videos/aivah-july-update-new-features-threejs-r3f-a-i-agents.md) — New features are available at OpinionAI Ltd aivah. Now, your agents can walk around the scene. We also have new LLM models and customization options based… (2024-07-29, 1:35) - [My new threej.js portfolio is live](https://andersonmancini.dev/videos/my-new-threej-js-portfolio-is-live.md) — I finally got some free time to update my portfolio . I've published my most recent works, components, and courses. It can record which projects you have… (2024-07-24, 1:30) - [Phonon Metaverse - Three.js Project using React Three Fiber](https://andersonmancini.dev/videos/phonon-metaverse-three-js-project-using-react-three-fiber.md) — Another project using delivered . A city full of life and interactivity for NewFormVR. It performs well on all devices thanks to the dynamic quality. Some… (2024-07-18, 2:32) - [Threejs powered 3D Ai Agent - Aivah - by OpinionAI](https://andersonmancini.dev/videos/threejs-powered-3d-ai-agent-aivah-by-opinionai.md) — I am starting a new collaboration with OpinionAI Ltd. With Aivah, we can create, share, and publish 3D agents to any website in minutes. Train with your… (2024-07-13, 1:05) - [Threejs + React: Architecture Visualization - Performance Tutorial](https://andersonmancini.dev/videos/threejs-react-architecture-visualization-performance.md) — New project delivered . Planpoint architectural visualization using and is live. An entire house rendering in real-time in less than 15 MB. In this video… (2024-07-12, 2:37) - [Threejs Archiviz House Project 2024 - Interior Design - Blender EVEE tutorial](https://andersonmancini.dev/videos/threejs-archiviz-house-project-2024-interior-design-blender.md) — The interior decoration for my architectural visualization project is ready. The interior is modern and full of details. To better visualize, I show some… (2024-07-08, 1:59) - [New Threejs Archiviz Project 2024](https://andersonmancini.dev/videos/new-threejs-archiviz-project-2024.md) — I'm starting a new interior and exterior architectural visualization project for Planpoint using and . Everything begins in Blender, with a good light setup… (2024-07-05, 1:31) - [Three.js +Apple VisionPro Spatial AR](https://andersonmancini.dev/videos/three-js-apple-visionpro-spatial-ar.md) — How about placing the Burj Khalifa in your living room with one click using and Apple Vision Pro's Spatial AR capabilities? (2024-07-02, 2:20) - [Spatial Computing Car configurator - Using Three.js](https://andersonmancini.dev/videos/spatial-computing-car-configurator-using-three-js.md) — In my opinion, the best thing about spatial computing is not getting inside 3D worlds, but rather pulling 3D stuff out of the virtual world, placing objects… (2024-06-30, 2:22) - [Apple VisionOS Car Configurator with Three.js](https://andersonmancini.dev/videos/apple-visionos-car-configurator-with-three-js.md) — Classics Garage" car configurator that I created using and working with gestures and eye tracking on VisionOS Safari. Everything gets even more interesting… (2024-06-28, 0:34) - [Buying concert tickets on Apple Vision Pro with Three.js](https://andersonmancini.dev/videos/buying-concert-tickets-on-apple-vision-pro-with-three-js.md) — Buying concert tickets on 3D websites allows for immersion even without XR/AR mode. Before buying, you can browse the website, sit in the chairs, and hear… (2024-06-27, 1:07) - [Real time Jewelry rendering on Apple Vision Pro using Three.js](https://andersonmancini.dev/videos/real-time-jewelry-rendering-on-apple-vision-pro-using-three.md) — Real-time jewelry rendering on Apple Vision Pro with via @ijewel3d. If you have an AVP, you can test it here: (2024-06-26, 0:22) - [Announcing the Emerging Technology Accelerator Program](https://andersonmancini.dev/videos/announcing-the-emerging-technology-accelerator-program.md) — Today I'm announcing the "Emerging Technology Accelerator Program". A partnership program with @levinriegner using and technologies created to bring life to… (2024-06-25, 0:54) - [\[Threejs Plan Viewer for Planpoint](https://andersonmancini.dev/videos/threejs-plan-viewer-for-planpoint.md) — Another project was delivered. This time, an integration of with and NextJs in partnership with Planpoint. This project shows how using real-time 3D in the… (2024-06-17, 1:36) - [Threejs Interior Parallax Mapping - Three.js Archiviz](https://andersonmancini.dev/videos/threejs-interior-parallax-mapping-three-js-archiviz.md) — Here is another tip for hashtag optimization. Parallax Interior Mapping allows fake indoor environments with just one plane. It is great to add details… (2024-06-14, 2:03) - [Free download - Threejs FakeForest - React Three Fiber Component](https://andersonmancini.dev/videos/free-download-threejs-fakeforest-react-three-fiber-component.md) — Updated to my Threejs Archiviz project! We now have 3.000 trees. Using tree models for those next to the building and hashtag instanced planes for distant… (2024-06-13, 1:42) - [Threejs Archiviz - Using regression](https://andersonmancini.dev/videos/threejs-archiviz-using-regression.md) — The renderer is ready. To squeeze more performance, I'm relying on the regression system implemented in . While moving, I disable post-processing and… (2024-06-12, 1:10) - [Threejs Archiviz - Model Optimization Tutorial](https://andersonmancini.dev/videos/threejs-archiviz-model-optimization-tutorial.md) — Starting another Archiviz project for PlanPoint and sharing some secrets to good performance: 3D model optimization. (2024-06-11, 2:00) - [Threejs Classics Garage Update - New car and new feature](https://andersonmancini.dev/videos/threejs-classics-garage-update-new-car-and-new-feature.md) — The classics garage project got SOTD at and an honorable mention at . To celebrate, a new classic car was added, the 300 SL, and a new light customization… (2024-05-14, 1:14) - [Confetti V2 - Using React Three Fiber Instances - Threejs](https://andersonmancini.dev/videos/confetti-v2-using-react-three-fiber-instances-threejs.md) — My Confetti V2 component for is available for download. (2024-05-13, 0:54) - [Free React Three Fiber Component - Confetti V2](https://andersonmancini.dev/videos/free-react-three-fiber-component-confetti-v2.md) — My new free "Confetti-V2" component for using is almost ready. The performance is 100% better using instances. Now, we can draw hundreds of particles in a… (2024-05-09, 1:41) - [Threejs ClassicsGgarage wins FWA Site of the day](https://andersonmancini.dev/videos/threejs-classicsggarage-wins-fwa-site-of-the-day.md) — Awesome news . I'm thrilled to share that is @fwa Site of The Day . I always dreamed of this day . (2024-04-30, 0:18) - [Threejs Classics Garage - React Three Fiber Car Configurator](https://andersonmancini.dev/videos/threejs-classics-garage-react-three-fiber-car-configurator.md) — This is my most complex project so far. Lots of learnings, new components, and knowledge that I will start sharing soon. Please let me know if you have… (2024-04-17, 1:44) - [Threejs Car Configurator - Classics Garage Mobile preview](https://andersonmancini.dev/videos/threejs-car-configurator-classics-garage-mobile-preview.md) — Latest adjustments to the mobile version in the classics garage project. Thanks to performance optimizations in , gamification will also be available in the… (2024-04-15, 1:21) - [Threejs Spatial Computing Demo - Apple Pro Vision & Three.js using React Three Fiber](https://andersonmancini.dev/videos/threejs-spatial-computing-demo-apple-pro-vision-and-three.md) — Creating Spatial Computing projects using React Three Fiber with Apple feels a bit like nested realities. The new VR feature flag in Safari works like magic (2024-04-09, 1:52) - [Car Configurator Project - item capture animation](https://andersonmancini.dev/videos/car-configurator-project-item-capture-animation.md) — Gamification ready! Items are now collectible and some options are locked until you collect enough items. I loved the captured item animation created with… (2024-04-01, 1:36) - [Threejs XRay Effect - Classics Garage Project](https://andersonmancini.dev/videos/threejs-xray-effect-classics-garage-project.md) — I am adding a gamification component to the classics garage project. You can use an X-ray feature to inspect the car, collect interesting facts about it… (2024-03-29, 0:51) - [Threejs Car Configurator - Engine Sound Equalizer Graph](https://andersonmancini.dev/videos/threejs-car-configurator-engine-sound-equalizer-graph.md) — As a gamer, I always wanted a dedicated screen to listen to the car engine with a beautiful Equalizer Graph. My dream came true with this audio analyzer… (2024-03-24, 2:10) - [Threejs Classics Garage Project - Car selector](https://andersonmancini.dev/videos/threejs-classics-garage-project-car-selector.md) — Now we have a selector of customizable vehicles. In conjunction with the scene selector, it is possible to achieve very beautiful renders. You will also be… (2024-03-18, 1:55) - [Threejs Classics Garage - React Three Fiber Project](https://andersonmancini.dev/videos/threejs-classics-garage-react-three-fiber-project.md) — This is an update to the Classics Garage project. Now we have a brand and intro using + @greensock useGsap for camera animation. We also have a new scene… (2024-03-14, 2:02) - [Volumetric Cloud Component for React Three Fiber - Three.js](https://andersonmancini.dev/videos/volumetric-cloud-component-for-react-three-fiber-three-js.md) — I finished another utility component that could be useful in some cases without Post Processing. With the right parameters, it can also act as an… (2024-03-10, 1:50) - [Threejs Configurator - Gomes Sim Industries](https://andersonmancini.dev/videos/threejs-configurator-gomes-sim-industries.md) — Project update! Gomes Sim Industries has two new products available for customization. (2024-03-01, 0:57) - [Dairy Farmers of Canada - Threejs Project Update](https://andersonmancini.dev/videos/dairy-farmers-of-canada-threejs-project-update.md) — Project update . Our digital experience for Dairy Farmers of Canada @dfc_plc with AngryButterfly now has new points for interacting with and learning more… (2024-02-23, 1:21) - [iJewel3D Webflow Project](https://andersonmancini.dev/videos/ijewel3d-webflow-project.md) — New project delivered. The new website uses a lot of Webflow + GSAP magic. (2024-02-21, 1:37) - [Threejs Unique Color Picker - Car configurator](https://andersonmancini.dev/videos/threejs-unique-color-picker-car-configurator.md) — Creating a new kind of color picker using and . By choosing a color, we have a smooth gradient transition. But when we drag and drop the color, it makes an… (2024-02-19, 1:52) - [Threejs project - Mantis XR new Website using react three fiber](https://andersonmancini.dev/videos/threejs-project-mantis-xr-new-website-using-react-three.md) — New project . A new website for MantisXR, @kahlilashanti 's company focused on creating 3D experiences in the browser. The new website demonstrates both the… (2024-02-13, 1:23) - [Threejs Fake Volumetric Material](https://andersonmancini.dev/videos/threejs-fake-volumetric-material.md) — Even though it's kind of obvious, I decided to demonstrate here how you can use my "FakeGlowMaterial" to turn it into "FakeVolumetricMaterial". It was one… (2024-02-09, 1:04) - [Threejs Lens Flare - New Optimized Version](https://andersonmancini.dev/videos/threejs-lens-flare-new-optimized-version.md) — Why is having multiple instances of LensFlare with exceptional performance so crucial? Let me show you the thrilling possibilities it unlocks . Car… (2024-02-07, 0:26) - [Threejs Transition Material for React Three Fiber](https://andersonmancini.dev/videos/threejs-transition-material-for-react-three-fiber.md) — MeshTransitionMaterial is a new material type I created for React Three fiber. Why? Changing the color of materials is instantaneous and generally boring. (2024-02-06, 1:54) - [Fake Glow for Vanilla Three.js Custom Material + Source code](https://andersonmancini.dev/videos/fake-glow-for-vanilla-three-js-custom-material-source-code.md) — const fakeGlow = new FakeGlowMaterial(); Video by Anderson Mancini about Fake Glow for Vanilla Three.js Custom Material + Source code. (2024-02-03, 1:09) - [Three.js Room Configurator Awwwards Nominee](https://andersonmancini.dev/videos/three-js-room-configurator-awwwards-nominee.md) — I'm celebrating today! Our recent configurator with L+R is a Nominee on awwwards. It is packed with amazing things like global illumination and dynamic… (2024-01-31, 1:45) - [\[ Threejs Renderer vs Blender 4.1 EVEE Next \]](https://andersonmancini.dev/videos/threejs-renderer-vs-blender-4-1-evee-next.md) — A new project is on the way . I decided to compare the renderer that I use with the new Blender EVEE Next. I was impressed that we already can have nearly… (2024-01-29, 2:00) - [Fake Glow Material for React Three Fiber](https://andersonmancini.dev/videos/fake-glow-material-for-react-three-fiber.md) — This material enables the utilization of a 3D mesh as a GLOW effect through GLSL Shaders, all without the need for any post-processing effects. (2024-01-26, 0:50) - [No Post Processing - source code available](https://andersonmancini.dev/videos/no-post-processing-source-code-available.md) — Watch the creative process of delivering unique materials for @Lunakepio project (2024-01-24, 1:46) - [I'm creating a new threejs material that it is self aware of any color change.](https://andersonmancini.dev/videos/i-m-creating-a-new-threejs-material-that-it-is-self-aware) — Video by Anderson Mancini about I'm creating a new threejs material that it is self aware of any color change.. (2024-01-23, 0:55) - [volumetric clouds project using react three fiber running on Galaxy Watch](https://andersonmancini.dev/videos/volumetric-clouds-project-using-react-three-fiber-running) — Video by Anderson Mancini about volumetric clouds project using react three fiber running on Galaxy Watch. (2024-01-18, 0:18) - [Threejs Volumetric Clouds - React Three Fiber Demo](https://andersonmancini.dev/videos/threejs-volumetric-clouds-react-three-fiber-demo.md) — My last experience is live. Rendering some volumetric ray marched clouds using and three-fiber. (2024-01-17, 1:44) - [React Three Fiber Volumetric Clouds Material](https://andersonmancini.dev/videos/react-three-fiber-volumetric-clouds-material.md) — Here is another approach to Volumetric Clouds. I adapted the example that uses a 3D texture from the threejs website to work in react three fiber. As you… (2024-01-10, 1:04) - [Threejs Volumetric Clouds using Ray Marched Shader on React Three Fiber](https://andersonmancini.dev/videos/threejs-volumetric-clouds-using-ray-marched-shader-on-react.md) — I created a new volumetric cloud material using for . It is based on a ray marched shader, meaning good performance. Let me know in the comments if this is… (2024-01-08, 1:57) ## 2023 - [Flight Simulator in Three.js](https://andersonmancini.dev/videos/flight-simulator-in-three-js.md) — New project cooking . There is something magical about watching aircraft float through the air. Just watching this with beautiful effects and music makes… (2023-12-21, 2:10) - [Gaussian Splatting for Real Estate - Three.js](https://andersonmancini.dev/videos/gaussian-splatting-for-real-estate-three-js.md) — Wanna see another great example of how can be useful? Placing a building into a 3D scene . Here, I'm using @Polycam3D with Drei Splat component and… (2023-12-20, 2:01) - [Merry Three.js Christmas 2023 - Project + Source code](https://andersonmancini.dev/videos/merry-three-js-christmas-2023-project-source-code.md) — Celebrating Christmas with a small project using combining @blockadeLabs and with @LumaAi. (2023-12-18, 0:47) - [What is three.js and how to start with it - JS GameDev Summit 2023](https://andersonmancini.dev/videos/what-is-three-js-and-how-to-start-with-it-js-gamedev-summit.md) — In this video, I talk about threejs, react three fiber, and how to start learning it. (2023-12-17, 28:41) - [Travel Bugs Threejs Project](https://andersonmancini.dev/videos/travel-bugs-threejs-project.md) — It's been about a year since I created this project, but I feel like it was yesterday. I love that cinematic transition, going underground to reveal an ant… (2023-12-15, 1:51) - [Gaussian Splatting Trees - Threejs](https://andersonmancini.dev/videos/gaussian-splatting-trees-threejs.md) — Here is the link to my tree in . How is the performance? I created an option to add more trees (2023-12-14, 1:21) - [Three.js Gaussian Splatting using Vanilla Drei](https://andersonmancini.dev/videos/three-js-gaussian-splatting-using-vanilla-drei.md) — This time I'm testing that same scene, but now using @pmndrs drei-vanilla's . The results are great. I'm also using dynamic grass, but this is eating up a… (2023-12-13, 1:48) - [Dairy Farmers of Canada experience using](https://andersonmancini.dev/videos/dairy-farmers-of-canada-experience-using) — Video by Anderson Mancini about Dairy Farmers of Canada experience using. (2023-12-12, 0:38) - [Threejs 3D Gaussian Splatting Vegetation Demo](https://andersonmancini.dev/videos/threejs-3d-gaussian-splatting-vegetation-demo.md) — I'm officially impressed! integration with is incredible . (2023-12-09, 1:25) - [3D gaussian splatting with threejs by LumaAI.](https://andersonmancini.dev/videos/3d-gaussian-splatting-with-threejs-by-lumaai) — Video by Anderson Mancini about 3D gaussian splatting with threejs by LumaAI.. (2023-12-08, 0:15) - [gaussian splatting LumaAI integration is awesome. new video about it coming tomorrow](https://andersonmancini.dev/videos/gaussian-splatting-lumaai-integration-is-awesome-new-video) — Video by Anderson Mancini about gaussian splatting LumaAI integration is awesome. new video about it coming tomorrow. (2023-12-08, 0:24) - [How to make screen space effects using shaders](https://andersonmancini.dev/videos/how-to-make-screen-space-effects-using-shaders.md) — With some changes to this shader, you can find even more creative uses for and Holographic Material. You can use it as a cover for any object or transform… (2023-12-07, 1:18) - [3D City using . My final project for course . Visit my channel for the link](https://andersonmancini.dev/videos/3d-city-using-my-final-project-for-course-visit-my-channel) — Video by Anderson Mancini about 3D City using . My final project for course . Visit my channel for the link. (2023-12-06, 1:00) - [dynamic lighting. Source: https://github.com/ektogamat/threejs-graces](https://andersonmancini.dev/videos/dynamic-lighting-source-https-github-com-ektogamat-threejs) — Video by Anderson Mancini about dynamic lighting. Source: https://github.com/ektogamat/threejs-graces. (2023-12-04, 0:34) - [Holographic Material for Vanilla Threejs - Free download](https://andersonmancini.dev/videos/holographic-material-for-vanilla-threejs-free-download.md) — My Holographic Material is now available for vanilla users. It has a lot of adjustments and it is very easy to use. (2023-12-03, 1:30) - [Vanilla Holographic Material will be available tomorrow. Please follow to get notification.](https://andersonmancini.dev/videos/vanilla-holographic-material-will-be-available-tomorrow) — Video by Anderson Mancini about Vanilla Holographic Material will be available tomorrow. Please follow to get notification.. (2023-12-03, 0:39) - [Holographic Material for React Three Fiber - Update 1.1](https://andersonmancini.dev/videos/holographic-material-for-react-three-fiber-update-1-1.md) — New parameters have been added to the Holographic Material. More settings, more fun . (2023-12-02, 1:00) - [My jewelry project featured on homepage](https://andersonmancini.dev/videos/my-jewelry-project-featured-on-homepage) — Video by Anderson Mancini about My jewelry project featured on homepage. (2023-12-02, 0:51) - [\[ Threejs Project Awwwards Nominee 😍 \]](https://andersonmancini.dev/videos/threejs-project-awwwards-nominee.md) — My oldest was accepted as a Nominee on @awwwards . It is an interactive map view of 4 Brazilian cities showing available lands, full of easter eggs and fun. (2023-12-01, 0:37) - [Free Holographic Shader Material + Source code](https://andersonmancini.dev/videos/free-holographic-shader-material-source-code.md) — My Holographic Material for / is ready . It is very easy to use and with good documentation. (2023-11-29, 0:43) - [Holographic Material for React Three Fiber](https://andersonmancini.dev/videos/holographic-material-for-react-three-fiber.md) — holographic material is almost ready. Thanks to @OtanoDesign we now have an optional blinking effect . And thanks to @th_ebenezer, the material can run… (2023-11-28, 1:21) - [Holographic Material for React Three Fiber](https://andersonmancini.dev/videos/holographic-material-for-react-three-fiber-2023-11.md) — My new holographic material for using is almost ready . I added some controls to make customization easier. It does not require any post-processing and to… (2023-11-27, 1:56) - [Three.js drinks landing page for My Muscle Chef](https://andersonmancini.dev/videos/three-js-drinks-landing-page-for-my-muscle-chef.md) — New project live using , @greensock, and a lot of shader magic for My Muscle Chef . (2023-11-21, 1:23) - [Holographic Custom Material Shader Preview - R3F](https://andersonmancini.dev/videos/holographic-custom-material-shader-preview-r3f.md) — A small preview of a new material that I'm working on to practice the @iced_coffee_dev course. A holographic material that can have scanlines to fake old… (2023-10-09, 0:43) - [Interactive Particles with Three.js](https://andersonmancini.dev/videos/interactive-particles-with-three-js.md) — That VFX recreation is live. I added a custom shader background to give more depth to it. It looks great . Please let me know in the comments how is the… (2023-10-04, 0:40) - [Three.js scrollable page using Gsap and React Three Fiber](https://andersonmancini.dev/videos/three-js-scrollable-page-using-gsap-and-react-three-fiber.md) — Created in 15 days for @mymusclechef, these pages have that perfect dose of , , and . Featuring shader transitions, post-processing, and more. We hope you… (2023-09-25, 1:15) - [Threejs Live Coding - Chocolate Landing Page using R3F](https://andersonmancini.dev/videos/threejs-live-coding-chocolate-landing-page-using-r3f.md) — Let's have some fun creating a chocolate landing page using React Three Fiber and Three.js. (2023-09-23, 1:05:10) - [Threejs 3D design - Action platform with react three fiber](https://andersonmancini.dev/videos/threejs-3d-design-action-platform-with-react-three-fiber.md) — Challenge: Create a new UI for an auction application (2023-09-14, 1:01) - [Threejs Live Coding - Custom Shaders with react three fiber](https://andersonmancini.dev/videos/threejs-live-coding-custom-shaders-with-react-three-fiber.md) — My first live session doing some live shaders. I show how to customize your materials using shaders from shadertoy. (2023-09-11, 21:45) - [React Three Fiber Custom Shader Predator Material](https://andersonmancini.dev/videos/react-three-fiber-custom-shader-predator-material) — It is live . The Predator Cloak Material for is now available. (2023-09-05, 0:47) - [Predator Cloak Material Update - React Three Fiber](https://andersonmancini.dev/videos/predator-cloak-material-update-react-three-fiber.md) — The Predator's Cloak material for react three fiber is almost ready. Now I'm using (2023-09-04, 1:01) - [Easy-to-use Confetti component for React Three Fiber](https://andersonmancini.dev/videos/easy-to-use-confetti-component-for-react-three-fiber.md) — The super easy-to-use Confetti component for react three fiber is available for download. Thanks again to Romaixn for the partnership . If you like it… (2023-08-05, 0:57) - [React Three Fiber Shader Transition and Clods](https://andersonmancini.dev/videos/react-three-fiber-shader-transition-and-clods.md) — In this breakdown video, I show how this custom Shader was used for the intro that gives a very beautiful reveal effect . (2023-08-03, 0:53) - [Threejs Farm Project - Flock of birds](https://andersonmancini.dev/videos/threejs-farm-project-flock-of-birds.md) — Things are not always as difficult as they seem. The flock of birds that fly by in the farm project are simple animated triangles in Blender. Then play the… (2023-07-31, 0:49) - [Threejs Cornfield crop Project Farm using React Three Fiber](https://andersonmancini.dev/videos/threejs-cornfield-crop-project-farm-using-react-three-fiber.md) — I will publish some breakdown videos of the farm project in the format I like the most: no more than 2 minutes. In this video, I show you how to create a… (2023-07-29, 1:54) - [Lens Flare for Threejs Free Download](https://andersonmancini.dev/videos/lens-flare-for-threejs-free-download.md) — My lens flare for vanilla is available. It now supports multiple types of materials with transparency and transmissions . It turned out beautiful and super… (2023-07-24, 1:36) - [Threejs Lens Flare Vanilla Javascript](https://andersonmancini.dev/videos/threejs-lens-flare-vanilla-javascript.md) — Here I show you some of the magic behind this effect in vanilla . It looks like post-processing, but it's a simple plane with a custom shader, taking up… (2023-07-23, 1:31) - [Threejs Lens Flare Vanilla](https://andersonmancini.dev/videos/threejs-lens-flare-vanilla.md) — This is my new Lens Flare component for vanilla threejs. No post-processing is required to use it. I'm finishing the code and hope to release it soon. (2023-07-20, 1:31) - [Threejs Dissolve Glass Material](https://andersonmancini.dev/videos/threejs-dissolve-glass-material.md) — With some adjustments to the custom shader inside this material, you can achieve mesh dissolve, which looks like Predator Cloak from the 80's movie ;). (2023-07-17, 0:57) - [Threejs Predator Cloak Material](https://andersonmancini.dev/videos/threejs-predator-cloak-material.md) — Very quick video just to show a simple scene with the material being rendered in a proper Predator model. (2023-07-17, 0:47) - [Threejs Custom Shader Injection from ShaderToy](https://andersonmancini.dev/videos/threejs-custom-shader-injection-from-shadertoy.md) — One of the things I love the most in is the onBeforeCompile method. You can extend default materials keeping their properties. I created this glass… (2023-07-15, 2:13) - [Scrollable page and Configurator using SketchFab](https://andersonmancini.dev/videos/scrollable-page-and-configurator-using-sketchfab.md) — Here at Neotix, we also work with our partner Sketchfab. Initially, it is known for making it easy for anyone to publish and find 3D content online. But he… (2023-07-13, 1:23) - [Three.js Car Paint Material Flakes - Pixotronics](https://andersonmancini.dev/videos/three-js-car-paint-material-flakes-pixotronics.md) — I love material compositing when I'm doing my projects in threejs. In this case, adding flakes to the car's paintwork gives additional realism to this type… (2023-07-11, 0:49) - [Project Cars Color Grading and HDRMapEditor from Pixotronics](https://andersonmancini.dev/videos/project-cars-color-grading-and-hdrmapeditor-from-pixotronics.md) — A little bit of the creative coding process, adjusting colors and environment maps in the Project Cars model by @Immersive Studios. With a little color… (2023-07-10, 1:39) - [Project Cars - Ultra realistic threejs car configurator](https://andersonmancini.dev/videos/project-cars-ultra-realistic-threejs-car-configurator.md) — Project Cars is an unofficial dynamic interactive 3D project made with ThreeJS and Webflow, that enables users to configure a car model in a futuristic 3D… (2023-07-10, 0:27) - [3D virtual Canadian dairy farm experience with Threejs and React Three Fiber](https://andersonmancini.dev/videos/3d-virtual-canadian-dairy-farm-experience-with-threejs-and.md) — Very proud to complete this project with @neotix made in partnership with using and . A digital experience for Dairy Farmers of Canada. Experience… (2023-07-05, 1:17) - [Nikon Landing Page using Pixotronics WEBGI](https://andersonmancini.dev/videos/nikon-landing-page-using-pixotronics-webgi.md) — Experimenting with a dark background design with bright yellow tones for a Nikon landing page. Rendering the model using @pixotronics and . For the… (2023-06-07, 0:45) - [Lens Flare 30 seconds instalation](https://andersonmancini.dev/videos/lens-flare-30-seconds-instalation.md) — Thanks to our friend @MaximeHeckel, we now have the lens flare effect for available on NPM . You can run "npm i @andersonmancini/lens-flare". 30s installation (2023-06-01, 0:35) - [Galaxy Watch Threejs Post processing running Lens Flare @60FPS](https://andersonmancini.dev/videos/galaxy-watch-threejs-post-processing-running-lens-flare.md) — Someone on Twitter asked me if my Lens Flare effect can run on smartwatches. I never tried because this seems very unlike to happen. But to my big surprise… (2023-05-22, 0:27) - [React Three Fiber Post processing](https://andersonmancini.dev/videos/react-three-fiber-post-processing.md) — I'm happy to announce that my new Ultimate Lens Flare component for react three fiber is ready . I can't wait to see what you create with it. I hope you… (2023-05-22, 1:16) - [Ultimate Lens Flare Component](https://andersonmancini.dev/videos/ultimate-lens-flare-component.md) — Almost there . Now my Ultimate Lens Flare for can also support transparency. It can shine through transmissive materials and control its intensity… (2023-05-20, 1:00) - [Lens Flare Component - Threejs](https://andersonmancini.dev/videos/lens-flare-component-threejs.md) — Ultimate Lens Flare is almost done. We now have object occlusion using a raycaster. The hardest so far. I loved this 3D model of the Star Wars Naboo Royal… (2023-05-18, 1:36) - [React Three Fiber Lens Flare Free Component](https://andersonmancini.dev/videos/react-three-fiber-lens-flare-free-component.md) — I am very proud and happy to announce my new free component for React Three Fiber. He's the ultimate Lens Flare we're going to need. (2023-05-16, 1:58) - [Ultimate Lens Flare - Free Component](https://andersonmancini.dev/videos/ultimate-lens-flare-free-component.md) — An update showing some of my new Lens Flare component will also support vector positioning. New controls have been added for more flexibility . Using this… (2023-05-16, 1:53) - [Haunted House React Three Fiber Project](https://andersonmancini.dev/videos/haunted-house-react-three-fiber-project.md) — Sharing here the new project that we just finished with immersive studios. This model was too incredible to be only inside blender hehe. It was not created… (2023-05-05, 0:25) - [Blender mesh optimization for threejs experiences](https://andersonmancini.dev/videos/blender-mesh-optimization-for-threejs-experiences.md) — In this quick tutorial I show how to optimize a complex model, with 9.3 million triangles and 250MB so that it is only 2.7MB. (2023-04-27, 1:44) - [Threejs earring configurator](https://andersonmancini.dev/videos/threejs-earring-configurator.md) — The earring page project that started with mesh optimization is ready. You can see the result here: (2023-04-27, 0:53) - [React Three Fiber Project](https://andersonmancini.dev/videos/react-three-fiber-project.md) — Last tests before releasing my new AutoFocus component for . I took this opportunity to recreate my Windland project but using r3f now. I'm amazed at how… (2023-04-13, 0:58) - [Autofocus Haunted House demo](https://andersonmancini.dev/videos/autofocus-haunted-house-demo.md) — My AutoFocusDOF component will also work for complex scenes . Here, I show an example of it working on the last @ImmersivStudios project, automatically… (2023-04-12, 1:46) - [Autofocus component for post processing](https://andersonmancini.dev/videos/autofocus-component-for-post-processing.md) — This is my first utility component for React Fiber. Just import it and you'll have AutoFocus DOF on meshes, adjusting bokeh, focal length, etc. It will be… (2023-04-11, 1:49) - [Threejs Personal Website](https://andersonmancini.dev/videos/threejs-personal-website.md) — You don't always need to use 3D elements in . In this example, a simple plane with a normal/displacement texture and lights that follows the mouse gives… (2023-04-09, 1:40) - [Three.js Project for Havaianas](https://andersonmancini.dev/videos/three-js-project-for-havaianas.md) — A new project for is finally live. An interactive landing page using and @greensock that shows how the most beloved flip flops in Brazil are created. (2023-04-04, 0:30) - [Immersive Studios Show Reel](https://andersonmancini.dev/videos/immersive-studios-show-reel) — Video by Anderson Mancini about Immersive Studios Show Reel. (2023-03-30, 1:07) - [Three.js Haunted House using React Three Fiber](https://andersonmancini.dev/videos/three-js-haunted-house-using-react-three-fiber.md) — Project of our new @immersivestudios in using React Three Fiber. The result with post-processing is amazing. And animated grass makes all the difference… (2023-03-30, 1:34) - [Threejs Monthly Talk March Episode](https://andersonmancini.dev/videos/threejs-monthly-talk-march-episode.md) — Get ready for a special with: The amazing Video by Anderson Mancini about Threejs Monthly Talk March Episode. (2023-03-24, 0:08) - [New Three.js Sub-Surface Scattering Material](https://andersonmancini.dev/videos/new-three-js-sub-surface-scattering-material.md) — The new MeshTranslucentMaterial created by @N8Programs is fantastic. We can finally have materials that mimic the sub-surface scattering in . I'm using it… (2023-03-15, 0:40) - [Developing theee.js projects for holographic displays using a looking glass factory device](https://andersonmancini.dev/videos/developing-theee-js-projects-for-holographic-displays-using) — Video by Anderson Mancini about Developing theee.js projects for holographic displays using a looking glass factory device. (2023-03-11, 0:15) - [Looking Glass Holographic Monitor running my Three.js projects](https://andersonmancini.dev/videos/looking-glass-holographic-monitor-running-my-three-js.md) — I'm recreating some of my designs to work on the Looking Glass Holographic Monitor ( ). It is very difficult to demonstrate in a video how this device is a… (2023-03-11, 0:22) - [My first React Three Fiber Configurator Course on Udemy](https://andersonmancini.dev/videos/my-first-react-three-fiber-configurator-course-on-udemy.md) — Learn to create a 3D configurator using Three.js, React Three Fiber, Valtio, and Framer Motion. (2023-03-07, 0:48) - [Three.js Pinball in React Three Fiber](https://andersonmancini.dev/videos/three-js-pinball-in-react-three-fiber.md) — Thrilled to share what I'm building with my friend @LeandroCastagno. The final project for using lessons with @pmndrs ecosystem. A Pinball game made 100% in… (2023-03-02, 1:27) - [Threejs Dynamic Textures](https://andersonmancini.dev/videos/threejs-dynamic-textures.md) — In this quick tutorial I tell you how I customized texts in textures of the @gomez control stickers. (2023-02-28, 1:54) - [Threejs Monthly Talk website](https://andersonmancini.dev/videos/threejs-monthly-talk-website.md) — This demo turned out to be an invitation for you to join our server on discord . There, you will be able to listen to past episodes, talk to the community… (2023-02-18, 1:01) - [Three.js Interactive Hero Section with lots of post-processing](https://andersonmancini.dev/videos/three-js-interactive-hero-section-with-lots-of-post.md) — I felt inspired to recreate the beautiful header from pipe's website but using instead of video. And with the right post-processing effects, I ended up with… (2023-02-15, 0:39) - [Three.js selective bloom pass](https://andersonmancini.dev/videos/three-js-selective-bloom-pass.md) — A quick tutorial on how to selectively use Bloom Pass to make objects act as lights in by importing Blender objects with custom properties. (2023-02-13, 1:38) - [THREEJS 3D STEERING WHEEL CONFIGURATOR](https://andersonmancini.dev/videos/threejs-3d-steering-wheel-configurator.md) — It's finally live. My most complete configurator using to date is live and I'm extremely happy with the result. I'm going to share a series of videos… (2023-02-10, 0:52) - [How to use threejs with a Wix website - Free course](https://andersonmancini.dev/videos/how-to-use-threejs-with-a-wix-website-free-course.md) — In this video I show you how to create an implementation of three.js using the WIX website builder, which is widely used by developers. (2023-02-01, 26:53) - [Threejs and Midjourney React Three Fiber Landing page](https://andersonmancini.dev/videos/threejs-and-midjourney-react-three-fiber-landing-page.md) — The page where you can see the Pinball machine concepts I created using is my first project created in React Three Fiber. Thanks to XXX's work, I was able… (2023-01-23, 0:27) ## 2022 - [Three.js Rolex Scrollable Page](https://andersonmancini.dev/videos/three-js-rolex-scrollable-page.md) — Another scrollable page demo on , this time with a Rolex watch featuring @pixotronics. The clock actually works . Want to learn it? I will be adding more… (2022-12-11, 0:54) - [GSI Wheel Configurator - Threejs](https://andersonmancini.dev/videos/gsi-wheel-configurator-threejs.md) — Imagine configuring your dream racing simulator wheel and after purchasing it, receiving it in your home the way you dreamed? Made in for Gomez Sim Racing… (2022-11-29, 0:43) - [Ola Research - Multiple page Threejs Experience](https://andersonmancini.dev/videos/ola-research-multiple-page-threejs-experience.md) — My first full-featured multi-page website using . It all started with an idea by @OLA_research to test an organic 3D model and ended up being a complex… (2022-10-27, 1:01) - [Part 3 - Threejs Scrollable Page - Configurator](https://andersonmancini.dev/videos/part-3-threejs-scrollable-page-configurator.md) — The 3rd and final part of the free course. Let's fix some things from the previous class and learn how to create the interface that allows you to configure… (2022-10-24, 32:45) - [Threejs Configurator - Free course Trailer](https://andersonmancini.dev/videos/threejs-configurator-free-course-trailer) — Subscribe for updates: Video by Anderson Mancini about Threejs Configurator - Free course Trailer. (2022-10-23, 0:28) - [Jiotto Webgi Webflow Clonable](https://andersonmancini.dev/videos/jiotto-webgi-webflow-clonable.md) — Check out the result of this amazing clone created with my friend Diego Toda from twitter (@dieg0liv) using , pixotronics, and greensock for the user… (2022-10-04, 0:55) - [Part 2 - Threejs Scrollable Page](https://andersonmancini.dev/videos/part-2-threejs-scrollable-page.md) — This is the second part of the crash course on how to use GSAP with ScrollTrigger to control and integrate 3D models into scrollable landing pages using… (2022-10-01, 30:47) - [Part 1 - Threejs Scrollable Page](https://andersonmancini.dev/videos/part-1-threejs-scrollable-page.md) — Part two of this course available here: Video by Anderson Mancini about Part 1 - Threejs Scrollable Page. (2022-09-17, 1:12:05) - [Build your own Threejs and ScrollTrigger page](https://andersonmancini.dev/videos/build-your-own-threejs-and-scrolltrigger-page.md) — To celebrate my birthday, this Saturday I will be making available, for a limited time, a free YouTube course on how to create immersive experiences with… (2022-09-15, 0:58) - [Threejs Apple Watch Pro Launch Demo](https://andersonmancini.dev/videos/threejs-apple-watch-pro-launch-demo.md) — What if Apple released a new sunlight-powered Watch Pro at ? I imagined what the page would look like using , pixotronics and @greensock. What do you think?… (2022-09-06, 1:19) - [Threejs Jewelry Landing page on Awwwards](https://andersonmancini.dev/videos/threejs-jewelry-landing-page-on-awwwards.md) — Very proud to have another project awarded on @awwwards (2022-09-01, 0:55) - [Threejs VR Seat Selector - Concert Hall](https://andersonmancini.dev/videos/threejs-vr-seat-selector-concert-hall.md) — What if we could select our seats in 3D? How cool would it be to be able to hear the spatial audio experience before buying? Soon you will be able to do… (2022-08-26, 1:31) - [Threejs Concert Hall](https://andersonmancini.dev/videos/threejs-concert-hall.md) — The concert hall is working on now. I'm using Yannic's Screen Space reflections. 60 FPS of pure beauty . This will be my first real product to market. Live… (2022-08-21, 1:17) - [Threejs Reflexive Gallery Environment](https://andersonmancini.dev/videos/threejs-reflexive-gallery-environment.md) — I'm creating a new tutorial in using the Screen Space Reflector, inspired by the wonderful site motleycrowd.live. Coming soon, a video showing how to do it… (2022-08-12, 0:53) - [Jewelry Landing Page](https://andersonmancini.dev/videos/jewelry-landing-page) — Jewelry landing page, using , smooth material transitions with scrolltrigger and a configurator using Pixotronics API. (2022-08-03, 1:12) - [Threejs Jewelry Landing Page](https://andersonmancini.dev/videos/threejs-jewelry-landing-page.md) — I challenged myself to recreate my previous project using @pixotronics and their wonderful diamond material. The result was much better, now using the… (2022-07-31, 1:57) - [Threejs WEBGi landing page with source code available](https://andersonmancini.dev/videos/threejs-webgi-landing-page-with-source-code-available.md) — As promised, here is the landing page made in using WEBGi from @pixotronics. Now, you can use the source code + the video tutorial of the design process to… (2022-07-26, 0:49) - [Threejs Canon landing page design process](https://andersonmancini.dev/videos/threejs-canon-landing-page-design-process.md) — This is the process I used to create this page design in using @pixotronics WEBGi to render the images and videos. The full video is on my youtube because… (2022-07-22, 3:29) - [Threejs DSLR Camera Landing Page](https://andersonmancini.dev/videos/threejs-dslr-camera-landing-page.md) — Starting a new project in threejs with a new renderer. This time will be a DSLR camera landing page using ScrollTrigger. (2022-07-21, 0:21) - [Archiviz in Threejs on Awwwards](https://andersonmancini.dev/videos/archiviz-in-threejs-on-awwwards.md) — Here: voting on @awwwards is open for my architectural visualization project at . If you can vote, I will be very grateful . We now have vegetation and a… (2022-07-04, 1:00) - [Threejs Jewelry Live Link](https://andersonmancini.dev/videos/threejs-jewelry-live-link.md) — Finally the live link: After almost a week of work, my jewelry configurator project in is done , also working on mobile devices. (2022-06-30, 1:11) - [Threejs Jewelry Configurator](https://andersonmancini.dev/videos/threejs-jewelry-configurator-2022-06.md) — One more update to the jewelry configurator in before the final link. Now, we have material switching, a better night mode, and a preview mode to try on the… (2022-06-28, 1:27) - [Threejs Jewelry Configurator](https://andersonmancini.dev/videos/threejs-jewelry-configurator.md) — An update on the jewelry project with . Now we have a very smooth interface and animations. It is possible to change colors, create custom colors, change… (2022-06-26, 1:36) - [Threejs Jewelry Configurator](https://andersonmancini.dev/videos/threejs-jewelry-configurator-2022-06-taqhejstz8q.md) — Starting another project. This time a jewel configurator in . I know there are many out there already, but my journey wouldn't be complete if I didn't make… (2022-06-24, 1:25) - [Threejs Archviz Live Link](https://andersonmancini.dev/videos/threejs-archviz-live-link.md) — Very happy to finish another Archiviz project in threejs. Many things remained to be added, such as vegetation, more decoration objects. I will do an… (2022-06-17, 1:30) - [Threejs Archviz](https://andersonmancini.dev/videos/threejs-archviz.md) — In this video, I show a little bit of the process I use to optimize the model I exported from Blender to Threejs, which I created in the previous video. I… (2022-06-15, 2:01) - [Threejs architectural visualization](https://andersonmancini.dev/videos/threejs-architectural-visualization.md) — Starting another architectural visualization project in Threejs. These are my studies of lights and materials. I always start with Blender to prepare the… (2022-06-13, 1:05) - [THREEJS Particle System](https://andersonmancini.dev/videos/threejs-particle-system-2022-06.md) — In this video, I show the process of how to create a threejs scene and turn any loaded model into a particle system. In addition, I also show you how to use… (2022-06-09, 5:16) - [Threejs particle system](https://andersonmancini.dev/videos/threejs-particle-system.md) — Doing some interesting experiments for the "gamersgoldgg" login screen in . Using the particle system is extremely pleasurable as it allows animate many… (2022-05-25, 0:56) - [Threejs Graces](https://andersonmancini.dev/videos/threejs-graces.md) — As promised, the final version with the live link and source code of the "Three Graces" using . Now with a magnetic menu and a loader . I hope you like it! (2022-05-20, 1:08) - [Threejs + Intersection Observer](https://andersonmancini.dev/videos/threejs-intersection-observer.md) — Almost done with this new experience. Source code is already available on my GitHub profile. Here is a tutorial on how I used javaScript Intersection… (2022-05-18, 1:09) - [Threejs Three Graces Design Concept](https://andersonmancini.dev/videos/threejs-three-graces-design-concept.md) — In this project, I wanted to show that creating a fancy design like this using is not as difficult as it looks. It has only 240 lines of code. The live link… (2022-05-17, 0:45) - [Threejs Cosmetics Time Lapse](https://andersonmancini.dev/videos/threejs-cosmetics-time-lapse.md) — This is a video tutorial of how we made the cosmetics project using @blender3d and . I show you how to set up the glass materials and get the reflections… (2022-05-04, 7:13) - [+ Live link - Three.js Organic architecture](https://andersonmancini.dev/videos/live-link-three-js-organic-architecture.md) — Another update on OLA_research organic architecture using . Now, we have the lights baked into the textures and the post-processing effects. I also show a… (2022-05-02, 1:40) - [Organic Architecture and Three.js](https://andersonmancini.dev/videos/organic-architecture-and-three-js.md) — Update on experiment with OLA_research 3D model. Is looking more and more like a website . The next step is to bake the lighting to gain some additional… (2022-05-01, 0:59) - [Threejs Organic Architecture](https://andersonmancini.dev/videos/threejs-organic-architecture.md) — Doing some experiments with and organic architecture using this awesome building by @OLA_research. I'm still not sure what this will be, but it looks pretty… (2022-04-25, 1:18) - [Finished Cosmetics Demo - Live Link](https://andersonmancini.dev/videos/finished-cosmetics-demo-live-link.md) — Finished the Three.js cosmetics demo, this time using my boilerplate . Soon, the time-lapse will be available here on YouTube. Hope you like it! (2022-04-23, 1:17) - [Threejs Smooth Color Change](https://andersonmancini.dev/videos/threejs-smooth-color-change.md) — Almost finished the experience of rendering cosmetics in . Now we have the UI animations and smooth color switching, which I show you how to do very quickly… (2022-04-19, 1:28) - [Threejs Cosmetics Rendering](https://andersonmancini.dev/videos/threejs-cosmetics-rendering.md) — An updated cosmetic experiment in renders done in collab with my friend from Twitter. Now we have a little interface and a dynamic light that follows the… (2022-04-18, 0:48) - [Threejs rendering cosmetics](https://andersonmancini.dev/videos/threejs-rendering-cosmetics.md) — Doing a little 3D experiment with my friend Collapse from Twitter rendering cosmetics using . I'm recording everything so you'll be able to watch the… (2022-04-16, 0:47) - [How to use my threejs boilerplate](https://andersonmancini.dev/videos/how-to-use-my-threejs-boilerplate.md) — This is an intro video on how to use my threejs boilerplate, which is available here: (2022-04-14, 3:27) - [Ektogamat Threejs Boilerplate](https://andersonmancini.dev/videos/ektogamat-threejs-boilerplate.md) — I will soon publish my threejs boilerplate + video tutorial teaching how to do this from scratch. (2022-04-13, 0:56) - [Threejs House Viewer - Dream Houses Live Demo](https://andersonmancini.dev/videos/threejs-house-viewer-dream-houses-live-demo.md) — Another experience finished, using as a traditional element of a page, which turns into an immersive experience. Done with @greensock. Many learnings that… (2022-04-11, 1:17) - [FGR tripod demo](https://andersonmancini.dev/videos/fgr-tripod-demo.md) — The positional audio also from threejs is amazing. You can turn any object in the scene into a sound emitter. Thus, the sound respects the object's position… (2022-04-09, 0:41) - [Threejs City Simulator with Post Effects](https://andersonmancini.dev/videos/threejs-city-simulator-with-post-effects.md) — Now added some post-processing effects from to improve the appearance of the city scene. I am always surprised by the result. I put in day mode an RGB… (2022-04-09, 1:22) - [Game lover meets Threejs](https://andersonmancini.dev/videos/game-lover-meets-threejs.md) — What happens when you teach to a game lover? This guy puts a bunch of easter eggs in the client project. Utility for the project: 0%. Fun level: 100% . Turn… (2022-04-07, 1:30) - [Threejs City Simulator 2022](https://andersonmancini.dev/videos/threejs-city-simulator-2022.md) — Immersive experience in three js with the city of Goiânia in Brazil to demonstrate the location of the real estate developments of a company in the market. (2022-04-05, 1:38) - [Blender light setup for baking](https://andersonmancini.dev/videos/blender-light-setup-for-baking.md) — This is a very quick tutorial on how do I start the light setup for my projects before bake? (2022-04-04, 2:07) - [Threejs Fake God Rays with Meshes](https://andersonmancini.dev/videos/threejs-fake-god-rays-with-meshes.md) — In this tutorial, I quickly showed how to imitate the effect also known as "god rays" using meshes. It is achieved using a custom shader and has zero… (2022-04-04, 2:48) - [Threejs Fake Volumetrics with meshes](https://andersonmancini.dev/videos/threejs-fake-volumetrics-with-meshes.md) — This was a first attempt at making Fake Volumetric light. Aka "God Rays". Doing this with post processing is very expensive. I decided to try knits. It's… (2022-04-03, 0:40) - [Threejs Mesh Reflector](https://andersonmancini.dev/videos/threejs-mesh-reflector) — A small comparison between the Threejs default reflector and the Mesh Reflector, which supports the blurry effect. (2022-04-03, 0:12) - [Threejs Gallery Demo Update](https://andersonmancini.dev/videos/threejs-gallery-demo-update.md) — Some updates on the gallery scene in . Now the lights are much better, the reflection has more resolution and a normal map. We have more detail in the… (2022-04-01, 1:28) - [Gallery Scene blender + threejs](https://andersonmancini.dev/videos/gallery-scene-blender-threejs.md) — One quick tip: Generally, the best way to quickly visualize what your scene might look like inside the after the lights are baked is to use Evee. The result… (2022-03-30, 0:33) - [3D house viewer with threejs](https://andersonmancini.dev/videos/3d-house-viewer-with-threejs.md) — Experience almost finished, but still with some bugs, of 3D house interactivity. The experience starts as a banner in a hero section of a website, but it… (2022-03-28, 0:22) - [Threejs Fog Color GUI](https://andersonmancini.dev/videos/threejs-fog-color-gui) — I love playing with the fog colors in . You can always achieve different ambient color effects in a single adjustment. (2022-03-26, 0:49) - [Threejs Border Radius](https://andersonmancini.dev/videos/threejs-border-radius.md) — Finishing another project, using custom shaders to mask the viewport. I never imagined that getting a simple border radius would be so complex . Live link… (2022-03-24, 0:21) - [Threejs smooth camera animation with GSAP](https://andersonmancini.dev/videos/threejs-smooth-camera-animation-with-gsap.md) — It is very important to study and always try new ways. When I started, I only knew how to animate the camera smoothly with TweenJS. There were many lines of… (2022-03-24, 0:23) - [Experiment with shadows and Threejs](https://andersonmancini.dev/videos/experiment-with-shadows-and-threejs) — Using shaders to pivot the light on a simple model. (2022-03-19, 0:39) - [DNA Chain - Threejs+GSAP experiment](https://andersonmancini.dev/videos/dna-chain-threejs-gsap-experiment.md) — greensock to make a 3D DNA strand and achieve 3 different levels of detail depending on the GPU model. (2022-03-16, 1:27) - [My new theeejs experiment using dna chain and lots of post effects](https://andersonmancini.dev/videos/my-new-theeejs-experiment-using-dna-chain-and-lots-of-post) — Video by Anderson Mancini about My new theeejs experiment using dna chain and lots of post effects. (2022-03-16, 0:59) - [dna double helix threejs](https://andersonmancini.dev/videos/dna-double-helix-threejs.md) — I don't think I'll ever get tired of experimenting with the (2022-03-11, 0:35) - [Threejs product visualization experience](https://andersonmancini.dev/videos/threejs-product-visualization-experience.md) — Another very simple interactive experience for Tablet using and (2022-03-11, 0:18) - [Threejs MeshReflector in Vanilla](https://andersonmancini.dev/videos/threejs-meshreflector-in-vanilla) — Project under development for a House Building company using Threejs Mesh Reflector with depth-based blur in Vanilla. (2022-03-04, 1:07) - [Threejs Parallax Corrected Cube Map Environment Mapping](https://andersonmancini.dev/videos/threejs-parallax-corrected-cube-map-environment-mapping.md) — Making a blurred reflection without post-effects. It looks like Screen Space Reflection, but it's an EnvMap using Box Projected Parallax Correction. Why?… (2022-02-23, 0:40) - [Windland with post-effects on mobile. threejs](https://andersonmancini.dev/videos/windland-with-post-effects-on-mobile-threejs.md) — With all the optimizations made for smartphones, maybe now you can activate post effects with reasonable performance on high-end cell phones. this is under… (2022-02-21, 1:04) - [threejs project running on galaxy watch 4. live link: https://windland-neotix.vercel.app](https://andersonmancini.dev/videos/threejs-project-running-on-galaxy-watch-4-live-link-https) — Running my threejs windland project with minor adjustments on a galaxy-watch 4 smartwatch. (2022-02-20, 0:15) - [Threejs smartwatch demo](https://andersonmancini.dev/videos/threejs-smartwatch-demo) — Running my threejs windland project with minor adjustments on a galaxy-watch 4 smartwatch (2022-02-20) (2022-02-20, 1:18) - [Threejs real estate demo](https://andersonmancini.dev/videos/threejs-real-estate-demo) — A sneak peek at my next project in that will be published soon. More videos and the project link coming soon! (2022-02-15, 0:55) - [Windland. ThreeJS city project by Neotix](https://andersonmancini.dev/videos/windland-threejs-city-project-by-neotix.md) — Updated video with our crafted digital experience for map visualization in three.js - by Neotix. (2022-02-10, 1:49) - [Three.js City - by Neotix](https://andersonmancini.dev/videos/three-js-city-by-neotix.md) — Crafted digital experience for map visualization in three.js - by Neotix. (2022-02-02, 1:26) ## 2021 - [Teleportation with three.js transition from https://www.youtube.com/watch?v=GeNjyb8UBKM](https://andersonmancini.dev/videos/teleportation-with-three-js-transition-from-https-www.md) — I love easter eggs in games. It's pure fun. So, I decided to create one, allowing a ride and taking the opportunity to use the teleport transition effect… (2021-12-28, 0:34) - [ModelViewer Tutorial - Threejs](https://andersonmancini.dev/videos/modelviewer-tutorial-threejs.md) — In this video I share some of my experience with ModelViewer and Three.js to build a product demo quickly and easily. If you find it useful, please share… (2021-12-16, 3:28) - [Teleportation with three.js transition](https://andersonmancini.dev/videos/teleportation-with-three-js-transition.md) — Original: Video by Anderson Mancini about Teleportation with three.js transition. (2021-12-05, 1:18:20) - [Promo website with Threejs](https://andersonmancini.dev/videos/promo-website-with-threejs.md) — Another fresh project using and knowledge. At the end, some behind the scenes with modeling techniques using ultra low poly and normal maps. (2021-12-03, 1:20) - [Threejs 3D Website - Goiânia City Demo](https://andersonmancini.dev/videos/threejs-3d-website-goiania-city-demo.md) — Some images of project evolution. This is a Three.js (WEBGL) project of the city of Goiânia - Brazil. It shows several neighborhoods at the same time, using… (2021-12-03, 1:16)