In blender, always after transformation action press ctrl+A then apply that specific action, for example you did change the scale of the plane, when you beveled the corners the scale was not applied so the bevel were sort of stretched. Also, you could make the phone from the cube by scaling it along the different axis then apply scale then in edit mode you can bevel the edges by pressing number 2 that will allow you to select edges rather than vertexes and ctrl+B for bevel. Speaking of axis, you can recognize them through colors, the red one is the x axis, green one is y axis and the blue one is the z axis.
Remember to always apply scale after resizing the object. That will make a better bevel and the object will also be unwrapped much better for texturing if you apply scale. The scale can be applied using ctrl + A. or bring up the search menu and write "Apply Scale". The reason for this is because if you start from the default cube or any other object blender knows that its a cube but if you resize it on the Z- Axis for example then the object will be stretched from the cube so if you apply the scale blender knows that the scale has been changed and the object is no longer stretched therefore the bevel will work properly
This! In this case, it would have been scale and rotation. Also, when unwrapping, you can get better results if you subdivide the surface you are wrapping, and make sure the UV wrap properly, based on your surface. In this instance, I would have done a straight-on view, then "UV unwrap>Project from view, that coupled with a single subdivision (not subdivide modifier), would have produced a really clean result with minimal verts.
For people wondering how to make the bevels (rounded edges) on the phone more uniform you need to go to object mode, then press cntrl or cmd a and apply size then redo the bevels and they should be more uniform.
When this happens in UV unwrapping, you need to make sure that all vertexes are on the same line by selecting the top ones and press S for scale + Y for y axis + then 0 to align them horizontally, then make the same thing with the lower ones. And then make the same with the left and right but on the X axis rather.
amazing job Gary. Really loved the video, helped me a lot in designing and running my app. A few things that i missed in the video: 1. The video feels like it ran a bit short. You could have added buttons and text. Or even made it into a full on "how apple 13 website was built" app. Would have felt more like a finished video. 2. You worried too much about the unwrapping issue and spend too much time on it. 3. The github repository that You use does not work. The `npm run dev` gives a bunch of errors and the server does not start. But most of the code is still usable if I just start a empty npm project and install three and gsap on my own with "vite"
Can you go into detail about how to design an actual website that could be used in real world applications that applies use of 3D and Three.js? I think that might be useful! Thanks!
It's maybe strange, but I do like some "clumsiness" from time to time in tutorials, because it makes it more a realistic and natural process of what our job is about. It helps to cure "impostor syndrome" that a lot of us have. Still very instructive, I really enjoy the path you are following Gary, it is exactly what I want to do for a living. Thanks a lot!
To fix that 'bug' with texture on screen you probably need to: - Go object mode - Ctrl+A - Apply scale - Go edit mode, and unwrap it again - Done Basically if something in model works kinda wrong, and you not sure why, do Ctrl+A and apply rotation & scale. Fixes a lot of 'bugs'. And with more exp you will know why it happens and when. Also, possibly that bug can happen if surface have rounded edges, but not enough geometry on face itself (especially if its not 100% flat). To fix it, you can add more geometry to that face. Connect some vertexes or do alt+f on that face to triangulate it. or shift+f -> Grid Fill.
Your "From Figma to Code" course on Scrimba is amazing. I completed it and guess what I got to learn a lot of things like Grid, Flex, Mobile-First Approach and a lot more. Thank you for this awesome course thank you very much. ! ❤️❤️💙❤️❤️
The most correct fix for the broken UV map is to ensure all points are perfectly aligned but this is mostly not possible. The usual fix is to simply subdivide the plane a couple of times
Hello sir Big fan of yours came From scrimba landed into your channel I have questions can you please make video on computed style in css how it changes it's size when we give padding and margin to elements by pixels & much more about inspection of css . This Will be great if you tell us more about this. ❤️ Designer Thanks for such wonderful content
uhmm the UV wrapper aspect ratio is obviously not the same of the Face/plane that was selected on your model (phone screen).... it's not even about Blender. However I really liked your first video on Three.js, you are really of a few youtubers that are making excellent videos on exotic libraries. Thank you
Your tutorials are generally great, very useful yet a lot of sloppiness. Why not get it done right for the recording rather than one-and-done approach?
Personally, I like seeing how he works through issues like this. All the polished videos that don't show the problems and mistakes make it look like it's always so easy and when the rest of us struggle, we feel stupid ... this shows that even the pros can struggle at times. We also get some great insight into how to troubleshoot issues. Love the series Gary! Keep it real!
Yes.. I have a paint stain on my shirt and I didn't realize until after recording.. Ugh ;P
Not a problem 😀
I didn't realize until I saw your comment ;)
Didn't realise until you mentioned it .lol
nice look :)
You mean that's not a fancy brand logo?
THREEJS is taking over my life
Man, this is sick! Love the attention that threejs is getting on this channel!
In blender, always after transformation action press ctrl+A then apply that specific action, for example you did change the scale of the plane, when you beveled the corners the scale was not applied so the bevel were sort of stretched.
Also, you could make the phone from the cube by scaling it along the different axis then apply scale then in edit mode you can bevel the edges by pressing number 2 that will allow you to select edges rather than vertexes and ctrl+B for bevel.
Speaking of axis, you can recognize them through colors, the red one is the x axis, green one is y axis and the blue one is the z axis.
🥴
Remember to always apply scale after resizing the object. That will make a better bevel and the object will also be unwrapped much better for texturing if you apply scale. The scale can be applied using ctrl + A. or bring up the search menu and write "Apply Scale". The reason for this is because if you start from the default cube or any other object blender knows that its a cube but if you resize it on the Z- Axis for example then the object will be stretched from the cube so if you apply the scale blender knows that the scale has been changed and the object is no longer stretched therefore the bevel will work properly
This! In this case, it would have been scale and rotation. Also, when unwrapping, you can get better results if you subdivide the surface you are wrapping, and make sure the UV wrap properly, based on your surface. In this instance, I would have done a straight-on view, then "UV unwrap>Project from view, that coupled with a single subdivision (not subdivide modifier), would have produced a really clean result with minimal verts.
For people wondering how to make the bevels (rounded edges) on the phone more uniform you need to go to object mode, then press cntrl or cmd a and apply size then redo the bevels and they should be more uniform.
You can also use Three.js to do that.
Great topic, as always.
Three.js is now a trending JavaScript library
Also Babylon.js
When this happens in UV unwrapping, you need to make sure that all vertexes are on the same line by selecting the top ones and press S for scale + Y for y axis + then 0 to align them horizontally, then make the same thing with the lower ones. And then make the same with the left and right but on the X axis rather.
6:40 Apply scale with Ctrl+A so there won't be any distortions in bevels or inner extrudes
amazing job Gary. Really loved the video, helped me a lot in designing and running my app. A few things that i missed in the video:
1. The video feels like it ran a bit short. You could have added buttons and text. Or even made it into a full on "how apple 13 website was built" app. Would have felt more like a finished video.
2. You worried too much about the unwrapping issue and spend too much time on it.
3. The github repository that You use does not work. The `npm run dev` gives a bunch of errors and the server does not start. But most of the code is still usable if I just start a empty npm project and install three and gsap on my own with "vite"
wow! I love you for anything Three.js. Thank you sir
Can you go into detail about how to design an actual website that could be used in real world applications that applies use of 3D and Three.js? I think that might be useful! Thanks!
Super video! I applauded for $2.00 👏
It's maybe strange, but I do like some "clumsiness" from time to time in tutorials, because it makes it more a realistic and natural process of what our job is about.
It helps to cure "impostor syndrome" that a lot of us have. Still very instructive, I really enjoy the path you are following Gary, it is exactly what I want to do for a living.
Thanks a lot!
You can also export the camera and lights in .gltf from blender to save time mucking around with with the gui coordinates. Just add them to the js
To fix that 'bug' with texture on screen you probably need to:
- Go object mode
- Ctrl+A
- Apply scale
- Go edit mode, and unwrap it again
- Done
Basically if something in model works kinda wrong, and you not sure why, do Ctrl+A and apply rotation & scale. Fixes a lot of 'bugs'. And with more exp you will know why it happens and when.
Also, possibly that bug can happen if surface have rounded edges, but not enough geometry on face itself (especially if its not 100% flat). To fix it, you can add more geometry to that face. Connect some vertexes or do alt+f on that face to triangulate it. or shift+f -> Grid Fill.
Thanksssssssssssssssssssssssssssssssssssssssssssss alotttt
Thank you for putting this together
About time for another three.js tutorial. Woo, hooooooo 🎊🎉🎉🎉🎉🎉💃💃💃💃💃💃💃😁
This looks honestly soooo awesome!!!😍😍 I‘ll try it out later today😍
finally, I can implement my 3d skills to the web !!
If you press crtl a and then on "apply scale" before beveling the corners, they will not be stretched
Hello, query, when I put alpha: true at minute 22:28, it generates an error - ',' expected. ts (1005) what can it be ? is not defined ?
For UV unwrap go into front view in the object mode window, then project from view
Is it possible to put a video or gif as a texture in the screen of the phone, so that the image in the phone wouldnt be static?
Why not just us a premade asset from Skerchfab for instance?
nice, what i need, thank you man!
Tip: press the i key (insert) in blender
This creates a face inside the selected face(s)
Nice !! Congratulations !!
You are three js master thanks for your 3d turorials
Your "From Figma to Code" course on Scrimba is amazing. I completed it and guess what I got to learn a lot of things like Grid, Flex, Mobile-First Approach and a lot more. Thank you for this awesome course thank you very much. ! ❤️❤️💙❤️❤️
looks like Gary Simon watched bruno simons course. is it?
Hey! This series has been great! Thank you oh for all the hard work man!
and what about the text after animation over? how could we make it??
Amazing stuff, appreciate you work!
The most correct fix for the broken UV map is to ensure all points are perfectly aligned but this is mostly not possible. The usual fix is to simply subdivide the plane a couple of times
Nice work Gery! Thx sooooooooo much!
Can we put this in Frameworks?
For eg : If my portfolio is in React or whatever framework and i want such 3D models as hero image?
For the next tutorial, is it possible to show us how to implement Three.js in React Native?
pls turn on the engsub because its better for some one are foreigner like me. thank you
I was laughed like crazy at your blender skills bro dam look at your face man 🤣🤣🤣🤣🤣
How did you do the text beside it?
Great 🌪️🔥
When I type npm i it says 2 files not found
Great topic bro, thanks 😊♥
Need more tutorial of Three.js
Super Dope!!
That's sick
what is the vscode theme?
My own.. Search for "Designcourse"
Exactly this is what i want, but for education.
Hello sir Big fan of yours came From scrimba landed into your channel
I have questions can you please make video on computed style in css how it changes it's size when we give padding and margin to elements by pixels & much more about inspection of css . This Will be great if you tell us more about this. ❤️ Designer
Thanks for such wonderful content
awesome
After I add the timeline animations the phone disappears, anyone else had the same issue? Uncaught Error: Module build failed
Op hairstyle sir
Please create a product detail page where users can view products in 360 degree.
how to import obj
9:20 haha "what is this app?" lol
Don't forget to leave a like for the algorithm!
For anyone trying to improve on Blender. Watch the yt channel Blender Guru. Its amazing. I learned more from that channel than in school
finally!
BTW Nice haircut.
Ty, but it's a lack of haircut. I won't be getting a haircut for a few years. It's going to be all sorts of ridiculous.
@Jeremy Horne I'm growng it out so I can look like an early guitar shredder from the 80's. Leave me alone, I'm living my best life. 🤣
uhmm the UV wrapper aspect ratio is obviously not the same of the Face/plane that was selected on your model (phone screen).... it's not even about Blender. However I really liked your first video on Three.js, you are really of a few youtubers that are making excellent videos on exotic libraries. Thank you
Project in face mode, from front view
can anyone name the theme he is using for the VS Code ?😂😂😂😂😂😂😂😂😂
G in Blender is for grab 😄.
Is there anything that this guy doesn't know to do? :D
Im 17th also plane001 lol
Your tutorials are generally great, very useful yet a lot of sloppiness. Why not get it done right for the recording rather than one-and-done approach?
Personally, I like seeing how he works through issues like this. All the polished videos that don't show the problems and mistakes make it look like it's always so easy and when the rest of us struggle, we feel stupid ... this shows that even the pros can struggle at times. We also get some great insight into how to troubleshoot issues. Love the series Gary! Keep it real!
Making it responsive sounds like a pain :/
First comment, awesome video
Like
Thanks a lot sir....I really appreciate that. I requested about this on your last video. Keep going. 🤍🤍