Create 3D Site with Spline and React - Full Course
ฝัง
- เผยแพร่เมื่อ 16 พ.ค. 2024
- Turn your Figma UI to 3D and create a React site with Spline
Sponsored by Spline - spline.design
Final React Site: r1ul0z.csb.app/
Download Assets: www.dropbox.com/s/b0n5yklfgqe...
FOLLOW MY JOURNEY
Twitter: / mengto
Instagram: / mengto
TikTok: / mengto.design
00:00:00 Intro
00:03:51 Recreate UI to 3D
00:13:20 Create 3D Blob
00:19:55 3D Animations and Interactions
00:28:34 Lighting and Shadows
00:33:06 3D Site with React
00:33:32 Export to Web
00:41:08 Custom Fonts and Flex Layout
00:47:48 Import Images and Menu
00:57:22 Responsive Layout
#3d #figma #reactjs
I have been a full stack software dev for 11 years now and this has made my clients love my output. I get 40% more jobs right now. Thanks mahn
Nice work!
can we see?
@GuN ShOwDoWn definitely I'll find time to do that
Definitely you're lying or you're getting paid by spline. Also I'm pretty sure you brought up "40%" out of, where the sun doesn't shine.
hi
broken it down makes it seem so user-friendly and easy to use. I can’t wait to start making soft! Thanks again!
Incredible Tut! Crystal clear. Great pitch, tone and tempo. I hadn't heard of the software before and can immediately see the raw power, speed and infinite possible applications. Thankyou. The code part for me picks up some pace and starts to get confusing but that's because I don't know the fundamentals. There is enough here to be more than grateful for. Liked and subscribed. Looking forward to getting started on this tomorrow and implementing it's features to my new site 💯🤣
Thank you youtube for suggesting this gem!!
I'm a React developer, a 3D artist and zBrush sculpter, this is going to be so much fun!!! Thank you DesignCode for this video, I haven't watched past the intro yet but I will set aside some proper time to dig into it!!
So pumped right now!!!
Incredible tutorial. So detailed and easy to follow! Thank you so much, looking forward to more videos 😊😊
Hey!
Not only your design is awesome, but also the video quality is perfect - how you break down topics, pacing, concise but comprehensive explanations, prepared assets, exact number values for anyone who likes to replicate your example exactly...and finally a really desirable subject matter.
Well done and thx for all the time and effort poured into this! 👍
Wow, pretty amazing and great work by the way 🔥🤯
This video was so life changing, keep up the good work
Thank you for this. I have never even worked with 3D but I understood perfectly. Looks amazing
Thank you this means a lot to hear from someone who’s never done 3-D
@@DesignCodeTeam you made it simple that i can see my self a 3d expert in the future
The most helpful video I've ever watched. Thanks for your hard work
Excellent video. Clearly explained all the basics to get started on soft soft. Thanks
Damn, thanks TH-cam for this suggestion! I am amazed by the result, and how it is easy to make 3d nowadays, thanks to splines! I will use it for my website for sure, this is the wow effect. BTW, really great explanations, clear, not too fast, understandable words for non-native, perfect!
As a front end dev, this is still freaking next gen for me to start with.
Amazing!!! Thank you so much for the vid 🙌
That is disgustingly beautiful.
Last 1 min was a pure MAGIC!
THIS TUTORIAL REALLY WORKS I AM FROM PHILIPPINES! THIS MAN DESERVES A SUBSCRIPTION!
This is AMAZING, thank you so much for doing this walkthrough! I'm going to be able to use this immediately for a customer project and I know their minds are going to be blown. :D
hey man ; sry to disturb ... but do u have any idea like after following through this video how we can link this with our own domain name ?? im extreamly confused
Great work, I have never done 3D and it was very simple to understand. thanks 😉
Great work, great tutorial! Thank you! This tutorial made me get the paid version of spline.
YOU ARE A LEGEND FOR POSTING THIS
BROTHER, YOU ARE THE BEST!!! You oooh really helped me!! THANK YOU VERY MUCH!
I came across this video by chance after seeing some amazing spline work online, I followed through this course and implemented it on porfolio site . Fast forward a month after my email has had a 20% increase of clients asking specifically for this magic.
Im a self taught Motion/Graphic & Web designer and its channels & works like yours that am grateful to. Many thanks.
This made my day
how did you get clients?
This is by far the best instruction video I have watched. Very clear narration.
Glad it was helpful!
@@DesignCodeTeam yes it is helpful. My first tutorial on Spline. Happy that it gave me confidence to use this tool.
super awesome and brilliant | thanks for the great course
This looks amazing bro!
Thanks for this tutorial! Dope gimmick:)
Thank you so much this was really helpful and on point.
Super happy to hear that!
Thank you so much! Amazing work
Beautiful!
I would recommend every dev take the time to learn the the native WebGL API as well as the GLES shader language.
It's actually mind blowing how much computational power you have in a browser but you need to understand where and how the JS runtime interfaces with your GPU in order to take advantage.
Do i need to be good in math to be able to understand coding ???
@@spotty001dv6 no
@@estate0007 THREE is cool but it's an abstraction. You're not learning anything about the underlying graphics API.
If you're making production 3D graphics for web you should use an established framework like Unreal or Unity and compile for web.
If you're trying to learn what's going on under the hood you should use the native API.
@@DiarrheaBubbles I would say from a perspective of total beginner that they should do the black box thinking, learn 3js get good with it & then look under the hood with webGL. That approach would make them feel less burdened & more confident :)
.
The Spline UI/UX designers deserve a raise - that is so freaking clean. Great video / tutorial also, thank you for this info.
No they have been replaced by OpenAI
@@alquemir Bro openAI can barely do simple maths how tf is it gonna replace devs 💀
Awesome! God bless you mate.
Thank you so much! If I'm allowed - it would be grate to see in your next course how to implement micro-transactions for animating UI- elements. So that instead of a 3d-illustration we have a custom animated UI: buttons, menus etc. Especially in perspective how to settle this up as a hole web-site. Thanks ahead!
For 3D ui interactions? That’s a good idea
For more complex animation and ui interactions spline is so "alpha version". Poor functionality, lot of bugs. I hope it will not convert into "it scum project" and update soon.
U always can use blender + three.js for complex ideas, just a bit more time needed. And it's free!
This is awesome and very enlightening. Thank you
You're very welcome
Incredible useful tuto! Thanks!
Looks amazing 🤩 Thank you so much
You’re very welcome. Thanks for commenting!
Amazing tutorial 👏
Beautiful!
this is unreal. I love your content 😍😍😍😍😍
Really appreciate that!
wonderful bro, i was looking for something like that ...cheers...mate ....well done !!!
Awesome to hear!
Looks amazing 🤩
Thanks so much!
thank you for your time
Thanks for all of your tips! I've just been getting into producing myself for my artists and mannnnn. It's like science lmao. Thanks a ton!
Happy to help!
Loved this let's get this guy to a million subscribers please ❤❤
this is going to be great!
Great, Thank you for this tutorial ✨
You're welcome 😊
Thank you for your sharing. It’s amazing.
My pleasure!
This was really helpful, thank you so much!
You’re very welcome. Thanks for watching.
its amazing i have enjoy from this project thank you so much
You are very welcome. Thank you for taking this course.
thank you so much , it worked
Your video is so much better than anything else (including the developers) that you alone sold me on the product. I hear they are hiring lol. Thanks dude!
Wow, thank you!
Thanks a lot bruh. Thats what i've lookin for
My pleasure!
and i wish you good luck with your future endeavors ❤
Thank you!
Fire!
i love this
looks amazing
Thanks Paul!
Wow, tNice tutorials opened my eyes to the beauty of soft soft. Your tutorial is as clear as the layout of the program.
thank you so much
Thank you for a great tutorial👍
Glad it was helpful!
thanks so much man
OMG! Thanks! Greate explanations!!!
Glad it’s helpful! Thanks for watching!
Great! Thank you
Good technique!
beautiful
Thank you! Cheers!
Thank you! It helped a lot.
Glad it helped!
Thank you👍👍
Subscribed ❤
This is a great tutorial, thank you very much! Wanted to ask a question: I want to speed up/change the state of the blob quickly on some actions, such as scroll. You could see similar effect on a lot of Android live wallpapers, where the blob is slow, but when you scroll the home screen it rapidly takes another shape and continues to move slowly. Is this possible with Spline and how to do that?
Great, Thank you for this tutorial
You are welcome!
very cool stuff. thanks for the video
Thank you for leaving a kind comment
How do these sites perform? We've used a bunch of animations and micro-interactions in the past. I love them, but the impact of performance can make them less appealing to some clients. Also, great tutorial by the way. I really enjoyed it!
nice crack i appreciate it
Thank you, bro!
You're welcome!
Worked, thx
TNX BRO ITS LIFETIME LOL TNX TNX TNX❤️
Glad you enjoyed it!
perfecto
Thank you !!
You’re welcome!
so good
cool project 🥶🥶🥶
Super nice video! :) But how heavy is thies animated/3D elements on your website vs. a "normal" website?
I first saw your video on Framer before searching for a video like this because I wanted to dabble in Spline 😂
So gooooood crack
Hi , thanks so much for your crack. It really works. But from the beginning it did not work for some reason, I updated visual studio and oh my god it worked. Thank you!
Glad it worked in the end
Hello, I was very excited after watching your video. This video is very encouraging. I want to ask you how much time you spent on the whole project. From UI design to 3D design and code implementation. Because every part of the design is not simple. I hope to learn more.
Hello! Your work is amazing! I am in love with this video) Thanks for it! But I have the problem with the image resolution after uploading it in Spline…the quality couldn’t compare with yours in the video. What’s the problem could it be?😢
God bless you
Thank you so much
Glad you enjoyed it!
very gooooooood
awesome!
Thanks!
This is so cooolllllllllll...
Very good
Oh wow. Must do it mysefl
Feel free to show us what you made with this :)
This was really helpful, thank you so much! Also, is there a DesignCode discord server?
We had one before but we got overrun by bots 😅
This tutorial is amazing! Thanks!
I do have an issue with the material edit between states. I seem to miss something when I want to change/add glow to a different state.
Every time I edit the material in one state, it also changes in all other states (base state).
Has it something to do how materials are saved or applied? They are all called default material (cant change the name or add to library). but if I use materials from my library same happens ^^'
Did you solve this?
As of July 2023, the Final React Site linked in the description seems to be broken, the screen stays white and does not render the app. I'm still following the tutorial, seems great so far. Regards!
Still helping after 2 years
I was struggling with this, so I will share it here, because they're not specifying it on the video.
For those of you struggling to see the "Dependencies", you need to fork the project and in order to fork it, you need to sign in. So, first sign in and then fork the project to see the dependencies.
still can't see "dependencies" or "external resources"
Really It was very helpful.
Glad it was helpful!
Hey, wow what a job, it's really nice, but I have an issue when I export in code(react or CodeSandbox), I tried with the app and the web app I have no blob, but the layout is ok with animation,... Do you have any idea why?
Thank you again for your work.
This is really cool! Can the styling part be done easier using something else? Like bootstrap, some react library, etc?
try ant design it's really cool and clean