How to create an interactive 3D keyboard with Spline

In this tutorial, you will learn how to build a 3D keyboard from scratch using modeling tools, material assets, and the Key Down/Up events.
Check Spline: spline.design/
☀️Update: Spline has improved a lot since we made this tutorial, and now, a couple of new features will enable you to follow this tutorial much faster.
1. The new Key Press event combines the Key Up and Key Down, so you only need to define it once.
2. With the new Components feature, you can duplicate an object and maintain the interactions on the duplicate (so you only need to build one Key).
Tutorial about components here: • How to design and use ...
0:00 Introduction
1:05 Modeling a 3D key
4:15 Adding material assets
6:10 Create the text in the keys
7:35 Creating the orange key
10:30 Making the keyboard base
13:50 Adding interaction events

Пікірлер: 289

  • @splinetool
    @splinetool Жыл бұрын

    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: kzread.info/dash/bejne/iIeYxqindM22haQ.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

    10 ай бұрын

    You should pin this comment 🙃

  • @splinetool

    @splinetool

    10 ай бұрын

    @@Just_Moh_it true, done!

  • @antdx316

    @antdx316

    9 ай бұрын

    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

    7 ай бұрын

    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 Жыл бұрын

    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.

  • @user-zk3zn8fz1j

    @user-zk3zn8fz1j

    Жыл бұрын

    Thank you so much for this comment !!

  • @tejashinduja

    @tejashinduja

    Жыл бұрын

    Thanks man! You're a life saver

  • @hijen5135

    @hijen5135

    Жыл бұрын

    Where? I cant see my copied image when pasted

  • @thedot5705

    @thedot5705

    Жыл бұрын

    Thank u so much bro

  • @nushen88

    @nushen88

    11 ай бұрын

    It's not working for me

  • @shafu_xyz
    @shafu_xyz2 жыл бұрын

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

  • @splinetool

    @splinetool

    2 жыл бұрын

    Glad you liked it!

  • @splinetool

    @splinetool

    Жыл бұрын

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

  • @SparshPaliwal
    @SparshPaliwal2 жыл бұрын

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

  • @isuhanas6976
    @isuhanas69764 ай бұрын

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

  • @ZakariaBoualaid
    @ZakariaBoualaid9 ай бұрын

    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!

  • @raisaraminnadia7833
    @raisaraminnadia78332 жыл бұрын

    one of the best tutorials in 3d gfx designing

  • @angelosa.3178
    @angelosa.317811 ай бұрын

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

  • @langityayash

    @langityayash

    11 ай бұрын

    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

  • @helenzarembo
    @helenzarembo Жыл бұрын

    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!

  • @alanap173
    @alanap173 Жыл бұрын

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

  • @gabbi4303
    @gabbi43032 жыл бұрын

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

  • @hwl7521
    @hwl7521 Жыл бұрын

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

  • @obinnaihe2
    @obinnaihe2 Жыл бұрын

    Starting my Spline journey now. Thanks for this 🙏🏽

  • @tomsdesign_
    @tomsdesign_ Жыл бұрын

    amazing tutorial and product, well done Spline team!

  • @_dinesh
    @_dinesh Жыл бұрын

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

  • @Livingtoliveagain21
    @Livingtoliveagain21 Жыл бұрын

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

  • @JasonRamasami
    @JasonRamasami2 жыл бұрын

    This is incredibly helpful and inspiring. Thankyou.

  • @f11bot
    @f11bot Жыл бұрын

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

  • @windmaomao
    @windmaomao9 ай бұрын

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

  • @fata__morgana
    @fata__morgana2 жыл бұрын

    Marvelous job, and thanks for this amazing tool !

  • @1Chitus
    @1Chitus Жыл бұрын

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

  • @oZenakos
    @oZenakos2 жыл бұрын

    This is so sick, well done

  • @-Seppuku-
    @-Seppuku-2 жыл бұрын

    Love it ! Thanks a lot for this tutorial

  • @666watcher66
    @666watcher66 Жыл бұрын

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

  • @nihanmohammed7998
    @nihanmohammed79989 ай бұрын

    My first ever project. Thank you so much

  • @osks
    @osks Жыл бұрын

    Very nicely done!

  • @kervinalvar8629
    @kervinalvar8629 Жыл бұрын

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

  • @nileshshetty2496
    @nileshshetty2496 Жыл бұрын

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

  • @calendoscopio3436
    @calendoscopio34362 жыл бұрын

    Thanks for this tutorial ❤❤❤

  • @nilimawasnik4952
    @nilimawasnik4952 Жыл бұрын

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

  • @adanielmacedo
    @adanielmacedo Жыл бұрын

    Great job, thanks for sharing

  • @olive876
    @olive8762 жыл бұрын

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

  • @isaacsalmeron5259
    @isaacsalmeron5259 Жыл бұрын

    That was great. Thank you.

  • @kuldeepdesigner
    @kuldeepdesigner2 жыл бұрын

    I love your tutorials videos

  • @butttttttt7429
    @butttttttt74292 жыл бұрын

    This video should deserve more views.

  • @Angela-ll3zi
    @Angela-ll3zi Жыл бұрын

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

  • @donaldcanonoy3312
    @donaldcanonoy3312 Жыл бұрын

    Very helpful..thanks a lot.

  • @romanbelyaev1457
    @romanbelyaev14572 ай бұрын

    nice tutorial thanks!

  • @chuacant4254
    @chuacant4254 Жыл бұрын

    Awesome thank you for the info

  • @ridah2391
    @ridah2391 Жыл бұрын

    good work king, love you

  • @andrewxzvxcud2
    @andrewxzvxcud22 жыл бұрын

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

  • @splinetool

    @splinetool

    2 жыл бұрын

    Totally! ❤️

  • @KayandBurtonMedia
    @KayandBurtonMedia Жыл бұрын

    Thanks a lot man!

  • @vladpatana6975
    @vladpatana69752 жыл бұрын

    Thank you, I've done!

  • @ryawav
    @ryawav7 ай бұрын

    Thanks! That hepled a lot

  • @Josephsasa
    @Josephsasa Жыл бұрын

    Love it!

  • @nikilragav
    @nikilragav2 жыл бұрын

    So nice! I love this app

  • @dennisdsouza3392
    @dennisdsouza3392 Жыл бұрын

    thank u helped me a lot

  • @musangowope5556
    @musangowope5556 Жыл бұрын

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

  • @ronielton1995
    @ronielton1995Ай бұрын

    very fun!

  • @lauramolina3006
    @lauramolina30062 жыл бұрын

    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?

  • @user-df1qm7zh5j
    @user-df1qm7zh5j7 ай бұрын

    cool video)

  • @PaCCharLie
    @PaCCharLie2 жыл бұрын

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

  • @splinetool

    @splinetool

    2 жыл бұрын

    Glad it was helpful!

  • @KodinMusic
    @KodinMusic2 жыл бұрын

    amazing tnx

  • @davidfitcher2953
    @davidfitcher29532 жыл бұрын

    amazing

  • @momalzahid7969
    @momalzahid79692 ай бұрын

    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.

  • @MedoHamdani
    @MedoHamdani8 ай бұрын

    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.

  • @theonlyobaid2598
    @theonlyobaid25982 жыл бұрын

    lovely

  • @AdamariMedia
    @AdamariMedia Жыл бұрын

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

  • @kennedynwaeze

    @kennedynwaeze

    Жыл бұрын

    nice

  • @cliffswitzer4385
    @cliffswitzer4385 Жыл бұрын

    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.

  • @kusuzu9343
    @kusuzu93432 жыл бұрын

    What a great video! Straight to the point and perfectly explained. Thanks for uploading tNice tutorials!

  • @mirkovelimirovic3946
    @mirkovelimirovic39462 жыл бұрын

    neat!

  • @agilecoach101carlbruiners5
    @agilecoach101carlbruiners5 Жыл бұрын

    Can you export the model and state events (assuming as a js file)? Great work

  • @figjgifggghf6040
    @figjgifggghf6040 Жыл бұрын

    Thx

  • @davidgvozdenovic4707
    @davidgvozdenovic4707 Жыл бұрын

    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?

  • @xx-legion
    @xx-legion2 жыл бұрын

    Nice! Any way to add custom sound trigger?

  • @ericbenitezmartina1923
    @ericbenitezmartina19232 жыл бұрын

    Great tutorías great app!!

  • @splinetool

    @splinetool

    2 жыл бұрын

  • @superfishstreams
    @superfishstreams7 ай бұрын

    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

  • @nikilragav
    @nikilragav2 жыл бұрын

    3:00 can you snap the subdivisions? So let's say I want to subdivide into 3rds, can I get 2 equally spaced loops?

  • @cr8tivemo
    @cr8tivemo Жыл бұрын

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

  • @alwinlangmann89
    @alwinlangmann89 Жыл бұрын

    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.

  • @yevheniyasavchuk5756
    @yevheniyasavchuk57562 жыл бұрын

    Hello! Thanks for video! Is there any way of distribution & alignment of 3d objects (keys of keyboards)? I see the functions, but they dont work(((

  • @GarethLewis83
    @GarethLewis832 жыл бұрын

    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 жыл бұрын

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

  • @matteaparker4165

    @matteaparker4165

    2 жыл бұрын

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

  • @GavStrange

    @GavStrange

    Жыл бұрын

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

  • @gabrielegelfofx
    @gabrielegelfofx2 жыл бұрын

    Any plan to add a sort of blueprints visual scripting to create complex interactions?

  • @kasperdahl3824
    @kasperdahl38245 ай бұрын

    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.

  • @carlaostmann2708
    @carlaostmann2708 Жыл бұрын

    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)

  • @udaydilliwar9611
    @udaydilliwar9611 Жыл бұрын

    Dive in!!

  • @tamarakepreyeomgbuayakimi.2841
    @tamarakepreyeomgbuayakimi.2841 Жыл бұрын

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

  • @mirrorsu_animation
    @mirrorsu_animation Жыл бұрын

    Hi, I have problems with applying texture map on an edited model, is there any tutorial address this topic? Thank you!

  • @adriantaropa5445
    @adriantaropa54458 ай бұрын

    Useful information but it's way too fast. You have to realize that for many it's the first time we're seeing this app. I was excited to get started but this tutorial kinda took the wind out of my sail.

  • @gg-rf4ym

    @gg-rf4ym

    3 ай бұрын

    Put playback speed at .5

  • @nikilragav
    @nikilragav2 жыл бұрын

    0:45 how are you displaying what keyboard key you're pressing in the bottom left?

  • @andrejmartovickyj8517
    @andrejmartovickyj8517 Жыл бұрын

    Hello great tutorial, my first time creating model in this program and its looking very nice, but I have a problem. I decided to create word "cracker" so there are two letters "C" and two letters "R" and when I press any of these letters both keys go down...is there any way of keys going down separately?

  • @invalidude
    @invalidude Жыл бұрын

    How do you turn off velocity when rotating an object? Also, does Spline have Preferences/Settings?

  • @joaocesarlima7339
    @joaocesarlima73392 жыл бұрын

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

  • @splinetool

    @splinetool

    2 жыл бұрын

    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 жыл бұрын

    @@splinetool Got it! Thanks!

  • @Pipe_oficial
    @Pipe_oficial Жыл бұрын

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

  • @allenyeung3515
    @allenyeung35155 ай бұрын

    Trying out Spline and I am a little stuck here, I am at the stage where I am adding interactions. I made one of the Key as components then duplicated it and tried to overwrite the event. I was able to change the no.2 Key to press 2 but I was not able to change the action. So now if I press 1 or 2 only "Key 1" is responding to the press stage but not "Key 2". Hope that makes sense

  • @steventran5426
    @steventran542610 ай бұрын

    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

    10 ай бұрын

    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

    10 ай бұрын

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

    8 ай бұрын

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

  • @steventran5426

    @steventran5426

    8 ай бұрын

    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

  • @lesenlee
    @lesenlee2 жыл бұрын

    How to show the HotKey on screen? Any tools?

  • @josevaltierra8360
    @josevaltierra836018 күн бұрын

    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.

  • @frederik9446
    @frederik94462 жыл бұрын

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

  • @splinetool

    @splinetool

    2 жыл бұрын

    We just uploaded it!

  • @frederik9446

    @frederik9446

    2 жыл бұрын

    @@splinetool Thats awesome!

  • @vocalhunt9122
    @vocalhunt91222 жыл бұрын

    Is it possible to add audio files to an event? Would be an amazing feature 😊

  • @avarice5071

    @avarice5071

    2 жыл бұрын

    Is it possible to add the text input somewhere. For instance I type k and *K* appears in a designated location

  • @maneeshchouhan7712
    @maneeshchouhan77128 ай бұрын

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

  • @user-sn7lw8lj3n
    @user-sn7lw8lj3n Жыл бұрын

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

  • @AaronBrako
    @AaronBrako7 ай бұрын

    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?

  • @binhvu10394
    @binhvu103942 жыл бұрын

    My axis xyz is locked so i cant not scale or move the top face of cube. How can I figure out this issue?

  • @kunalbelamkar
    @kunalbelamkar2 жыл бұрын

    that smooth sud division doesnt exist anymore, can you help me with that? thanks

  • @interiorflash386
    @interiorflash3862 жыл бұрын

    Is it possible to import 3d model from other 3d software ?

  • @DoBeech
    @DoBeech2 жыл бұрын

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

  • @larissaapsarinimeirinta7430
    @larissaapsarinimeirinta74302 жыл бұрын

    Great tutorial, but I have a problem here.. I can't open my previous project in spline, I don't know what's wrong with it.. Can you help me about it??

  • @kroses13
    @kroses1319 күн бұрын

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

  • @mohamedfawzi5504
    @mohamedfawzi55042 жыл бұрын

    If I want to save my project in soft soft, do I have to buy it?