正在加载视频...

视频加载失败

返回首页

⚡️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 次观看 • 3 年前 •via X (Twitter)

教育科学技术#threejs#threejsJourney#r3f
LIVE

Anya Rossi• Live Now

Private livecam show

10 条评论

Ali 的头像
Ali3 年前

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

Anderson Mancini 的头像
Anderson Mancini3 年前

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

The Ebenezer 的头像
The Ebenezer3 年前

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

Anderson Mancini 的头像
Anderson Mancini3 年前

Thank you my friend!!! 😁

0beqz 的头像
0beqz3 年前

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

Anderson Mancini 的头像
Anderson Mancini3 年前

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

Adam 的头像
Adam3 年前

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

Anderson Mancini 的头像
Anderson Mancini3 年前

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

Akash 的头像
Akash3 年前

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

Anderson Mancini 的头像
Anderson Mancini3 年前

@akash_deblanq Thank you so much ✌🏻 😁

相关视频

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 次观看 • 2 年前

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 次观看 • 2 年前

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,822 次观看 • 1 年前

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 次观看 • 3 年前

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 次观看 • 1 年前

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,682 次观看 • 1 个月前

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 次观看 • 2 年前

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 次观看 • 1 年前

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 次观看 • 1 年前

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,310 次观看 • 1 年前

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 次观看 • 1 年前

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 次观看 • 1 年前

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 次观看 • 1 年前

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 次观看 • 2 年前

#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 次观看 • 1 年前

<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 次观看 • 2 年前

⚡️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 次观看 • 3 年前

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 次观看 • 2 个月前

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 次观看 • 3 个月前