How to create an interactive 3D keyboard with Spline

Поделиться
HTML-код
  • Опубликовано: 5 фев 2025

Комментарии • 310

  • @splinetool
    @splinetool  2 года назад +32

    Hi everyone! You can now achieve this tutorial 8x times faster! ☀
    - The new Key Press event combines the Key Up and Key Down, so you only need to define it once.
    - With the new Components feature you can duplicate an object and maintain the interactions on the copies (so you only need to build one Key). Tutorial here: ruclips.net/video/VSddFnDjPUA/видео.html
    - Also, the UI improved so much since this video was released. The transition parameters are now inside of the "Transition" action. It is now possible to have sequential transitions, as well as multiple actions per event.

    • @Just_Moh_it
      @Just_Moh_it Год назад

      You should pin this comment 🙃

    • @splinetool
      @splinetool  Год назад +1

      @@Just_Moh_it true, done!

    • @antdx316
      @antdx316 Год назад +1

      Share each demo please, the scene wise with all the assets and variables. Have each video on here and the spline website to have this ability.

    • @abdullahimamoglu
      @abdullahimamoglu Год назад

      Can You Make One Video About Making Hectohedron With 100 Faces and Show Us how to Place at each Face a Different Picture? I AM Hoping to see You Do That Soon!!!

  • @DanDrambles
    @DanDrambles Год назад +151

    For anyone coming to this after the software updated and having trouble with the smooth/edit on the key, what you need to do is before clicking on smooth and edit, reduce the corner values and this should make it function more like it does in this tutorial.

    • @JasonDsouza-q2o
      @JasonDsouza-q2o Год назад +2

      Thank you so much for this comment !!

    • @tejashinduja
      @tejashinduja Год назад +1

      Thanks man! You're a life saver

    • @hijen5135
      @hijen5135 Год назад +1

      Where? I cant see my copied image when pasted

    • @thedot5705
      @thedot5705 Год назад

      Thank u so much bro

    • @nushen88
      @nushen88 Год назад +1

      It's not working for me

  • @shafu_xyz
    @shafu_xyz 2 года назад +58

    It's such an eye candy, didn't knew spline could make this realistic rendering

    • @splinetool
      @splinetool  2 года назад +8

      Glad you liked it!

    • @splinetool
      @splinetool  2 года назад

      @@dailyeditz7491 Check our docs: docs.spline.design/4b255cf699fb4f3eaa91cea2036f7a3b

  • @SparshPaliwal
    @SparshPaliwal 2 года назад +49

    Followed it through and learned so much. My first ever 3D project. This was so cool :)

  • @isuhanas6976
    @isuhanas6976 11 месяцев назад

    spent almost 3-4 hours for this. my 1st 3D and more to come! love thisss

  • @_dinesh
    @_dinesh Год назад +2

    WOW blender was so difficult to work with. Spline nailed it! User experience is amazing! ❤

  • @angelosa.3178
    @angelosa.3178 Год назад +2

    This is my first tutorial for Spline. Pretty easy to follow ! Thank you so much!

    • @langityayash
      @langityayash Год назад +2

      Hye , sorry to ask but what version you use cause as a beginner. I find it hard to follow and the version updates are different from the video so the interfaces are mostly confusing

  • @666watcher66
    @666watcher66 2 года назад

    TNice tutorials might just be the first motivational comnt ive ever seen on a tutorial vid. ga thanks bro

  • @ZakariaBoualaid
    @ZakariaBoualaid Год назад +2

    I am really impressed with this tool, I always wanted an easy way to integrate 3D in a website, and this really seems disrupting a lot of other tools, well done!

  • @hwl7521
    @hwl7521 Год назад

    i got ambitious and made an iso enter! this was my first time doing anything 3d. it was fun. thank you :)

  • @compactism
    @compactism 23 дня назад

    Really easy to follow the tutorial! Thanks for the video🥰

  • @f11bot
    @f11bot Год назад

    This could single-handedly bring the new skeuomorphism to life! 👏

  • @gabbi4303
    @gabbi4303 2 года назад

    Man tNice tutorials is on of the best tutorial in general on youtube. Clear, simple, constant, good to listen. Thank you for sharing.

  • @alanap173
    @alanap173 2 года назад

    Thanks for the tutorial, it's much faster than any other method I came across.

  • @momalzahid7969
    @momalzahid7969 9 месяцев назад +5

    Can you make detailed tutorial, what is each function for with minor easy examples to understand better? for instance loop cut etc, as someone who is new to 3D modeling, it gets hard to understand that why a particular function is being used and how much capacity it holds. Would mean a lot.

  • @grivoyulaiarialengka1540
    @grivoyulaiarialengka1540 6 месяцев назад

    the way you explain it doesn't make me confuse, and yeah i can make it like in the video, thankyou!!

  • @nileshshetty2496
    @nileshshetty2496 Год назад +3

    Lighting and Colouring are really important in order to make your keys look realistic.

  • @cr8tivemo
    @cr8tivemo 2 года назад

    First time ever using Spline. I'm a web designer and got bored of 2D images. I will be back for moreeeee

  • @helenzarembo
    @helenzarembo 2 года назад +1

    Thank you! For a complete beginner that video was so useful in many ways! I manage to make that keyboard and it works like a charm!

  • @andrewxzvxcud2
    @andrewxzvxcud2 2 года назад +3

    this is so cool, id love to use this or see it being used with an e-commerce site

  • @obinnaihe2
    @obinnaihe2 Год назад

    Starting my Spline journey now. Thanks for this 🙏🏽

  • @nihanmohammed7998
    @nihanmohammed7998 Год назад

    My first ever project. Thank you so much

  • @tomsdesign_
    @tomsdesign_ Год назад

    amazing tutorial and product, well done Spline team!

  • @oZenakos
    @oZenakos 2 года назад +1

    This is so sick, well done

  • @steventran5426
    @steventran5426 Год назад

    For anyone trying this tutorial for the first time around the time of this comment, you can still basically do everything the instructor does in the video. Just be aware that if you're using the basic version of Spline, you wont be able to change the duration of the animation transitions unless you get the premium version from what I understand. The animation will still work albeit much slower (you have to hold the button down)
    To get a quick and dirty understanding of how modeling works with animation, this video does a decent job but I wouldn't use it as a guide to understand lighting concepts. Im sure there are better videos that focus on that.

    • @splinetool
      @splinetool  Год назад +1

      Hi! This is not correct. Everything in this tutorial can be achieved with Spline on its basic/free plan.
      Spline improved a lot since this video was released. The UI changed/improved, which might be why you are confused.

    • @steventran5426
      @steventran5426 Год назад

      @@splinetool Oh you're absolutely correct! My mistake. I only noticed that the transitional slider goes up in whole number increments at the time. Didnt realize I could type out the numbers there. Tysm!

    • @nyoreikomoni
      @nyoreikomoni Год назад

      So how do I change the duration in this new version?

    • @steventran5426
      @steventran5426 Год назад

      Its been a minute since I've played with it but I recall just double clicking on the value itself to type in your desired duration.@@nyoreikomoni

  • @windmaomao
    @windmaomao Год назад

    thank you, really enjoy watching the video, especially in how effortless you are doing it. thank you for the great product.

  • @raisaraminnadia7833
    @raisaraminnadia7833 2 года назад +1

    one of the best tutorials in 3d gfx designing

  • @PaCCharLie
    @PaCCharLie 2 года назад +1

    God, I'm glad I found your video that helped me

  • @jierickng1076
    @jierickng1076 2 месяца назад

    Thanks for the tutorial, I think it would be very helpful and increase the learning speed if tutor can inform viewers what they're clicking and the shortcut key

    • @splinetool
      @splinetool  2 месяца назад

      @@jierickng1076 hi! Check out our latest tutorials, they have improved a lot,

  • @AdamariMedia
    @AdamariMedia 2 года назад

    Amazing, I am trying to learn Spline in 1 week as a challenge!

  • @kuldeepdesigner
    @kuldeepdesigner 2 года назад +1

    I love your tutorials videos

  • @JasonRamasami
    @JasonRamasami 2 года назад +2

    This is incredibly helpful and inspiring. Thankyou.

  • @amirreza8404
    @amirreza8404 4 дня назад

    Ayyo! This is an amazing software❤

  • @nilimawasnik4952
    @nilimawasnik4952 2 года назад

    Hey man, very clean, interesting and professional. Good sNice tutorialt.

  • @ridah2391
    @ridah2391 2 года назад

    good work king, love you

  • @calendoscopio3436
    @calendoscopio3436 2 года назад +1

    Thanks for this tutorial ❤❤❤

  • @musangowope5556
    @musangowope5556 Год назад

    Like the rest of all comments. I really enjoyed this tutorial :) Learn't so much from this. Spline is awesome

  • @Livingtoliveagain21
    @Livingtoliveagain21 2 года назад

    This was SO much fun to do!!! Thank you!!

  • @fata__morgana
    @fata__morgana 2 года назад +1

    Marvelous job, and thanks for this amazing tool !

  • @GarethLewis83
    @GarethLewis83 2 года назад +15

    Great tutorial! Learnt a lot of the fundamentals, and was able to replicate it really well.
    I was sent here by the Spline team, because the new Polaroid tutorial was way too fast for me to keep up. A little bit of feedback... it's still quite fast, and I had to constantly pause and rewind back because as soon as I followed an instruction, the video was already 2 or 3 steps ahead by then! Maybe I'm just a bit slow!

    • @splinetool
      @splinetool  2 года назад +4

      Thanks for the feedback Gareth! We will have this in mind.

    • @matteaparker4165
      @matteaparker4165 2 года назад +5

      I second this, everything moved way too fast for me and I couldn't keep up. I need a tutorial for dummies

    • @GavStrange
      @GavStrange 2 года назад

      I third this! It's a bit *too* fast - especially when it's the tutorial recommended on the Spline website for getting started!

  • @katrinarausler
    @katrinarausler 2 года назад

    Thank you! This was so much fun to create :)

  • @olive876
    @olive876 2 года назад

    very useful for me, some parameters I haven't tried before

  • @-Seppuku-
    @-Seppuku- 2 года назад +1

    Love it ! Thanks a lot for this tutorial

  • @josevaltierra8360
    @josevaltierra8360 7 месяцев назад

    I was stuck at minute 1:55 because I couldn't do inset to all the vertices at the same time and it was because spline gives the figure eight corners by default. You have to remove them all and only one will remain and that's when you press shift and you drag all the vertices inward. I hope it helps someone, greetings. BTW very good 3d software.

  • @kervin05
    @kervin05 Год назад

    awesome tutorial... really love it. tysm!!

  • @romanbelyaev1457
    @romanbelyaev1457 9 месяцев назад

    nice tutorial thanks!

  • @osks
    @osks 2 года назад

    Very nicely done!

  • @superfishstreams
    @superfishstreams Год назад

    wow thanks!
    Took me some time but I got it done!
    This is the first time I've made 3d object in years!
    You can copy and paste the events actually! you just need to make the 'states' and the copy and paste of the events will work.
    I'm curious if I can export this to a wix website.... hmmmm

  • @adanielmacedo
    @adanielmacedo 2 года назад

    Great job, thanks for sharing

  • @udaydilliwar9611
    @udaydilliwar9611 2 года назад

    Dive in!!

  • @KayandBurtonMedia
    @KayandBurtonMedia 2 года назад

    Thanks a lot man!

  • @isaacsalmeron5259
    @isaacsalmeron5259 2 года назад

    That was great. Thank you.

  • @ronielton1995
    @ronielton1995 7 месяцев назад

    very fun!

  • @MedoHamdani
    @MedoHamdani Год назад

    It will be very useful while editing this video to add the commands on the screen. For example, Ctrl + C and so on
    Also if there is a quick guide or a playlist for beginners that would be useful.

  • @MarcosBilly-x7y
    @MarcosBilly-x7y Год назад

    cool video)

  • @ryawav
    @ryawav Год назад

    Thanks! That hepled a lot

  • @carlaostmann2708
    @carlaostmann2708 Год назад +1

    anyone else having trouble with customizing the corners, eg at 3:50? i can select the points and the little three arrows appear but i cant use them (when i click & drag it just starts selecting instead of moving like the arrows are supposed to)

  • @donaldcanonoy3312
    @donaldcanonoy3312 2 года назад

    Very helpful..thanks a lot.

  • @chuacant4254
    @chuacant4254 2 года назад

    Awesome thank you for the info

  • @Angela-ll3zi
    @Angela-ll3zi 2 года назад

    Hi...! Cool and useful. Thank you very much. All the best…!

  • @maneeshchouhan7712
    @maneeshchouhan7712 Год назад

    Which option Should i cchoose to create same key down event in updated spline. The interface is different with more option now.

  • @mirkovelimirovic3946
    @mirkovelimirovic3946 2 года назад +1

    neat!

  • @Josephsasa
    @Josephsasa Год назад

    Love it!

  • @DoBeech
    @DoBeech 2 года назад

    Don't matter how long you take, long as you do it cause you love to

  • @nikilragav
    @nikilragav 2 года назад

    So nice! I love this app

  • @dennisdsouza3392
    @dennisdsouza3392 2 года назад

    thank u helped me a lot

  • @AaronBrako
    @AaronBrako Год назад

    At 9:45 - Shouldn't the lighting engine be able to take care of reflected light based on material properties, instead of having to manually define a source of reflected light?

  • @tapashmazumdar8319
    @tapashmazumdar8319 Год назад +1

    Just tell me is this for beginners if not could you make tutorial about all the components what it is and it is use for and also how to use it .

  • @pacgirlschanel
    @pacgirlschanel 2 года назад +3

    I'm stuck, After I disable subdivision, I'm having a hard time shaping the cube to the form of a key like in 1:56 - I have ''Face F'' selected and then I would shift + clicking on the arrow to narrow the height of the cube but nothing is happening. HELP. What am I doing wrong? Using windows.

    • @splinetool
      @splinetool  2 года назад +2

      Hi Luz! Did you tried increasing the subdivision again? Btw you can join our discord community (link at spline.design) to get help. It is most likely that you are missing a step.

    • @ferinko987
      @ferinko987 2 года назад +1

      I also got stuck at that part.

    • @pacgirlschanel
      @pacgirlschanel 2 года назад

      @@splinetool Thank you so much! I did disable/increase subdivision a few times and then it started working!

    • @GarethLewis83
      @GarethLewis83 2 года назад

      I had the same issue. Just in case anyone else does too... I updated to a newer version of Spline and it all worked perfectly. If you are using the web based version is should work fine too.

    • @MichaelAshtons
      @MichaelAshtons 2 года назад

      I had the same issue. I had to disable/increase subdivision in the normal cube selected mode, and after clicking into the "Edit Mesh" mode.

  • @davidfitcher2953
    @davidfitcher2953 2 года назад +1

    amazing

  • @vladpatana
    @vladpatana 2 года назад

    Thank you, I've done!

  • @pcneuh5975
    @pcneuh5975 2 года назад +1

    Started on Spline yesterday. Software looks great - very excited to get my hands on it - but it's just absolutely obnoxious to link this tutorial on the "Intro" section of the docs. The guy barely explains anything - he just clicks around assuming that what he's doing is obvious and even at 0.75 speed it's essentially impossible to watch while you execute it.
    This is NOT an introduction to Spline - it assumes prior knowledge and lots of patience to try to make sense of what is being said / done.

  • @7mt2cgsk
    @7mt2cgsk 3 месяца назад

    7:11 I cannot copy well, when I duplicate the first key, the second key doesn’t have any color(just black). What is the problem here?

  • @lauramolina3006
    @lauramolina3006 2 года назад +7

    Great tutorial, thank you! Quick q, typing "Enter", "Return", "enter" or "return" for 'key" does not activate the GO animation (15:07). What are acceptable "keys" on the keyboard for key down/up?

  • @kasperdahl3824
    @kasperdahl3824 Год назад

    Great tutorial! :)
    Quick question though,
    how do I find the environment settings in the new update?
    I tried under the light dropdown, but I can't seem to find anything to replicate to orange light bouncing.

  • @davidgvozdenovic4707
    @davidgvozdenovic4707 2 года назад +1

    This is awesome,I recently find out about spline i’m interested,can i make full calculator with spline similar like in this tutorial just with screen and make it interactive i functional with a bit of JavaScript?

  • @joaocesarlima7339
    @joaocesarlima7339 2 года назад +7

    Awesome! Is there any way to integrate Spline's output into some development environment to create a game, for example?

    • @splinetool
      @splinetool  2 года назад +10

      At the moment you can use the react-spline API to access the events and manipulate objects from react. We will improve in this area though!

    • @joaocesarlima7339
      @joaocesarlima7339 2 года назад +1

      @@splinetool Got it! Thanks!

  • @antonijapek
    @antonijapek Год назад +4

    I've taken an interest in Spline and have been trying to learn through various tutorials. This will be my last comment regarding the quality and structure of these tutorials. I find the constant back-and-forth quite frustrating, as I'm sure many students, like myself, follow the tutorials click by click. When the instructor goes back to make tweaks, we need to spend more time stopping, going back, and fixing things.
    I would greatly appreciate a clearer structure and less improvisation in the tutorials. This would make them not only more valuable but also shorter and more concise. Additionally, I've noticed that there's often a lack of explanation for certain choices, like why two gradient layers were chosen for the key, or the reason for moving the light. Providing explanations for these details would be extremely helpful, as it would save us time on additional research and enhance the tutorial's purpose.

    • @ashleyrose1570
      @ashleyrose1570 Год назад +1

      oh my god, i could not agree more. As someone new to 3d design I just want to understand the logic behind tools like loop cut and in depth use cases for it rather than just get straight to creating something. So that I can quickly go over those and start working on my own projects rather than spend time creating 20 other things.

    • @Dylanjn2301
      @Dylanjn2301 Год назад +1

      ​@@ashleyrose1570 not so much spline related but tutorials by Grant Abbit and polygonrun way for blender might be what your are looking for. They are some of the best tutorials I came across when I was starting out with blender. They also explain the logic of everything they do.
      Blender isn't hard to learn. It's quite easy actually. I haven't used spine yet so can't compare how much easier spline is but the blender process isn't hard at all for beginners. I started a few years ago knowing absolutely nothing and now can make mostly anything I can imagine and all I really did was start with tutorials from the above creators I mentioned

    • @ashleyrose1570
      @ashleyrose1570 Год назад

      @@Dylanjn2301 Thank you so much for the suggestion Dylan will definitely check them out for my project.

  • @KodinMusic
    @KodinMusic 2 года назад +1

    amazing tnx

  • @tamarakepreyeomgbuayakimi.2841

    The interface looks great and easy to learn , and how can I download pls.

  • @ericbenitezmartina1923
    @ericbenitezmartina1923 2 года назад +1

    Great tutorías great app!!

  • @alwinlangmann89
    @alwinlangmann89 2 года назад

    would be nice to be able to copy states, or make a component state that can be applied to multiple objects, it should just remember what actually changed, in this instance the y position.

  • @ishastone8251
    @ishastone8251 6 месяцев назад

    I'm trying to follow the steps on the video and I'm stuck on the very first step where you clicked on Smooth & Edit after creating a cube. In the current UI the cube gets much more outlines on the edges and it's unclear how to perform the actions with 3 arrows you did. What should I do? Are there any tutorials for newbies like me with the new UI?

  • @kroses13
    @kroses13 7 месяцев назад

    Hi, why didn't you just add a colour map above the depth map to generate the colours?

  • @tamarakepreyeomgbuayakimi.2841

    Thnks Great Tut, pls can you use this software offline Iike a stand alone.

  • @theonlyobaid2598
    @theonlyobaid2598 2 года назад

    lovely

  • @cliffswitzer4385
    @cliffswitzer4385 2 года назад +1

    Just discovered this site! Wow! Can you trigger events from data inputs like a simple google sheet or database? For example: boxes change colors based on a cell value. Would be cool for interactive infographics with live data.

  • @Pipe_oficial
    @Pipe_oficial 2 года назад +1

    Hi, can i add any type of link and logo to the keycaps? ty very much

  • @ferrnandagadelha
    @ferrnandagadelha 6 месяцев назад

    I'm following this tutorial now and I can't seem to make it work for multiple interactions. It works once, but If I want to keep pressing the keys, they are just static. Has anyone had a similar issue? How did you solve it?

  • @ReeceSullivan-h3v
    @ReeceSullivan-h3v 5 месяцев назад

    I have finished creating the model. Now I am trying to create the actions for pressing the key. The menu for "State" does not look the same on my screen as it does on yours, is this because I am using the free version? I do not have the Object, State, Cycle, Repeat, transition, duration, and delay settings.

  • @kurito_
    @kurito_ 10 месяцев назад

    nice tutorial, however I do not get the world lighting to work. The other keys dont seem to be affected, hmmm. Any hints?

    • @moseswan44
      @moseswan44 9 месяцев назад

      did you get the subdivision worked out? When I click on it nothing happens, the rounded shape in the video doesn't appear on mine.

  • @guillaumekashima8249
    @guillaumekashima8249 10 месяцев назад

    I'm a beginner. This is way to complicated for an "intro tutorial" video. Do I have to figure out the interface myself ? Did I miss something 😅

  • @그래요난-g9y
    @그래요난-g9y Год назад

    Thank you for making this much high quality tutorial! But, is spline free if i accept there is limit? or should i pay for it someday?

    • @splinetool
      @splinetool  Год назад

      Yes! There will always be a free and powerful version of Spline!

  • @moseswan44
    @moseswan44 9 месяцев назад

    when I increase the subdivision it doesn't show the rounded shape you have in your video, is it because of an upudate?

  • @xx-legion
    @xx-legion 2 года назад +1

    Nice! Any way to add custom sound trigger?

  • @aycinyildirim2946
    @aycinyildirim2946 6 месяцев назад

    where is smooth and edit tool i can't find in last version

  • @deepshah5859
    @deepshah5859 2 года назад

    Request you describe the usage of each settings which turned on and off. Was not understand why you turned off the snapping from the global option.

    • @splinetool
      @splinetool  2 года назад

      Hi Deep! Noted! For context: Disabling the snapping setting was mostly to work faster (as precision wasn't needed).

  • @frederik9446
    @frederik9446 2 года назад

    These tutorials are great. I am waiting for the Polaroid one, are you going to upload it here on youtube?

  • @tangwinki.
    @tangwinki. 2 года назад +1

    Is it possible to add an Key down event to trigger audio play? I'm thinking it would be amazing if the keyboard added typing sound.🤩

    • @splinetool
      @splinetool  2 года назад +2

      HI Tang! This is now possible! Here is a tutorial: ruclips.net/video/h1lxi_sFIgY/видео.html

    • @tangwinki.
      @tangwinki. 2 года назад

      @@splinetool That's a pretty cool update! thanks.

  • @АленаКрасивая-ф2е
    @АленаКрасивая-ф2е 2 года назад

    please tell me how to put these elements on the site. how to connect them