Loading video...

Video Failed to Load

There was a problem loading this video. This could be due to a temporary network issue or the video might be unavailable.

⚡️Live: You don't always need to use 3D elements in #threejs. In this example, a simple plane with a normal/displacement texture and lights that follows the mouse gives nice effects😍 The source code is here: #threejsJourney #r3f

Anderson Mancini

13,888 subscribers

47,570 views • 3 years ago •via X (Twitter)

Education Science & Technology #threejs #threejsJourney #r3f

Anya Rossi• Live Now

Private livecam show

10 Comments

Ali3 years ago

Nice. Love it. Could this be also a texture made visible? For example a fabric?

Anderson Mancini3 years ago

Thank you Ali ;). Ahhh yes. It would work the same way ;).

The Ebenezer3 years ago

You always come up with some ingenious solutions, Anderson! 🤩

Anderson Mancini3 years ago

Thank you my friend!!! 😁

0beqz3 years ago

Love the colors and composition, great work as always Anderson!

Anderson Mancini3 years ago

Thank you so much, my dear friend!!!! 😊

Adam3 years ago

Waw, ok, that's gorgeous ! Crazy all the stuff a simple plane can do for you!

Anderson Mancini3 years ago

@_Axiome_ Thanks bro 😁. Sometimes we imagine that things are more complicated than they actually are in threejs heheh.

Akash3 years ago

You keep my motivation up. This is amazing work! ❤️

Anderson Mancini3 years ago

@akash_deblanq Thank you so much ✌🏻 😁

Related Videos

My <FakeGlowMaterial /> for #r3f is finally available. You can create glow effects through #glsl shaders and meshes without any post-processing effects😍 Live: Source: The vanilla #threejs version is coming soon. #threejsJourney

My <FakeGlowMaterial /> for #r3f is finally available. You can create glow effects through #glsl shaders and meshes without any post-processing effects😍 Live: Source: The vanilla #threejs version is coming soon. #threejsJourney

Anderson Mancini

20,659 views • 2 years ago

My Holographic Material for #threejs / #r3f is ready😍. It is very easy to use and with good documentation. ⚡️You can download it now The vanilla version is coming soon. Please, leave a star on GitHub if you can🙏🏻. #threejsJourney

My Holographic Material for #threejs / #r3f is ready😍. It is very easy to use and with good documentation. ⚡️You can download it now The vanilla version is coming soon. Please, leave a star on GitHub if you can🙏🏻. #threejsJourney

Anderson Mancini

25,601 views • 2 years ago

Following ☄︎ work, I'm experimenting with some react three fiber with #threejs webGPU. We no longer need an EffectComposer to use post-processing effects in #r3f. Now, everything is done by composing TSL nodes. I created a small component that helps in rendering post-processing effects. All you need to do is import the effects you want and add them to the final composition. I will share the link to the demo and source code on Monday 😍. Another thing I want to highlight is how amazing the Screen Space Reflection effect is. It generates reflections not only on the ground, as we had before in r3f in webgl. It is able to calculate the reflections between the meshes. Look how beautiful the reflection of the lightsaber on Darth Vader's mask is. This is not something that is easy to calculate and this is exactly where WebGPU in threejs shines! Congratulations to everyone on the threejs team. I am increasingly impressed with WebGPU and TSL.

Following ☄︎ work, I'm experimenting with some react three fiber with #threejs webGPU. We no longer need an EffectComposer to use post-processing effects in #r3f. Now, everything is done by composing TSL nodes. I created a small component that helps in rendering post-processing effects. All you need to do is import the effects you want and add them to the final composition. I will share the link to the demo and source code on Monday 😍. Another thing I want to highlight is how amazing the Screen Space Reflection effect is. It generates reflections not only on the ground, as we had before in r3f in webgl. It is able to calculate the reflections between the meshes. Look how beautiful the reflection of the lightsaber on Darth Vader's mask is. This is not something that is easy to calculate and this is exactly where WebGPU in threejs shines! Congratulations to everyone on the threejs team. I am increasingly impressed with WebGPU and TSL.

Anderson Mancini

26,339 views • 1 year ago

I felt inspired to recreate the beautiful header from pipe's website but using #threejs instead of video. And with the right post-processing effects, the remastered version has lights that respond to mouse movement with less than 1.7 MB😊. Live link soon. #threejsjourney

I felt inspired to recreate the beautiful header from pipe's website but using #threejs instead of video. And with the right post-processing effects, the remastered version has lights that respond to mouse movement with less than 1.7 MB😊. Live link soon. #threejsjourney

Anderson Mancini

52,980 views • 3 years ago

I modifyed the official example "compute fluid particles" to make it look more liquid. Simply blur the *depth texture* to obtain a smooth surface which has differentiable gradient. Made with #threejs live demo (all source code is in html of the page) ->

I modifyed the official example "compute fluid particles" to make it look more liquid. Simply blur the depth texture to obtain a smooth surface which has differentiable gradient. Made with #threejs live demo (all source code is in html of the page) ->

Maeda Mameo

18,141 views • 11 months ago

New #threejs project live using #r3f, GSAP, and a lot of #glsl shader magic for My Muscle Chef 😍. ⚡️Llive link: I will publish a more detailed tutorial teaching some of the tricks as soon as possible 😬. Hope you like it! #threejsJourney

New #threejs project live using #r3f, GSAP, and a lot of #glsl shader magic for My Muscle Chef 😍. ⚡️Llive link: I will publish a more detailed tutorial teaching some of the tricks as soon as possible 😬. Hope you like it! #threejsJourney

Anderson Mancini

32,118 views • 2 years ago

Source code: Live link: I increased the parallax effect in the background to visualize the liquid glass effect better and created a custom settings panel. Please leave a star on GitHub if it was useful 😊 #threejs #r3f #webgl

Source code: Live link: I increased the parallax effect in the background to visualize the liquid glass effect better and created a custom settings panel. Please leave a star on GitHub if it was useful 😊 #threejs #r3f #webgl

Anderson Mancini

17,859 views • 1 year ago

I modified the official example "ocean" again. This time in TSL. #threejs All source code is in the html of the page.

I modified the official example "ocean" again. This time in TSL. #threejs All source code is in the html of the page.

Maeda Mameo

28,707 views • 1 year ago

It took me forever to figure this out (thanks to my poor math skills 😅) I had to rewrite most of the #ecctrl code to support custom gravity. The basic movement is finally working, but I still need to run more tests and add other features back in 🫠 #threejs #threejsJourney #r3f

It took me forever to figure this out (thanks to my poor math skills 😅) I had to rewrite most of the #ecctrl code to support custom gravity. The basic movement is finally working, but I still need to run more tests and add other features back in 🫠 #threejs #threejsJourney #r3f

Andrew Chen

22,301 views • 1 year ago

▵ Triplex is the React Three Fiber editor where your code is the source of truth! ✨ v0.58.0 has released, sound on! 🔊 🌏 Set provider component props in the UI 🐥 Edit child elements without leaving your open file 😍 Much more #threejs #r3f #reactjs

▵ Triplex is the React Three Fiber editor where your code is the source of truth! ✨ v0.58.0 has released, sound on! 🔊 🌏 Set provider component props in the UI 🐥 Edit child elements without leaving your open file 😍 Much more #threejs #r3f #reactjs

mike douges

284,673 views • 2 years ago

Realistic Water Simulation with #threejs is live: Now, you can configure scenes, objects, colors, and light positions. You can also dive to see the effects from underwater 🌊💧. It works great on mobile 🤩. The breakdown video will be on my YouTube channel soon. Be sure to subscribe so you don't miss it: Thanks again, Evan Wallace, for the inspiration 🙏🏻 #threejsjourney #creativecoding #r3f

Realistic Water Simulation with #threejs is live: Now, you can configure scenes, objects, colors, and light positions. You can also dive to see the effects from underwater 🌊💧. It works great on mobile 🤩. The breakdown video will be on my YouTube channel soon. Be sure to subscribe so you don't miss it: Thanks again, Evan Wallace, for the inspiration 🙏🏻 #threejsjourney #creativecoding #r3f

Anderson Mancini

30,269 views • 1 year ago

Live: Source: You can download this to start your scenes with #r3f, #threejs WebGPU Renderer, and Post-Processing using #tsl. I also converted my jet engine shader from GLSL to TSL using the transpiler. It works like a dream😍. I added the Royal Naboo starship in the scene to show how Screen Space Reflections reacts to all metallic surfaces, not just the floor. I hope you like it. Please give me a star⭐️on GitHub if you can. #threejsJourney

Live: Source: You can download this to start your scenes with #r3f, #threejs WebGPU Renderer, and Post-Processing using #tsl. I also converted my jet engine shader from GLSL to TSL using the transpiler. It works like a dream😍. I added the Royal Naboo starship in the scene to show how Screen Space Reflections reacts to all metallic surfaces, not just the floor. I hope you like it. Please give me a star⭐️on GitHub if you can. #threejsJourney

Anderson Mancini

20,206 views • 1 year ago

My water experiment in #webxr using #threejs is live. If you have a WebXR-compatible device, you can access it here: For now, the experience is optimized for #MetaQuest3. I plan to add support for more devices and improve performance. The source code review video will be available soon on my YouTube channel. I hope you like it 😊 #threejsJourney #ar #vr

My water experiment in #webxr using #threejs is live. If you have a WebXR-compatible device, you can access it here: For now, the experience is optimized for #MetaQuest3. I plan to add support for more devices and improve performance. The source code review video will be available soon on my YouTube channel. I hope you like it 😊 #threejsJourney #ar #vr

Anderson Mancini

11,006 views • 1 year ago

🤔 I’ve always wondered what it feels like to walk on a Möbius ring. (also tested on a torus knot) #threejs #threejsJourney #webdev #opensource #gamedev #r3f #ecctrl

🤔 I’ve always wondered what it feels like to walk on a Möbius ring. (also tested on a torus knot) #threejs #threejsJourney #webdev #opensource #gamedev #r3f #ecctrl

Andrew Chen

12,690 views • 1 year ago

I modified the official example "compute birds" to have 36864 paper planes and twelve monkeys flying among through columns and a hoop like circus acts. TSL runs so fast! created with #threejs live demo (all source code is in html of the page) ->

I modified the official example "compute birds" to have 36864 paper planes and twelve monkeys flying among through columns and a hoop like circus acts. TSL runs so fast! created with #threejs live demo (all source code is in html of the page) ->

Maeda Mameo

16,114 views • 1 year ago

For the last couple months, our team has been working hard on a few paradigm-changing features for HTML Canvas. One of them is the ability to have HTML elements in a canvas. Here's a ThreeJS demo with a live HTML texture.

For the last couple months, our team has been working hard on a few paradigm-changing features for HTML Canvas. One of them is the ability to have HTML elements in a canvas. Here's a ThreeJS demo with a live HTML texture.

Fernando Serboncini

680,654 views • 2 years ago

#UEFN Material tips 🗣️🔥 Use Bump Offset to create fake depth for textures. In this example, I used it to add a darker secondary fence texture that feels behind the main one, like in the 3D world, while remaining a 2D texture applied to the mesh.

#UEFN Material tips 🗣️🔥 Use Bump Offset to create fake depth for textures. In this example, I used it to add a darker secondary fence texture that feels behind the main one, like in the 3D world, while remaining a 2D texture applied to the mesh.

Giova

16,966 views • 1 year ago

⚡️Live: It's finally live. My most complete configurator using #threejs to date is live and I'm extremely happy with the result. I'm going to share a series of videos talking about some development secrets soon🤫. I hope you like it😀. #threejsJourney

⚡️Live: It's finally live. My most complete configurator using #threejs to date is live and I'm extremely happy with the result. I'm going to share a series of videos talking about some development secrets soon🤫. I hope you like it😀. #threejsJourney

Anderson Mancini

90,608 views • 3 years ago

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 visited so you don't miss any. ⚡️Live: Created with Three.js and Poimandres #threejsJourney #r3f #creativecoding

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 visited so you don't miss any. ⚡️Live: Created with Three.js and Poimandres #threejsJourney #r3f #creativecoding

Anderson Mancini

11,092 views • 1 year ago

The (simple) secret sauce behind the sticker 3D effect using #r3f and #reactjs 👉 transparent png + double side texture + clearcoat effect

The (simple) secret sauce behind the sticker 3D effect using #r3f and #reactjs 👉 transparent png + double side texture + clearcoat effect

Baptiste Adrien

76,958 views • 2 years ago