Creating an Animated Phone in Three.js & Blender!
Вставка
- Опубліковано 5 жов 2024
- bit.ly/3uWZTc1 - Become a frontend developer (50% off limited time!)
-- Want to learn UI/UX? designcourse.com
-- Today, we're going to step back into the world of Three.js, but ALSO Blender 3d! Blender is a free 3d software, and we'll use it to model a phone. We'll then take that phone, and import it with Three.js and animate it with GSAP!
Threejs starter:
github.com/des...
Asset used:
coursetro.s3.a...
My ThreeJS playlist:
• Getting Started with T...
Let's get started!
#threejs #blender #frontend
- - - - - - - - - - - - - - - - - - - - -
Subscribe for NEW VIDEOS!
Learn UI/UX: designcourse.com
My personal FB account: logodesi...
Coursetro FB: coursetro
Coursetro's Twitter: / designcoursecom
Join my Discord! / discord
^-Chat with me and others
- - - - - - - - - - - - - - - - - - - - -
Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.
Now, I focus all of my time and energy on this channel and my website Designcourse.com.
Come to my discord server or add me on social media and say Hi!
![Tuto THREE.JS [Javascript]](http://i.ytimg.com/vi/vhK6o26OV4Q/mqdefault.jpg)
![Tuto THREE.JS [Javascript]](/img/tr.png)
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
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.
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.
🥴
Man, this is sick! Love the attention that threejs is getting on this channel!
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.
Great topic, as always.
Three.js is now a trending JavaScript library
Also Babylon.js
wow! I love you for anything Three.js. Thank you sir
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"
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
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!
finally, I can implement my 3d skills to the web !!
6:40 Apply scale with Ctrl+A so there won't be any distortions in bevels or inner extrudes
Thank you for putting this together
About time for another three.js tutorial. Woo, hooooooo 🎊🎉🎉🎉🎉🎉💃💃💃💃💃💃💃😁
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
This looks honestly soooo awesome!!!😍😍 I‘ll try it out later today😍
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. ! ❤️❤️💙❤️❤️
If you press crtl a and then on "apply scale" before beveling the corners, they will not be stretched
You are three js master thanks for your 3d turorials
For UV unwrap go into front view in the object mode window, then project from view
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, what i need, thank you man!
Op hairstyle sir
pls turn on the engsub because its better for some one are foreigner like me. thank you
looks like Gary Simon watched bruno simons course. is it?
Exactly this is what i want, but for education.
Tip: press the i key (insert) in blender
This creates a face inside the selected face(s)
Amazing stuff, appreciate you work!
I was laughed like crazy at your blender skills bro dam look at your face man 🤣🤣🤣🤣🤣
Hey! This series has been great! Thank you oh for all the hard work man!
Nice !! Congratulations !!
Nice work Gery! Thx sooooooooo much!
Need more tutorial of Three.js
For the next tutorial, is it possible to show us how to implement Three.js in React Native?
Why not just us a premade asset from Skerchfab for instance?
awesome
Super video! I applauded for $2.00 👏
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
Great topic bro, thanks 😊♥
That's sick
9:20 haha "what is this app?" lol
Please create a product detail page where users can view products in 360 degree.
Great 🌪️🔥
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
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?
and what about the text after animation over? how could we make it??
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. 🤣
finally!
Super Dope!!
For anyone trying to improve on Blender. Watch the yt channel Blender Guru. Its amazing. I learned more from that channel than in school
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?
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 ?
Don't forget to leave a like for the algorithm!
After I add the timeline animations the phone disappears, anyone else had the same issue? Uncaught Error: Module build failed
Project in face mode, from front view
what is the vscode theme?
My own.. Search for "Designcourse"
When I type npm i it says 2 files not found
G in Blender is for grab 😄.
How did you do the text beside it?
Is there anything that this guy doesn't know to do? :D
Im 17th also plane001 lol
can anyone name the theme he is using for the VS Code ?😂😂😂😂😂😂😂😂😂
how to import obj
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!
First comment, awesome video
Making it responsive sounds like a pain :/
Like
Here's an interesting yet pointless project: You ever hear of how they got an entire playstation 1 emulator written entirely in wasm that works in browser? Do that with a phone OS for no reason at all and make the entire canvas of it the screen of this phone.
Thanks a lot sir....I really appreciate that. I requested about this on your last video. Keep going. 🤍🤍