Three.js 3D Elements for your website using ReactJS

Рет қаралды 115,734

Күн бұрын

After learning the basics of web development, you probably want to learn more advanced techniques to improve your website. Enhancing interactions is one way to do this. The most common ones include animations, hovering on buttons, and swiping. In this tutorial, we will learn how to integrate 3D into your React website using Three.js.
You can find the initial code [here](codesandbox.io/s/three-js-ini...) and the final code [here](codesandbox.io/s/three-js-fin....
00:00 Intro to Three.js
03:10 Dependencies
04:00 Box geometry
17:35 Animated Sphere
22:40 Import 3D models
#threejs #webdev #reactjs

Пікірлер: 90

@richardlu6706 2 жыл бұрын

Thanks for the quick and clear tutorial! I can't wait to start making cool 3D stuff for my site.

@entech5669 2 жыл бұрын

Much needed tutorial. I'll try this. Please make more tutorials on using Three js in React.

@DesignCodeTeam 2 жыл бұрын

Great suggestion, thanks!

@kumarshivam7613 Жыл бұрын

so far the best three js tutorial

@morenoanalie14 2 жыл бұрын

This tutorial is the best! I’m very inspired. Can’t wait to do more 3D stuffs! Thank you for this!

@DesignCodeTeam 2 жыл бұрын

Awesome! Thank you!

@Shelly-kx2wz 2 жыл бұрын

A very good introduction to threejs for beginners.

@MrQooje2 2 жыл бұрын

Wow. It all makes sense now. Thanks a lot!

@dmitriyparhomenko7963 2 жыл бұрын

Very clear! Thanks!

@khairussaniismail8759 2 жыл бұрын

Great tutorial! Very clear explanation

@mrjebbar 2 жыл бұрын

Excellent tutorial. Thank you very much for your time and knowledge

@kbbk.studio Жыл бұрын

need to test it but seems like exactly what i’ve been looking for ✨

@marinakhamis221 2 жыл бұрын

This tutorial is really impressive👏 keep going!🔥

@DesignCodeTeam 2 жыл бұрын

Thank you 🙌

@alfrugo 2 жыл бұрын

thank you thank you! this tutorial is perfect.

@nickbeaumont2601 Жыл бұрын

Awesome tutorial. Thank you. For anyone wondering the third package is pronounced "dry" not "drey"

@bry4n_h 2 жыл бұрын

Wow awesome video. It’s highly educational! Good job!

@ryanhartley2838 2 жыл бұрын

Thank you! This was cool!

@threeveloper 2 жыл бұрын

Great video! Never used the MeshDistortMaterial myself yet :)

@abdelrahmanmahmoud173 Жыл бұрын

Its more than amazing , explaining so many in a simple way and made it for free , God bless you , thank you very much

@DesignCodeTeam Жыл бұрын

You are most welcome

@Kevin-cg7qk 2 жыл бұрын

Excellent tutorial!

@ajadavis2000 2 жыл бұрын

cool video! any idea how we could combine the normal map material with the meshdistort material?

@NYProductions 2 жыл бұрын

Thanks. Will try this out.

@DesignCodeTeam 2 жыл бұрын

Hope you enjoy

@saifsaeed1158 2 жыл бұрын

thank you so much for the amazing stuff , good luck

@Acumen928 Жыл бұрын

A delightful tutorial

@claybowser 2 жыл бұрын

this is an amazing guide thank you

@DesignCodeTeam 2 жыл бұрын

Glad it was helpful! ☺️

@hoangjacktv5392 2 жыл бұрын

Thank you so much this helped a lot!!!! You saved my life

@Blure 2 жыл бұрын

Thanks for the video mate. I have a question; is it possible to use pure three.js inside a three-fiber project? I'd like to return geometries and models as components but writing them in pure three.js I wonder if that's possible.

@swapnildeshmukh5900 Жыл бұрын

Thank you very much

@miguecast 2 жыл бұрын

Well done! Have you more material(React-threejs)? Thanks!

@AbdulRehman-lt2gm 2 жыл бұрын

Really helpful. Can you please make a video that can customize the 3d model and apply different materials on it. I will be waiting for this video.

@YeLu-zi6oy Жыл бұрын

Is there a way to resize the texture image using react three fiber? I applied an image on a circle but it's not fitting the whole circle for some reason. I feel like it has something to do with UV mapping?

@sudgamer4639 Жыл бұрын

hanks lot Sir.. You helping us..

@henriquecavalcante9298 Жыл бұрын

Worked, thx

@maneth3448 2 жыл бұрын

Very helpful bro thanku very much!

@DesignCodeTeam 2 жыл бұрын

Happy to help

@taniakhan5319 Жыл бұрын

thank you so so so much your a great person you helped

@jordanshaw1223 2 жыл бұрын

thanks for thisss.

@subzero2971 Жыл бұрын

Hi there thank you for these tutorial I have a question how can I make button on the object like car door or window when I click on car door call a function i made before ??? And thank you again ❤❤

@bessimboujebli4785 2 жыл бұрын

Thank you so much

@DesignCodeTeam 2 жыл бұрын

You're most welcome

@weihongooi7656 2 жыл бұрын

In the playlist, I want to take a part of two tracks and put it in the setuper, but I don't know how...I want to setup each track piece by piece,

@bavisettipavankalyan5791 9 ай бұрын

Awesome 🎉

@user-jr8np3rk6w 11 ай бұрын

it is an excellent tutorial, i was wondering if you could tail me where you got the background it look awesome. i think you should make a separate video to show where you got the assets and shoe us how you did it

@rajsinghsinghal Жыл бұрын

hey there, can you update this tutorial because I really want to build this but it's not working, after typing the canvas section the code doesn't work and it says TypeError, also your complete project link in the description is not working which says cannot find the sandbox.

@ankittripathi5301 2 жыл бұрын

great content

@serychristianrenaud 2 жыл бұрын

Thanks

@user-zd7tg3kh4k Жыл бұрын

谢谢您。李老师

@top_louie8304 2 жыл бұрын

Very nice ..

@ryanwethey2658 2 жыл бұрын

Any luck doing this is Next.js? Getting a Document is not defined when trying to use the useLoader function

@denniswambua4471 2 жыл бұрын

hey my am unable to render texture onto my shape the shape just disappears after following what youv'e done on the video

@thaislopes5868 Жыл бұрын

does anyone know where i can get the pirated version of soft soft

@Limestarz 2 жыл бұрын

I was trying to add this to my current website with react. But whenever I add Canvas to my app.js my screen will go blank. Not sure why that is. I can't seem to put it in any other components of my as well. However, strangely enough I can add it to my index.js file but it doesn't show any box. Any suggestions?

@whisperdev 8 ай бұрын

Assuming you already understand this a year later, clicking the refresh button in the built-in output on codesandbox fixes the issue, and displays errors that are needed to be fixed.