Spline Project: Making an Interactive 3D Keychron Keyboard in 20 minutes | Yeti Learn | Skillshare

Playback Speed

  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Spline Project: Making an Interactive 3D Keychron Keyboard in 20 minutes

teacher avatar Yeti Learn, Design | Code | Animate

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

    • 1.



    • 2.

      Making a 3D Keyboard


  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class

In this course we will make an awesome looking interactive 3D keyboard. 

If you are new to Spline check our introduction course for Spline from the profile page.

Why Spline?

Spline is a fantastic tool which enables you to make perfect looking models which can be exported to any website, game engine, or other software. Here are some of the reasons why you want to learn Spline with this online tutorial...

  • You can create 3d scenes, edit materials, and model 3D objects easily.

  • Revolutionary for web3 projects

  • Realtime collaboration

  • 3D sculpting

  • Interactive experiences

  • Animating objects has never been this easy before.

Where can I use them?

It’s up to you! You can upload them directly to your website. Spline has many export options for web technologies like live url, vanilla javascript or react code. You can also export objects and animations to make games, videos & more.

Why this course?

We as Yeti team, are working to create professional online education lectures. We are trying to keep it as simple as possible. You'll find the best practices 3D modeling and animations.

All students have access to the Q&A forums where our Instructors, Teaching Assistants and Community are ready to help answer your questions and cheer on your success.

Who this course is for:

  • Designers

  • Programmers - Developers

  • Freelancers

  • 3D Modellers

  • Game Designers/ Developers

  • Animators

  • Graphic Designers

  • Who feels comfortable with another modeling tool and want to learn Spline Design

  • Everyone interested in animations, visuals, modeling, illustrations and art

Meet Your Teacher

Teacher Profile Image

Yeti Learn

Design | Code | Animate


Get a professional service from beginning to advanced level.

Team Yeti are working for preparing courses that makes you an expert in a specific area. While doing this, we are trying to build the most intensive courses for not wasting your time. For that reason, our contents are simple, compact and intense.

Whether you want to learn a new skill, or you want to improve yourself on some area, we can guarantee that our courses will serve you the quality that you are looking for. Because during the process, you will be given a professional education by Yeti Learn team.

All courses can be reachable from anywhere and anytime you want. Besides, we are answering your questions 24/7.

See full profile

Level: All Levels

Class Ratings

Expectations Met?
  • 0%
  • Yes
  • 0%
  • Somewhat
  • 0%
  • Not really
  • 0%

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.


1. Introduction: Hi everyone. As the title states in this video, we will be doing 3D key corn keyboard, which is also interactive in under 20 minutes. Using supplying, we will work on a browser and I'll put the final project link in the description so you can always go check it yourself in case you wonder. Also notice that discourse assumes you have at least beginner level knowledge of supply and if you're totally new to supplying, we also have an introduction course where we are talking about the basics of spline. Once you're finished that course, you will feel more comfortable making these kind of projects. 2. Making a 3D Keyboard: From toolbar at the top of the screen. Let's create a cube firstly. And I am holding Shift and Alt Option while creating, just to be sure it's equally proportioned on all sides, reset its position, and now we are sure that it is centered as well. Selecting the cube, I will just go collect a smooth and edit button and decreased subdivision all the way down to 0. Now we want to narrow the top side of the cube, right? Select that side and maybe we can make a charter in order to decrease the area. And then just drag the little circle here. Again, hold Shift to keep the proportion and decrease the size and equally on all of the coordinates. It looks nice for a template. What we can do next is increasing the subdivision level. Maybe three. And let's say we want to edit much. It's more like a sphere right now, but runway at a subdivision. And we can use LU Patch Tool for this. It will get shaved. Let's make sharper to the bottom. And also, I want to add a new subdivision. I want to drag this one to the top. And I will keep, I think, subdivisions until it looks like the key material right now. One more. Okay? This looks nice. And always check the object from top. To see if it is symmetric. I will reset position again. Just to be sure and check. It looks nice. So what I want to do next is rounding the corners a little bit from top. So I will select these and these corners. And by the way, I'm holding Shift to select all of them at the same time. I will just drag and a little bit more. Okay, This looks great. Next step is extroversion. I select the extra tool from up here, and I will push the center of the key down so that we have a small pit forms and select these squares like me, and only leave the corners actually. So you can see the effect of extrusion. Actually, let me overkill it. You can see it easily. We could also drag it up to create a peak, but in this case we want a slight slope. So this is fine. Alright? This is already looking like a key, right? Maybe it should be shorter, but I want to keep it like this because we will add the keyboard, bass just underneath the keys. So you will understand better why I want to keep it like this. When we add the layer base, Nike Chrome keyboard, we have three colors of light gray, dark gray, and orange one. Let's actually go and get an example image for reference. So this looks fine. I will just copy this image here and paste it into spline. Now we can use it for reference. Let's change the color of this key to light gray. I will say color picker here, and this is fine. And I will duplicate this key for dark gray. Let's pick the color. Let's first pick the color picker here and click on here. Now we have the dark gray here as well. And finally, I will duplicate it again to make its color orange. Like this one. Alright, we have three types of t's here. Ready? Let's make the case of the keyboard. First, I will change the background color, something lighter, so that we can see the colors better because the case color is going to be something about. I will create a brand new object for the keyboard case, which is going to be a cube. Again, let's say reset all. We can not see the keys because they are just inside of it. Let's drag this object noun from the side view. Let's drag it down. Now we can see the keys. And let's make it smaller. Maybe. Maybe from this side. And this side as well. This looks fine for now. We will edit the size as we increase the number of chiefs. Alright, now, for the case material, I want some color, some darker color. Let's make it now. Let though, this looks fine, Okay. Not the material should don't look that smooth though. So I will add a noise to the material layers. And let's decrease the strength because it is too much. And I will play with the values down below, maybe smaller values decreasing here, and increasing the movement. I want darker colors for all of them. And so I will just randomly pick some darker colors. For this one as well. They should be almost black, but variety is good for the marsh. So I have four different colors and all of them are dark. So maybe then increase the distortion and let's get a closer look. Let's increase the strength. You see it better. Okay, let's play with these guys here. I don't think really changed. Decrease the strength of the knowledge, and then now it looks better. But it's not like so maybe we should pick some darker colors. So maybe this is, these are two gray. For this. We don't see the noise exactly. Let's pick this one as well. Like this. Okay? Hopefully this looks like a key Chrome case. I'm happy with my table right now. Maybe we could have some corner, read news. And that's it. We're done with the case. Let me make the reference image visible again. It will control the keys positions and alignment with that image, enlarge it to see it easily and put it here. So we have the orange gear at the top-left corner. Let's put it there. Next to it, we have dark gray key and let me move it there as well. Finally, we can keep the light gray one here for now. Okay, We can create text objects in spline from the toolbar. And we can click here and just start typing. And we need escape. Or this key, I will increase the font size, maybe 41. And let's make the color white and position it just top center of the tea. Maybe this is too light. Let's make it a little bit gray. So this looks better. I believe. Maybe a bit whiter. Okay, this looks better. Now. And now we can duplicate this one for the other key as well. Let's bring it down here. I will change the text content like this, and let's say F1 for the F keys. So maybe we can have smaller font size for FTEs. I believe they are smaller in the key corn. He walked. And finally, I couldn't find any key for attaching the text to the surface. But since we created it by clicking on surface, it's, it's why rather is adjusted. So we can look at it from this perspective. You can see the text position or are well-placed actually. From that one, all we need to do is to adjust the case placements. To do that first, I will group the key and text so we can move them together. Like so. And I will make the orange keys x value to 0 so that we can calculate the required distance easily. Alright, let's see. 250 is not enough, 300, still not enough. 320, maybe. This is actually too much. So let's try 310. This is great. It would be really easy if we could make it 300, but this is too close, so 310 it is. Let me also drag the chase down here. Now we can start duplicating the keys, right? I need to add 310 to the x value every time. So this value should be 620. Let's move it all the way, right? Not to take this one and this value should be 900 and Turkey. I will do the same thing for the rest of the keyboard. Just don't forget to apply the same logic for vertical alignment as we did on horizontal. Here, I am repositioning the orange key zeros 00 just to make things is just wanted to check if we are doing with the same proportions as the real people. There's almost perfect. We are good to continue. I am on the backspace key, and this should be bigger than the other. We could go and create a new 3D object and model it from scratch. And it would be the best practice. I recommend you to do that. But I'm choosing the easy way here and just scale the key we already created. Okay, but let's delete the text here because it is not looking good. And I will just duplicate a new text from and move it into this group. Now let's change its position here. Okay? I am almost done with the keyboard, but we cannot do the same thing for space skin since it's too big. You see when I scale it from a regular T, It looks really bad. So we need to model it from scratch. Let's finish the keyboard first. Andrei model space key at the end. Just moved right a bit. Create a new cube here. And we will apply the same steps as we did on the regular case. So click Smart and ended, decrease the subdivision level. And now let me resize the object as the space key. Click Edit Mesh again, and select the site pool to the top side. And we want to decrease the size of the top side by holding Shift and Alt option. To resize it equally on all sides. I will increase the level of subdivision two tree, just like we did before, so that we can add subdivisions. And we can drag this one, actually not like this, I want. And horizontal division. And then drag this one all the way to the bottom. Now, let's do the same thing for the new subdivision and low-power to the older a top. Now we can start adding new subdivisions like this, maybe on this side, here and here as well, here, at the corners. Like this and this. I'm finally here. Maybe we can add two more. Just hear from top and also on right? Okay. So I believe this looks like a space key. And I'm just resizing it and put it in its place on the keyboard by adjusting X, Y, and Z values. And also change its color to the gray that we used for other tips. Alright guys, we made such a great process so far, almost done with the keyboard. While I'm working, I want to do with the case is to increase its corner around maybe. So maybe drag it like this to increase the size first and we can increase the corner. Let's, let's make it bigger. We can increase the corner all the way around 60. I read it says to make I think it's okay. So let's do the same thing for the other side as well. I will just drag it just a bit more. I believe it is looking great. In this section, I am updating the texts on each case. And before completing the keyboard, I want to check if we can add animations so that the keyboard will be interactive. Electing the Q1, Let's add a new state to this key. So we have two states in total, by state and state. And in the second state, Let's move the key down so it looks like it's pressed, maybe a bit more. We also need to add an event. To trigger that n-dimensional. I will make the animation type key down and press Q to one. Let's try to run this animation result. I click play here and press one. So it works. But this was too slow. We should decrease the duration of the animation. So let's make it 0.5. Maybe. Let's try better, but this is still slow. Let's try 0.2. It's alright. I will enable cycle here. Okay, Now it also comes back, which is good. But when I hold the key down, it is still cycling by the dimension. So this is not what we want. Actually. What we can do better is we can add a second event. And I will change the type of this around to key up. Press K is one, and we can say, go back to the base state. Okay, Now when we played, when I hold the key, it stays there and when I release it, it comes back. But let's also change the duration of the secondary one to 0.2. So it comes back tester. And in this way, we can just press it, we can hold it, or we can just tap it quickly and it responds all of the actions. You know what, maybe we can make the duration 0.1. So I believe it will be more realistic in this way. Yeah, it's better. Now. It has almost like a real-time interaction. I cleaned up my Hierarchy, rename the group with the key names and rewrite the text on the g's. Applied the same logic for all the keys so that now we have a nice interactive keyboard. If you want to export this, we can export a livelier L and send it to anyone instantly. I really like this option of spline. And when someone clicks to this URL, they can see your work. They trigger the animation as well. You can also export as iframe tag embedded to your HDMI cord instantly. I haven't tried exporting caught yet, but I believe this also works with the latest update of spline. You can get Vanilla JS react or three JS code. You also have options like image and video format. I hope you enjoyed during this project and see you on the next one.