Fantastic, this is the way to learn. This guy actually makes me feel uncomfortable paying for courses and tutorials with this production quality here on yt. Couldn’t be more grateful for a creator like this ;)
No face today, I am currently out of town! But I hope you enjoy this awesome R3F Video :) I just put out a poll about a course I am doing. Be sure to vote on it! Take care guys.
Awesome video! Would you be able to show us how to implement a way to click on parts of a model to display a description? Like clicking part of the furniture would display "Cushion" or "Chair Leg" Looking forward to more tutorials! :)
This is the exact tutorial that I was looking for! Thank you for such an informative content! Btw, I ran into one issue... I no longer see Html contents once I wrap it with Section component (around 13:31) Do you, by any chance, know what might be causing this? Thank you again in advance!
Thanks for amazing tutorial I hope you will I have problem with open the project I dont know why, npm install gives ann error do u know how can I solve this
I'm following this wonderful tutorial buy my issue came when I try to load my model. My model is in public too but nothing shows up when I call the function in the app.
Excellent Tutorial would be excellent if you include how to deploy the site. I find that is where issues start occurring for Three JS, especially when loading in custom 3D assets.
I tried getting started on this project and out of the gate when I'm using `npm i` I'm getting a lot of deprecated packages so @node_modules aren't being installed.
I am super confused as to how there is a shadow at 18:41 before the lights are added. Is this built in to the gltf? I had to switch to useFBX, GLTF was not working for me with next.js.
@@marcelajaklova6560 I had forgotten about this, just opened the GLTF in blender. It is a false shadow. There is a floor plane that has an image texture of a shadow. I've recently been using drei's gltfjsx to convert gltfs to .js components. With this you can easily remove any included geometry you don't want, like the false shadow for example.
Guys it is already responsive. But with react native we can improve performance a little I guess. I will try it out later and maybe write a article on this
Thank you so much Wrong Akram for your amazing lessons. Really helpful :) I was wondering, what VS code plugins do you use to fasten your work process?
please i have a Drei error, i can't import anything from drei, do you know why is this happening? i downloaded the latest three.js as well as drei, and it still doesnt wanna work
Is there any way you could make a tutorial on how to deploy a project like this. Ive had so many issues with deploying to something like github pages and all the errors make it impossible to have to render anything on the page.
Could you maybe specify in your video's which version of react you are using? I've been having a lot of issues with compatibility and it would help me out alot! Thanks in advance.
Edit: I got it to work! My gltf file has reflections, but the reflections seems to show as very dark or black on the site. How can I make them coloured and bright? Do i need an environment? And if so how do I add one? Thanks!
When you define the position by sets of 250, is that a pre-defined value by the section component, if you had it so the positionY would be 100, 0, -100 would this also be ok, would it just mean adjusting the camera? Love your content by the way, really excellent.
My problem is that other 3D asset appears really small, but your assets are large, I tried scaling but realize that there are inbalances that comes with it.
@@WrongAkram amazing! also in the video you spoke about Paul's codepen re the hook/responsive height being in the description but it's not nor can I find it from google? Any help there? many thanks in advance
They should come with a texture folder. I added the compressed to the name since I compressed the image sizes. Download then and drag them to your public or build folder
@@WrongAkram i forgot to change the uri inside the .gltf file, once you change the name of the .bin(nary) file. should change also the path to the bin.
@@WrongAkram Haha all good, the music blends very well with the video. I couldn't find good ones there for my video, or I'm just not good at picking one
For those people that is using windows, the problem is the z-index. I added on and inside the scrollArea scss I added z-index equals to 100. That solves the problem :). Btw really good video
hellow sir i got this error on all three models please help index.js:1 Error: THREE.GLTFLoader: Failed to load buffer "armchairGray.bin". at Object.onError (GLTFLoader.js:2006) at XMLHttpRequest. (three.module.js:36519)
This must be out of date, You do not specify anywhere that the lights have to cast shadows, you havent even created a pane for the shadows to cast too, yet they magically appear etc
hi sir, nice tut but could you please make a small tutorials like how to load obj/gltf model and some interactivity,as mentioned in this tutorial," ua-cam.com/video/1TeMXIWRrqE/v-deo.html" . Actually in this tutorial I followed each and every steps but didn't get exact results,I think there is something wrong in his tutorial ,clould you please make one like this for me ?,thanx in advance sir..!
I swear to god your content is too good for UA-cam. Thank you SO much for making this content available for free.
TKS kids are everywhere 0,o
Fantastic, this is the way to learn. This guy actually makes me feel uncomfortable paying for courses and tutorials with this production quality here on yt. Couldn’t be more grateful for a creator like this ;)
Oh wow! This comment is gold :)) Thank you for supporting the channel!
No face today, I am currently out of town! But I hope you enjoy this awesome R3F Video :) I just put out a poll about a course I am doing. Be sure to vote on it! Take care guys.
I want to build a mobile app for a smart product and I think that I will write the UI in react-native using react-three-fiber and drei.
sure!
@@WrongAkram It would be awesome.
@@WrongAkram Can you submit a proposal for your talk?
The quality of the content you post brother is unparalleled, thank you so much for this.
Love your videos Akram, only been subbed for a week and your tutorials are miles ahead of most discussing react
Your channel is filled with so much quality content bruh! ❤️ Thank you for your contribution!
My pleasure!
I'm getting started with 3d now, your stuff was my first choice for info, thanks for all you do, how've you been? Stay safe.
We need an update for the 2022's, this is awesome. Thank you very much
Been waiting for a while for this to come out. Saw it on twitter earlier. Love the content man!
Appreciate the support! Glad you are enjoying it
Why? It's literally garbage code
This tutorial really helped me in my another project related to 3d model , ty for the content.....
How were you able to complete this while updating drei
.GLTF stands for Good Lord The Fug.
Brah you make this look so easy! I have long way to go before tackling this. Just now learning React.
how dare you leave us for 4 weeks!! we missed you & as always great video I always love your web apps! clean and awesome
lol sorry, I got lots going on :)
Thanks for the video! Not many people showing off this technology.
Awesome tutorial and site looks pretty cool. Thanks for making such great content.
This looks godly!! Let's go, I'm at home anyways. Imma watch this entirely ❤️
Great content as always 😊
really appreciate your videos man, super super helpful!
Amazing video, a shitty developer like me got to learn so much from it in just an hour. Thank you and hands down!
Oh yes I was waiting for a new video!!
چوخ عالیده ، الریی اغور ماسون tnx
Yes this a unique and quality content👍 loved it
Awesome video! Would you be able to show us how to implement a way to click on parts of a model to display a description? Like clicking part of the furniture would display "Cushion" or "Chair Leg" Looking forward to more tutorials! :)
You are great teacher, thank you.
Thank you so much!
This is the exact tutorial that I was looking for! Thank you for such an informative content!
Btw, I ran into one issue... I no longer see Html contents once I wrap it with Section component (around 13:31)
Do you, by any chance, know what might be causing this? Thank you again in advance!
You will need to define the position y. I don’t really like this method and will find a better way of display content in a scrolling rig.
Thanks for amazing tutorial I hope you will
I have problem with open the project I dont know why, npm install gives ann error do u know how can I solve this
Ohhh react three fiber I love it
Keep up your awesomeness 🔥
Wow, Simply Amazing 👌🏻😘💕✌🏻
I'm following this wonderful tutorial buy my issue came when I try to load my model. My model is in public too but nothing shows up when I call the function in the app.
Thank you so much.
Amazing!!!
First comment an yes ur back bro. I was waiting for this tutorial. Thanks for the upload. 1# fan😍😍😍😍
Excellent Tutorial would be excellent if you include how to deploy the site. I find that is where issues start occurring for Three JS, especially when loading in custom 3D assets.
I'm just learning react because of you..
Love hearing that :)
I tried getting started on this project and out of the gate when I'm using `npm i` I'm getting a lot of deprecated packages so @node_modules aren't being installed.
That's gold!
Nice Video here. I learned a lot. Do you know if you can do the same thing in NextJS?
i wonder, how can i add that locomotive-scroll type scrolling in my nextjs app. is there any easy way to do that.
Fantastic....tks
I am super confused as to how there is a shadow at 18:41 before the lights are added. Is this built in to the gltf? I had to switch to useFBX, GLTF was not working for me with next.js.
I have the same question. Did you found out?
@@marcelajaklova6560 I had forgotten about this, just opened the GLTF in blender. It is a false shadow. There is a floor plane that has an image texture of a shadow. I've recently been using drei's gltfjsx to convert gltfs to .js components. With this you can easily remove any included geometry you don't want, like the false shadow for example.
@@patryan7308 Thank you!
I just subscribed this is awsome
Yay!
One doubt:
Will it work well on mobile devices? Just curious
Absolutely! I'll make a r3f on mobile in the near future :)
@@WrongAkram you can even use r3f with react-native expo experience!!
@@WrongAkram oh please a mobile responsive video too. I always struggle with mobile responsiveness and threejs
He s please mobile responsive please
Guys it is already responsive. But with react native we can improve performance a little I guess. I will try it out later and maybe write a article on this
thanks for this amazing tutorial 😍, what mockup you use at the beginning of the tutorial showing the website?!
U deserve many subs and u can
Appreciate it
Could you please update more often. Content way too good and I can not wait at all.
Yep, lots of great stuff coming!
Do you have a link to where Paul provided the pre-made scrolling interaction?
Thank you so much Wrong Akram for your amazing lessons. Really helpful :) I was wondering, what VS code plugins do you use to fasten your work process?
Hi man, im having some trouble. When I modify any property of the canvas (camera position, fov...) my 3D model disappears
Fantastic ! Please do you know if there is any workaround how to load data from JSON/string not from file with r3f ?
Hey! Great video! Waiting for more about 3D! :) I'm getting a horizontal scroll, any idea how to get rid of it???
please i have a Drei error, i can't import anything from drei, do you know why is this happening?
i downloaded the latest three.js as well as drei, and it still doesnt wanna work
Is there any way you could make a tutorial on how to deploy a project like this. Ive had so many issues with deploying to something like github pages and all the errors make it impossible to have to render anything on the page.
You're the boss !!!!
You are!
How can I soften the shadows of my scene? To make it more "real" and less pixelated. Great content mate!
you can import "softShadows" function from drei library and invoke it inside your component.
Could you maybe specify in your video's which version of react you are using? I've been having a lot of issues with compatibility and it would help me out alot! Thanks in advance.
Excellent. Isn't Suspense experimental?
Do you know if we can use alternative renderers like erichlofs PathTracing Renderer together with react-three-fiber?
How can I enable the glb object to move based on cursor movement
Could you share the codepen for that section.js thingy? I'm curious what even is that - why do it that way
Edit: I got it to work!
My gltf file has reflections, but the reflections seems to show as very dark or black on the site. How can I make them coloured and bright? Do i need an environment? And if so how do I add one? Thanks!
Please keep making react/three/framer videos :)
100%
How do you handle routing between the canvas and the DOM?
How to:
09:30 add HTML in Canvas
This Html tag only seems to allow 1 word before wrapping it, is there a way to turn this off?
Can you please tell me how to increase the size of our gltf object?
When you define the position by sets of 250, is that a pre-defined value by the section component, if you had it so the positionY would be 100, 0, -100 would this also be ok, would it just mean adjusting the camera? Love your content by the way, really excellent.
superb
Thanks 🤗
@@WrongAkram we need more this kind of tutorial. youtube doesn't have this kinda tuto
My problem is that other 3D asset appears really small, but your assets are large, I tried scaling but realize that there are inbalances that comes with it.
yo could you share or create video on your visual studio code setup re extensions etc... seems so clean and intuitive..
Mhmm maybe in a live stream or something
@@WrongAkram amazing! also in the video you spoke about Paul's codepen re the hook/responsive height being in the description but it's not nor can I find it from google? Any help there? many thanks in advance
more videos with threejs and react pls
Yo nice job
is it possible to do textGeometry with Drei ?
If i download models from sketch fab they came without textureCompressed folder. how should i do the loading from the gltf files then?
They should come with a texture folder. I added the compressed to the name since I compressed the image sizes. Download then and drag them to your public or build folder
@@WrongAkram i forgot to change the uri inside the .gltf file, once you change the name of the .bin(nary) file. should change also the path to the bin.
Another thing I wonder is how to resize the model to be big or smaller
How we can develop AR website using React Three fiber?
Nice work. only that I don't know any react yet. would be great if you could do one tutorial with just js and css?
Great suggestion!
**I am a simple man. I see a Wrong Akram video, I click on it, Pause it, Smash the like button and resume**, every single time.
Akram where do you get your bg music from?
I grab all my music from epidemic sounds. I should start adding song credits in the description huh?
@@WrongAkram Haha all good, the music blends very well with the video. I couldn't find good ones there for my video, or I'm just not good at picking one
:) that is nice video, i followed all your steps but on windows the scroll is not working :/ , it is not clickable or draggable
For those people that is using windows, the problem is the z-index. I added on and inside the scrollArea scss I added z-index equals to 100. That solves the problem :). Btw really good video
useUpdate is not exported from ' react-three-fiber'
Anyone please help
Did u solve it? Got the same error
Thanks very much! Could you extent this context to make a course about creative web programming and design? I will definitely buy it!
Sure thing!
@@WrongAkram Woaw!!! When will the course be released?
hellow sir
i got this error on all three models please help
index.js:1 Error: THREE.GLTFLoader: Failed to load buffer "armchairGray.bin".
at Object.onError (GLTFLoader.js:2006)
at XMLHttpRequest. (three.module.js:36519)
Do you have a “/“ before the file name?
@@WrongAkram sir i just clone master branch but its not working even i download new models but it still not working
function Model({ url }) {
const gltf = useGLTFLoader(url, true);
return ;
}
even i update paths in .gltf file do every thing that you teach in video but its not working
Make sure to update drei and react three fiber on npm these are deprecated
do i need to learn REACT for this tutorial?
yes
Man When you dropping new ep on awwwards rebuild series ?
Next Awwwards rebuilt will be a full paid course.
@@WrongAkram oh damn this is soo good
S🅱️innala
Mazes🅱️in
I love you
i dream it Wrong Akram made it i love your content bro keep doing what you're doing
Bro long time no see
Yeah I know. I need to stay consistent.
17:11
Song ID pls --- ^__^
Bad code capital
This must be out of date, You do not specify anywhere that the lights have to cast shadows, you havent even created a pane for the shadows to cast too, yet they magically appear etc
Notification Gang
The demo isn't responsive at all... Can you do a tutorial with a responsive design ?
Bro contact to brad traversy and post one of your video there on his channel ! You will surely get new subscribers.
there is nothing in drei as useGLTFLoader
hi sir, nice tut but could you please make a small tutorials like how to load obj/gltf model and some interactivity,as mentioned in this tutorial," ua-cam.com/video/1TeMXIWRrqE/v-deo.html" . Actually in this tutorial I followed each and every steps but didn't get exact results,I think there is something wrong in his tutorial ,clould you please make one like this for me ?,thanx in advance sir..!
This is outdated, Drei changed a few things
hot voice
hot name
@@WrongAkram '😂lol, having bugs in my code currently bro
not first :(
next time