Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

⚡️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

Andersonmancini's profile picture

Anderson Mancini

13,888 subscribers

47,570 görüntüleme • 3 yıl önce •via X (Twitter)

EğitimBilim & Teknoloji#threejs#threejsJourney#r3f
LIVE

Anya Rossi• Live Now

Private livecam show

10 Yorum

Ali profil fotoğrafı
Ali3 yıl önce

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

Anderson Mancini profil fotoğrafı
Anderson Mancini3 yıl önce

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

The Ebenezer profil fotoğrafı
The Ebenezer3 yıl önce

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

Anderson Mancini profil fotoğrafı
Anderson Mancini3 yıl önce

Thank you my friend!!! 😁

0beqz profil fotoğrafı
0beqz3 yıl önce

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

Anderson Mancini profil fotoğrafı
Anderson Mancini3 yıl önce

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

Adam profil fotoğrafı
Adam3 yıl önce

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

Anderson Mancini profil fotoğrafı
Anderson Mancini3 yıl önce

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

Akash profil fotoğrafı
Akash3 yıl önce

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

Anderson Mancini profil fotoğrafı
Anderson Mancini3 yıl önce

@akash_deblanq Thank you so much ✌🏻 😁

Benzer Videolar

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
1:09

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,665 görüntüleme • 2 yıl önce

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
0:42

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,773 görüntüleme • 2 yıl önce

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.
1:41

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 görüntüleme • 1 yıl önce

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
0:38

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,983 görüntüleme • 3 yıl önce

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) ->
0:33

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 görüntüleme • 1 yıl önce

I was asked by many people last week about how to use the new ThreeJS WebGPU inspector and control panel in React-Three-Fiber. Here is how I personally use it: Code: Demo: #threejs #r3f #creativecoding
0:36

I was asked by many people last week about how to use the new ThreeJS WebGPU inspector and control panel in React-Three-Fiber. Here is how I personally use it: Code: Demo: #threejs #r3f #creativecoding

Faraz

45,527 görüntüleme • 1 ay önce

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
1:23

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,135 görüntüleme • 2 yıl önce

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
1:43

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 görüntüleme • 1 yıl önce

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
0:31

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 görüntüleme • 1 yıl önce

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
2:32

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,287 görüntüleme • 1 yıl önce

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
1:27

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,231 görüntüleme • 1 yıl önce

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
0:51

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 görüntüleme • 1 yıl önce

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) ->
0:35

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 görüntüleme • 1 yıl önce

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.
0:43

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

681,185 görüntüleme • 2 yıl önce

#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.
0:27

#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 görüntüleme • 1 yıl önce

<mesh> <FakeGlowMaterial /> </mesh> A new component is coming. A very simple, easy-to-use, fake glow material. This can create a glow around the mesh without any post-processing. Available soon for vanilla #threejs and #react three fiber 😍 #threejsJourney
0:50

<mesh> <FakeGlowMaterial /> </mesh> A new component is coming. A very simple, easy-to-use, fake glow material. This can create a glow around the mesh without any post-processing. Available soon for vanilla #threejs and #react three fiber 😍 #threejsJourney

Anderson Mancini

26,380 görüntüleme • 2 yıl önce

⚡️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
0:52

⚡️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,619 görüntüleme • 3 yıl önce

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 to show the incredible results that mrdoob 's work with probes can provide. As you can see in the video, the hybrid solution of probes with SSGI blends the best of both worlds: projected lights when the objects emitting the color are in the scene, and indirect light provided by the probes when they are not. Of course, nobody is going to use red and green walls at home lol. This is just a visual example to exaggerate the use and demonstrate how the technology works from a creative point of view. I hope it helps someone 🤗. #threejs #threejsJourney #creativecoding #webgpu
2:42

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 to show the incredible results that mrdoob 's work with probes can provide. As you can see in the video, the hybrid solution of probes with SSGI blends the best of both worlds: projected lights when the objects emitting the color are in the scene, and indirect light provided by the probes when they are not. Of course, nobody is going to use red and green walls at home lol. This is just a visual example to exaggerate the use and demonstrate how the technology works from a creative point of view. I hope it helps someone 🤗. #threejs #threejsJourney #creativecoding #webgpu

Anderson Mancini

12,632 görüntüleme • 2 ay önce

New trailer is here for Screenbound, the game that gives you a handheld console with the power to play in both 2D and 3D... at the same time
1:26

New trailer is here for Screenbound, the game that gives you a handheld console with the power to play in both 2D and 3D... at the same time

Jake Lucky

31,791 görüntüleme • 3 ay önce