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

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

Excellent tutorial!

@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

@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

@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.

@thaislopes5868 Жыл бұрын

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

@francisdonald4298 2 жыл бұрын

If u learn three.js is there need for css????

@sarmadali77771 2 жыл бұрын

DesignCode content always premium. 😘

@DesignCodeTeam 2 жыл бұрын

We appreciate you!

@teknicalmage6370 2 жыл бұрын

What is the point of the wrapper

@user-zu9hp8wv2x 8 ай бұрын

Can we use three.js in our react project to show 3d Model using the usdz format and also using the URLs( without the file)

@alesholman801 11 ай бұрын

26:15 the npx gltfjsx command doesnt work, firstly it ask me that gltfjsx@6.2.13 package needs to be installed and then it completes but doesnt create .js file

@vinopower2023 Жыл бұрын

hey , subscribed

@DesignCodeTeam Жыл бұрын

Thank you!

@ninoo4894 Жыл бұрын

I have a question about importing our own models. I tried the exact way through the cmd but on the end I get a jsx file instead of a js file which makes it a problem when importing to react. Do you have any solutions?

@YiranFitzpatrick 10 ай бұрын

I got the same issue.

@ziponer13 2 жыл бұрын

I am your 900th like!

@adebayokehinde1580 Жыл бұрын

second sandbox link is not working

@MatichekYoutube Жыл бұрын

I get - "React.useId is not a function" on initial code

@OleksandrLiubynskyi Жыл бұрын

sandbox not found((

@damnft8218 Жыл бұрын

Open source is what makes three.js

@crudedefe3177 2 жыл бұрын

Am I able to do this in visual studio code?

@merotuts9819 2 жыл бұрын

Will it be helpful to make the most out of Three.JS and other 3D JS Libraries if I learn Blender or other 3D model generating/editing software ?

@0O0day 2 жыл бұрын

PLZ Three.js In Vue js

@DesignCodeTeam 2 жыл бұрын

Will definitely keep in mind!

@HusamNasrullah 2 жыл бұрын

Yesss please!

@thelonercoder5816 2 жыл бұрын

I cant be the only one who keeps getting the "can't assign to property "_updatedFibers" on 0: not an object" on the Canvas part lol..

@southern-cross-usee 2 жыл бұрын

changing version of Dependencies in accordance with author helped me with that

@dahmaneabderrazak7760 2 жыл бұрын

My brain is overheating

@VishalMishra-ks7qt 2 жыл бұрын

Can anyone please help me to add gradient texture to three js blob in react js, please.....

@siddarth1346 Жыл бұрын

Thank you so much ily asian man i hope u get free donut and cupcake and lot of money

@tanweerchiktay Жыл бұрын

Hi hi

@knaxel Жыл бұрын

ur code links down in < 1 year...

@thelonercoder5816 2 жыл бұрын

yah im 10 mins in this tutorial and im getting nothing but errors..

@alexandru-ioanidriceanu5373 Жыл бұрын

U rember to co back? Lmao

@ahmadsalah1721 Жыл бұрын

very bad tutorial nothing is clear didn't explain the numbers he was adding.

@KevinOsterkilde 2 жыл бұрын

You've been pronouncing "drei" wrong all this time. It's "three" spelled (and should be pronounced) in German. You're also not rotating or moving anything in "3D dimensions" but you are doing so in 3 dimensions. That's literally what 3D means. Other than that, interesting video, thanks for taking the time to make it.

@VishalMishra-ks7qt 2 жыл бұрын

Hey can you help me with adding gradient texture on blob using three js in react...