How to design a 3D website with character animation using Spline (no code) - Tutorial
This tutorial will demonstrate how to use Spline to create a website featuring an animated 3D character and how to create an interaction that allows the user to switch between different 3D scenes with a simple click on the screen.
---
Try Spline for free:
👉 spline.design/
Join Spline community:
👉 Instagram: / splinetool
👉 Twitter: / splinetool
👉 TikTok: / splinedesign
👉 Discord Community: / discord
---
Other Spline tutorials:
• Making a 3D interactiv...
• 10 Tricks you should k...
• How to make an interac...
---
Original 3D model: www.cgtrader.com/3d-models/ch...
---
0:00 Intro
0:52 3D character animation with Mixamo
2:06 Import FBX files to Spline
2:48 Add materials and scene setup
6:09 Multi-scenes setup
7:17 Add Interaction to toggle between scenes
9:09 Export
9:54 Embed Spline to the Framer web page
Пікірлер: 46
I forgot to mention: Here's a tip to optimize your export: you can convert the character (and the text) into reusable components. This means that each scene will use the same objects, resulting in more optimized exports. Check out this Spline’s components tutorial to learn more: kzread.info/dash/bejne/iIeYxqindM22haQ.html
@abdallahel-far3864
10 ай бұрын
Hello MinhPham I hope you are well. First I want to thank you for the great content you provide and share you have an amazing skills. Second I want to ask if you have any courses you teach from A to Z on how to become a successful UX UI Product design with the latest tools (AI)?
@velRic
5 ай бұрын
the components does not works with mixamo properly. The instance of component turn off the animation. Unfortunatly this animation is totally unoptimized for a websit
Amazing as always, mate! I'm glad Spline updated this character animation feature, it really opens up a lot of possibilities.
BRO You're a true online tutor for sure, always excited to see you go extraordinary in design
Great video. I liked that you showed your process from top-level page design to 3D modeling to scroll animations. It makes the iterations feel more approachable.
Dude, you always make it look so easy!
Amazing, you never disappoint 💪🏽
Awesome tutorial, thank you!
Excellent tutorial!
Your tutorial is awesome! Thanks.
Amazing!! Thank you and Merry Christmas.
Amazing 😍
Your work is amazing keep on going it s a pleasure for my eyes ❤❤❤
Its amazing 🤩
It's Amazing 😍
Cool 😍
You deserve a Subscribe and like bro. Really solid tutorial bro 👍🏻👍🏻👍🏻👍🏻🔥🔥🔥🔥⛏⛏
Super
Hey, great stuff as always...wondering if you could share the model you got from cgtrader??
@MinhPhamDesign cheers for the tut, really cool, I'm probably missing something simple, my rig's shadow is static and will not move with the OBJ is this something to do with light or the rig settings?
thanks for sharing, you have make with threejs?
is it possible to link a camera animation to the scrolling of page , so that when you scroll down/up the page the 3d window plays a camera animation, and when the page scroll stops the camera animation stops and can camera be animated
Your tutorial on creating a stunning 3D webpage using Spline and Framer is incredibly informative and well-structured. The step-by-step guidance makes it seem achievable for anyone interested in web design. How did you initially discover these tools, and what inspired you to create such engaging 3D web content? 🌐🚀
@motivatedbeastph
9 ай бұрын
Your guide on crafting an impressive 3D webpage utilizing Spline and Framer is remarkably enlightening and impeccably organized.
@monicasoriano8581
9 ай бұрын
I agree! Discovering tools like Spline and Framer often comes from a combination of factors, including staying up-to-date with industry trends, exploring new software and platforms, and seeking inspiration from other designers and developers. Web designers and developers frequently engage in continuous learning and experimentation to enhance their skills and create visually engaging and interactive web content.
@MarkexcelSarsaba
9 ай бұрын
Agree! Finding tools like Spline and Framer involves staying updated and learning from peers for engaging web content.
@monalizapantoja8490
9 ай бұрын
101% Agree!
@ryanvalenzuela551
9 ай бұрын
Indeed! Designers and developers continually learn and experiment to create engaging digital experiences.
any ways we can make the color change with scroll?
So how to connect visual studio plss
Hi, can I export those character to a video with alpha channel?
How to animate a non character 3d objects? Thanks
My 3d model uploads to mixamo super tiny.. how can i fix?:
where can i find characters to upload?
Could I have made the character in Spline and then bring it into Mixamo?
yeah u pasted it into framer but nothing is aligned and nothing fits screen sizes, once u play with the size everything is getting fed up. you only adapted it to ur screen size for this video
Whenever I download from Maximo it downloads it as a file that is 65 MB, which then Spline says is too big to import. Do you have any suggestions to fix this problem?
Youre laptop model name please?
Minh Dê :))
Fluck I thought it's three js course
how do you send it to Webflow or EditorX? great tutorial mate!
Can I use this 3d model in website. Coding
your video has a big LIE on it , you buy the model , you need to rig the model and then you can work with dthe model in mixamo , oooh noup , mixamo has texture problems , fix the texture problems THEN YOU CAN DO AN EASY 3D WEBSITE XD
@npkoc
7 ай бұрын
wrong, mixamo rigs the model automatically