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

  • @MinhPhamDesign
    @MinhPhamDesign10 ай бұрын

    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

    @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

    @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

  • @hamptonpete7905
    @hamptonpete790510 ай бұрын

    Amazing as always, mate! I'm glad Spline updated this character animation feature, it really opens up a lot of possibilities.

  • @ChrisEj_The_Broly
    @ChrisEj_The_Broly10 ай бұрын

    BRO You're a true online tutor for sure, always excited to see you go extraordinary in design

  • @nhatquangphan7362
    @nhatquangphan736210 ай бұрын

    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.

  • @adamoda8382
    @adamoda838210 ай бұрын

    Dude, you always make it look so easy!

  • 10 ай бұрын

    Amazing, you never disappoint 💪🏽

  • @MissMille5
    @MissMille510 ай бұрын

    Awesome tutorial, thank you!

  • @dingosmoov
    @dingosmoov10 ай бұрын

    Excellent tutorial!

  • @karleclaire
    @karleclaire8 ай бұрын

    Your tutorial is awesome! Thanks.

  • @pedroarruda7878
    @pedroarruda78786 ай бұрын

    Amazing!! Thank you and Merry Christmas.

  • @axtrion888
    @axtrion88810 ай бұрын

    Amazing 😍

  • @guillaumeTB
    @guillaumeTB8 ай бұрын

    Your work is amazing keep on going it s a pleasure for my eyes ❤❤❤

  • @corecomputer894
    @corecomputer89410 ай бұрын

    Its amazing 🤩

  • @waqasflow
    @waqasflow10 ай бұрын

    It's Amazing 😍

  • @AshikulIslam67
    @AshikulIslam6710 ай бұрын

    Cool 😍

  • @mikoldamoah3996
    @mikoldamoah399610 ай бұрын

    You deserve a Subscribe and like bro. Really solid tutorial bro 👍🏻👍🏻👍🏻👍🏻🔥🔥🔥🔥⛏⛏

  • @hirenprabtani8796
    @hirenprabtani87968 ай бұрын

    Super

  • @sean.sullivan
    @sean.sullivan9 ай бұрын

    Hey, great stuff as always...wondering if you could share the model you got from cgtrader??

  • @christopherrichards4225
    @christopherrichards42252 ай бұрын

    @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?

  • @HuynhLuong227
    @HuynhLuong22710 ай бұрын

    thanks for sharing, you have make with threejs?

  • @faithfultennysonidama6904
    @faithfultennysonidama690410 ай бұрын

    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

  • @dotpenji
    @dotpenji10 ай бұрын

    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

    @motivatedbeastph

    9 ай бұрын

    Your guide on crafting an impressive 3D webpage utilizing Spline and Framer is remarkably enlightening and impeccably organized.

  • @monicasoriano8581

    @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

    @MarkexcelSarsaba

    9 ай бұрын

    Agree! Finding tools like Spline and Framer involves staying updated and learning from peers for engaging web content.

  • @monalizapantoja8490

    @monalizapantoja8490

    9 ай бұрын

    101% Agree!

  • @ryanvalenzuela551

    @ryanvalenzuela551

    9 ай бұрын

    Indeed! Designers and developers continually learn and experiment to create engaging digital experiences.

  • @ammadanimations
    @ammadanimations10 ай бұрын

    any ways we can make the color change with scroll?

  • @bolormaats5636
    @bolormaats56362 ай бұрын

    So how to connect visual studio plss

  • @marcbodo4407
    @marcbodo44079 ай бұрын

    Hi, can I export those character to a video with alpha channel?

  • @tach4473
    @tach447312 күн бұрын

    How to animate a non character 3d objects? Thanks

  • @fastmedia1276
    @fastmedia127610 ай бұрын

    My 3d model uploads to mixamo super tiny.. how can i fix?:

  • @user-zn7ci9bw4u
    @user-zn7ci9bw4u9 ай бұрын

    where can i find characters to upload?

  • @funnybot77
    @funnybot776 ай бұрын

    Could I have made the character in Spline and then bring it into Mixamo?

  • @user-wl5yi2ek7t
    @user-wl5yi2ek7t8 ай бұрын

    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

  • @batyabeard1132
    @batyabeard11325 ай бұрын

    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?

  • @Ashishsinghim
    @Ashishsinghim10 ай бұрын

    Youre laptop model name please?

  • @fedev1312
    @fedev13123 ай бұрын

    Minh Dê :))

  • @sultondev
    @sultondev10 ай бұрын

    Fluck I thought it's three js course

  • @mae2309
    @mae230910 ай бұрын

    how do you send it to Webflow or EditorX? great tutorial mate!

  • @trilochanbehera8318
    @trilochanbehera83186 ай бұрын

    Can I use this 3d model in website. Coding

  • @laif9857
    @laif98578 ай бұрын

    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

    @npkoc

    7 ай бұрын

    wrong, mixamo rigs the model automatically