How to Import 3D Models to Spline

hi this is Mark from Wiki design in the spline tutorial I'm going to show you how you can easily import 3D models like this on a platform like sketch Fab directly into spline in this example I'm going to show you two different models that you can import so in this first one I'll show you how you can import a simple fish like this and then in the next example we'll do something a little bit different and how you can import a model like this that's already animated so you can see right here how the truck is animated I'll show you how you can also import animated 3D models into spline so let's just jump right into it so if you're new to the 3D space they have a lot of different marketplaces um in this example I'm just going to show you sketch Fab but they also have ones called turbo squid and there's a few other ones out there where you can download free 3D models and then they also have more paid premium type of 3D models so in this example we're just going to be using uh some free models so what you can do is you go to a platform like sketch Fab and in this example I wanted one of a fish so you could literally just type Ty in the words free fish and then you're going to see that there's a lot of free models but uh they also have some paid ones so if you look right here in the top right corner where my mouse is if there's a dollar sign that means that it's not free but if you type in the word free fish you're going to get a lot more results that are of course free so if we choose this one right here I like this example because the textures of the fish look pretty good and it looked like it was low poly so it doesn't look like it's too heavy on the page so if you just kind of go around look at the fish first make sure that there's no holes in the model or anything like that and everything looks good if you're happy with this this button right here will appear if it's a free model uh it says download 3D model so it's as simple as clicking that and then they have a lot of different options right here they have a fbx usdz and then a gltf and a glb so there's a lot of different formats right here so what I recommend is downloading this one right here called The glb Format this is going to automatically have the textures built into this one file and it keeps everything a lot smaller and if they give you different options I recommend going for the smaller one first and then if you're happy with how it looks at the texture level just make sure that you try to always start from the lowest megabytes right here so in this case it's only 460 kilobytes which is pretty good so you just want to go ahead and click the download button right here and next we're going to jump into spline and just import that in and here we are inside of a new line file and what I recommend is just in another window click and drag in your new glb file so once I do that and just drop it in here it's automatically going to appear right back here and the very first thing I recommend is go ahead and remove this rectangle so by default spline always starts out with just this rectangle and as you can see right here we already have our fish right here is fully textured so everything looks like it was imported correctly next what I recommend is let's go ahead and clean up these layers so depending on how the original author or creator of this model uh has everything saved out in this case this is a great scenario where it's just one big layer but you can see it's nested all within like five or six different layers so that makes it a lot harder to work with so in this situation what I'm going to recommend is go ahead and just copy this layer right here contrl + C and then I'll just do a contrl + V so this is going to make it where it's its own layer not nested within five or six layers so just go ahead and delete the original one and now you can see right here we have our fish right here so you can just go ahead double click this fish model just name it something like that and you can see right here everything is looking good thing I like to always do is work inside the position of like Z 0 so like an absolute zero position so in this situation I'm just going to select my fish underneath position here on the right I'm just going to zero all of these things out so the x coordinate the Y and the Z let's let's get that over to 0 0 now you can see in this situation the Gizmo is also kind of rotated now what I recommend is right clicking on the fish and if you scroll down or you can actually let me right click here and it will show a little bit easier and if you scroll down where it says reset transform you can reset the gizm mode to its original state so in this case if I click this it's automatically going to flip the fish and this is the way I want to have it so this will give you a lot more control it's a lot easier to manage it when the Gizmo's zero do like this and the next thing I like to do is zoom in and just kind of make sure that the textures and everything are looking good so if I move the camera around it looks like the textures on the outside all look good they are imported correctly I'm starting to zoom in a little bit and you can see right here the thing that you might notice is if you look inside of his mouth right here it's like Hollow it's seeing through the mesh so so a really cool feature inside of spline is they give you the option to add this texture to both the front and the back of a mesh so let me show you what that means so if you click on your fish right here if you scroll down you can see right here under visibility you're going to want to make sure you click this button right here says both so once I click that now you can see I can see inside of his mouth right now and you can see it's not just Hollow so you're actually seeing the inside of the fish it's kind of cool right there right so it's showing the texture on both sides of the mesh and if you look right here the fin disappears if it was on front you see that so sometimes meshes just won't even show so you're going to want to probably go ahead and click both like I said this is always going to vary depending on the model itself and how it was set up and if you want to understand how the image is being wrapped around the model if you just click on your fish model if you go underneath material in this image right here you can see this is the image that that glb file has embedded automatically inside your model and the last thing I recommend is just making sure that everything is optimized so in this situation I'm going to click the export button right up here and you see underneath the overview performance tab they have this option right here where it says your scene is optimized if you click this button where it says run test it's going to show you how big the page is going to render out so if I render out this fish right now and embed it on a website it'll be about 1 Megabyte so you can see right here it shows you an overview of how many polygons you have how many different materials you have so if you have a situation where it's a little bit heavy on the textures for example you could always go ahead and manually add your own textures rather than use the image they used you can maybe bring in an image that's lower res or something like that or just change it to a different color and it will lower the size so let me show you how that works so you can see right now it's an image that I just showed you so if I go ahead and remove that image for some reason and if we just keep it as like a white fish let's make it a little bit a different color so if you go to something like this and you strip away the image itself you're going to notice that the export size is going to be much smaller so now if I click export and hit run test you can see it's only 100 I'm sorry that's only 16 kilobytes so you can see right there that the image itself is what was making the export size a little bit bigger so you know depending on your use case you might not need the image and you might just need a model fish like this and then you could always add a little bit more effects to it and stuff like that without using images and keep the file size small so that's how you can import a pretty simple model now let's go ahead and show you how you can import an animated model like this into spline and the different controls they give you and to download an animated model it's the same exact thing uh you could see on a platform like this it's animated whenever you see the timeline like this and of course you see some sort of Animation so in this case I wanted a low poly truck and I saw that that it had the little you know smoke coming out of the uh pipe right here so it's the same as the fish so if you just go down and click uh download 3D model and we're going to download the glb file and as you can see this is only one megabyte so just go ahead and download that and import it just like you did with the fish I'm just going to click and drag in the glb file right here and then just go here just like the other one let's go ahead and delete the rectangle and if I just go ahead and hit the play button you're going to see that it's anim in automatically with the little smoke coming out so I thought that was really cool and I wanted to know how that works so the way it works is you can see right here if I click on the very top layer uh you can see of course this has a whole bunch of different um different models so this is a lot more detailed than the fish model and it's got a lot more pieces rather than just one big mesh everything is like separated out into different layers so you can see like this whole layer is just for the glass you got one for just the tires but let's go back up to the top and show you how the animated thing pulls in so if you look right here in the very top layer you can see this tab right here called animation and the way it works is that glb file has a lot of different uh data that it's attached so it's got the materials and you can also import different animation sequences so you can see right here that the animation is 446 frames and if you just scrub along you could see that it is just animating the smoke right here so that's how it works it's automatically bringing in the event at a start and then it's playing the animation so now I'm going to show you how easy it is to change out that animation and have it where let's say you only want it to animate when the user hovers over the truck so that's really easy to do so in this case instead of the start uh event let's go ahead and change that to hover so Mouse hover and then the action is you could see right here that object and then we're going to choose that animation and that's it that's how easy it is to make it where the animation's only going to play when I hover over the model so let's go ahead and hover over it so I can see right there the user is going to give an interaction when they hover over the model and it will restart every time they do that so as you can see there's tons of different options underneath your events right here so you're not limited to just a mouse hover you can tie these animations to a lot of different things so different keystrokes Mouse up Mouse down there's a tons of different things you can do and I just wanted to kind of quickly make this video on how you can import different models into spline and all the different option they give you and as you can see right here this uh model is really lightweight uh because it's not really bringing in any images so if I go ahead and click the performance you could see right here everything is only 963 kiloby so you could even make this a little more lightweight if you go ahead and start deleting things so if you want to get it down to maybe just a couple hundred kiloby you could start to remove like maybe this tire back here maybe some of these extra little uh cutouts like the ladder you can get rid of and everything that you start to remove from your model is going to make your file size smaller so if page performance is a big thing always think about getting rid of extra polygons or in this case little models like the ladder and then materials those are your two biggest things if you want to worry about page performance is how many polygons and the materials that it's using and that's it for this tutorial on how to import 3D models into spline make sure you give this video a like subscribe to this YouTube channel hit that Bell to receive notifications when I release new tutorials like this again this is Mark from Wiki [Music] design

Channel: Wicky Design

Views: 9,096

Keywords: import 3d model, spline 3d models, sketchfab 3d models, sketchfab export model, turbosquid models, export turbosquid models, 3d tutorial, car 3d rotate, 3d product animation, spline tool 3d, spline tool tutorial, blender 3d models, blender to spline, export blender model, spline import model, import model spline, 3d model import, cybertruck 3d model

Id: Tg7uyoA1yWM

Length: 11min 49sec (709 seconds)

Published: Mon Jan 15 2024