Hello, everyone! 👋 This is Alejandro, and in this tutorial, we will see how we can use the new 3D path feature on Spline to create all sort of different compositions. How we can animate paths How we can combine paths with cloner and how we can combine paths with physics. We will see all of the different features that are related, or connected to 3D paths and we will learn how to use the 3D paths
in combination with the animation features to create very interesting effects like the one in here. Alright? Let's begin! Alright! So, I have a very simple scene here with a light gray background color and the first step is to press here on the + icon to create a new path. So, now that I am in the creation mode, I can just to start clicking and you will see how the path is being created. So, this works very similarly to any
vector editing tools. It's just that you're making a 3D path. So, for example if I click and drag I will be making a curve. And if I click on the first point, is going to closes the shape. Here at the top we have also a bend tool. And if we click on a point with the bend tool it's going to make it into a sharp corner. And if you click and drag on a point, it's going to make it into a curve instead. So let me just undo that. Now, I'm just going to switch to the arrow tool So, maybe this will be like an actual Pentagon like this In a few more time Not perfect, but...😅 Let's see! What parameters can we control from this? If we see here on the right sidebar, we have this parameter that is called "Corner" So if we increase the corner value, you will see how we can round the corner to this shape. And now if I double-click in this shape, and I start moving the points, you'll see how it updates automatically. So, this is very cool because you can actually have dynamic round corners. So, here for example, if I reduce again you will see that it's updating automatically. Another cool thing is that you can select one single point and increase or change the round corner in that specific point. All right! Let's press ESC to get off this editing mode Here we also have a couple of interesting values for the path extrusion. And the path extrusion means that we have a shape that is being extruded or is being used as the profile to go along the path. So, by default that shape is a circle and you can change the size of the circle in X and Y to make it look like this for example. But you can also select one of the other default shapes like the rectangle. You can change the corner of that rectangle so now it looks a little bit more blocky. And you can also change the size in X and Y of that rectangle, right? You can get something like this
which looks a little bit more like a stripe. And by the way, I just want to change quickly here the color. Maybe something like this. Maybe an overlay, to look more... Like this, I think it would be nice. Here we also have some parameters that are more related to how the extrusion behaves along the path. So, the first one is called "Depth" and if I change this value you will see how immediately the shape like, the extrusion is going over the shape 1 means a 100% and 0 means nothing and then the second parameter here is called "Offset" Now, if I have 1 (or a 100% of Depth) If I change the Offset parameter, nothing is going to happen because the way the Offset works is that, it needs the Depth to be a smaller value. So you can offset that position across the path, to create these moving behavior right here. Which is very helpful to create this sort of motion animation, right? All right! So, let's go back to 1 in Depth and 0 in Offset. There is also this parameter that is called "Angle" And the angle is basically rotating the extrusion along the path. So, this is actually degrees. So, you will see here that this is 360°, and this is 0. A similar parameter is called "Twist" and the Twist is basically changing the beginning and the end angle of this shape. So, perhaps I can make this
a little bit more smaller so we can see better. Maybe something like this There we go! So, you can see here at the beginning the initial rotation and the end rotation are different. The initial rotation is 0 but the end rotation will be the value that we see here which is 279 and if I keep increasing it will be 720 which is two full revolutions. And if you go in the other direction it will be a negative number, right? By the way, if you want like a full match between the beginning and the end it has to be multiple of 360 in this case. So, for example here we see this spinning 360° and is ending in the same way that it begins, right? Right! So let's change that to be 0. So, the Start and End scale are similar, but here we can change the scale of the beginning and this one changes the scale at the end. So, it's quite easy to understand. Let's just put those in 1. You can also select a custom vector shape to use as the profile for the path extrusion. So, instead of choosing any of the default ones like the circle, the polygon, which by the way, is very nice and you can see here how it looks like or that star, which is also pretty cool because you can change the amount of sides and it looks like this interesting complex shape. You can also select a custom shape and when you select the custom option it switches back to the circle but this is just a placeholder and then from the object, you can select an actual vector shape but I don't have any custom vector shape in here so let me just make one, right? I'm just going to create a vector shape So, I'm just going to click here on the path tool or the vector tool. And then I'm just going to make maybe something like this. Something a little random Right? Maybe like this Kind of looks like a crown 😅 And then, I'm going to increase the corner for this to be something like that All right! If I apply this shape to the path, I just need to select this shape and you can see immediately, now this shape is being applied to this path in here. Which is actually quite nice the end result. And the cool thing is that, if you double-click here on the path, and you start changing the path you will see how it's actually updating automatically in the 3D path. So, this can open many possibilities for you to create different variations on your path extrusion. All right! So, I'm just going to convert this material in here quickly to an asset. So, this is going to be by color Now I'm just going to delete this, and I want to show you another case which is how we can extrude text on the path but, I want to make a new path something different. Let's go again and create a new one and this time, it's gonna be... I don't know. Maybe a letter "S" ? So, let's try to do something like that Let’s see... All right! Looks maybe more like a number five. Now we can adjust a little bit here the parameters. So, I'm just going to select now my color in here as well. And then let's add maybe some round corners. All right! Looks like a letter "S" for Spline! Instead of the circle, I want to extrude a letter. So, let me just reset my camera again, and let's create a text by pressing on the text tool, and let's press "S" And let's maybe increase the size of this a little bit. I'm using Roboto here for the font. Maybe let's use bold. Now what I want is to convert this font into a vector shape by pressing the "Convert to Shape" button. Now that I have the shape, I can use that as the profile for the extrusion. So, now I can go here to custom and select "Text 2" Nice! Now you can see, how you can now have the text extruded along the path. And it actually looks really cool! So, let me just maybe increase the size a little bit. Let me just put it outside here. Maybe like this. And now that I have the vector shape here, I can increase the size and you will see how it's changing. All right! It looks kind of cool! And you can do the same obviously with any other shape. And that's how you can create that sort of effect now here on Spline. You can also change the position of the nodes, and you will see that it's going to add that automatically, right? Because everything is dynamic, so, that means that it will maintain the connection, which is very cool! We can also try changing the angle here. Oh! That's super nice! Let's see how it looks with a different twist Oh, cool! So now it's like 360° spinning. Let me actually change the light a little bit here to be a little more blurry, so it's softer. Yeah! This is looking very nice! Another trick that we can do here with the path is related to materials. I just want to quickly show you something that you can do, which is that for example, if I create a gradient layer in here... Right! So, by default it will look like this which is pretty interesting because it means that you have this color, that is moving parallel with the path But, if we change the angle it's going to follow the path, which is even more interesting because now we have this going from here to here. And maybe this is going to be like a loop. So, it's going to be like black in the beginning and the end and you had something like this. But you can also change the colors, right? So, maybe here it will be like a red color and then here will be like a purple color. So you can star seeing like how you can create all of these very interesting effects. So, maybe the same purple color can
be also here at the beginning, and then we have something like this. Right? You can also mix or blend with different effects. For example, the outliner. Now you have something like this and let me just hide this quickly, because I don't need it. Or perhaps is Fresnel, right? So, then we have Fresnel here below the other one, and you can play around with different values to achieve different results, right? All right! So, let me just go back to this one here All right! Another thing that you can do is that, you can animate parameters of the path extrusion by using state transitions. So, for example. Here I can create another state, and perhaps in our base state, we have a Depth value like this. Then in the final state we have 1 in here. So, if we create an event here let's say, a normal transition from base state, which is current to the state and then we play here, we'll see how the "S" is animated! So now this looks a little bit complex, because maybe this shape is a little too weird. So maybe let's just simplify things a little bit more. Let's say maybe there is no twist. It's a 0 twist. So, we also need to change the twist in there here, and perhaps it's going to be like this, right? So, now if we go to the play mode, that's more interesting, right? So it feels like a little interesting motion there. Well, there are a couple of other things that we can do. So for example, let's say that the Depth in here, is something like this. And then in here, it's also kind of like the same actually. Let's see! So that's a 0.19 So let's use also 0.19 here and what it's going to change in the second state is the Offset, right? Now let's see what that looks like. That's pretty cool! And then we have something like this in here, so if we play... There we go! We can also duplicate this path, and maybe this duplicate doesn't have any of these, and also maybe it has like a very different material that is more simpler! and it's just a circle, and it has maybe something like just 2 values here, and full Depth here, and maybe it's like more darker. So now if we play this, we can see how it goes through the path in a very nice way. Right? So, that's very cool You can also animate just values like the angle for example. So, let's say we create another state here, and in this state, the angle is 360. So, that means that if we select again here the state for the transition, that's like 1 second, which is fine. So, if you go to the play mode now you will see that it's just gonna be animating in that way. And in fact, if we do maybe like a linear transition, and we put this like, 10 seconds, and then we choose an infinite Loop, so this is gonna be rotating there forever, and then you can create this very interesting effect in which the letter is moving and everything else is moving, right? Maybe a little faster actually. Maybe like 5. So, now it's moving a little faster. This is going to be rotating there forever. Another thing that you can do is that perhaps you can animate the scale. Let's say for example maybe the start scale is smaller in here, so now you go back to our event just make sure that we have Ping Pong here in Cycle. And if we play this... It's going to take 1 second, and it's going to cycle like this. It's like an interesting motion right there. Okay! So another thing that we can do is that we can combine the cloner with the path to spread clones across the path shape. I'm going to create a simple sphere in here and this sphere is going to be in a purple color and maybe a little bit of overlay as well. I just want to clone this sphere on the surface of the path. So, I need to select the sphere, and then, I'm going here to the cloner at the bottom then I'm going to press on "Object" and then on the Object, I'm going to select the path, which is this one. Now you see that it's only a couple of clones, so let's increase the count, and now we see more. And also I'm going to press ⌥ + shift (Alt + shift) and click here on the resize for the sphere and move it to make it smaller. And now we see how we can spread this sphere across the path. Now, be a little careful because if you have too many objects cloned over the surface, you can reduce performance, because there's way too much information to handle. So, I just want to keep it a little simple there. Maybe something like this will work. You can also enable randomness
of course and every other value for the cloner. By the way, if you're interested in learning more about the cloner, you can watch one of our previous tutorials on how the cloner works. But, here for example you can change the scale. So, maybe you can use here 2 and you can see how some of them are twice as big as the other and we can make this even smaller. Here is an example of how you can combine custom vector shapes, with the 3D paths to create a very interesting form. Like, fluid form that when you change the parameters, like the angle it really looks really beautiful! And you can also change the Twist, and it's going to be the same See how it's twisting. So, you can double-click on the path and you can change the parameters and see how everything adjusts itself and if you see here for example, the base shape for this is just like the most random shape, it's not even really a pretty shape. But that's the point, right? Because something like this feels random, when you apply to the extrusion, it actually looks really cool! And then when you animate these things, it looks very nice as well If I enable here this sphere, this sphere is using the cloner on top of the surface of this shape, and I just wanted to show you very quickly for example that, if you change the shape of this sphere, to be something like this now you can create all of these very interesting effects in which this looks more like some sort of sharp points in there. And so this can help you to create different type of compositions, or, you know, visual outcomes.
Depending on what you're trying to achieve. Here's another example of how you can achieve very interesting effects with 3D paths. In this case, the text that you can see
here is just a one continuous path, that is just the shape of a calligraphy
type of letters, right? Or handwritten letters. And in the background, we also see some very simple shapes that in combination it creates this very colorful effect. Now for the material of this, is a gradient, and you can see here if you click the gradient. Just like we saw before, we can apply a gradient. So, this is a gradient that contains all the colors in the rainbow. And it also has a Fresnel layer here, and a Matcap layer to simulate the reflections and if you click here, we have this one Matcap layer, and then there is another one that is just an image that looks like this, and kind of helps in achieving this reflection style. So, I want to show you how you can change this design easily to achieve something really cool! So, for example, if we change the size of the circle now it feels more like some sort of brush style. Also, notice that all of these dots here those are made using the cloner as well. But then again, if I change here the twist for example you will see how it looks which is really nice Super slowly and you can see how it looks when I'm moving the depth because, this is a gradient that goes from the beginning to the end so it feels like it's actually being typing. So, you can animate these sort of things as well, you can increase this, or you can change the shape, right? So, let's say it's a polygon so, it looks like this and maybe it's a little smaller. Something like this. So, you can have different effects in there as well to achieve different results. So, maybe something like this and then you change here the Offset and then you can create animations like this, right? Now, you can also achieve things like this by just using different type of thickness on your path, right? So, for example here you can see this one. Is a little smaller. It also contains a material that is using a glass layer and then it's using a Matcap layer for the projected reflections, and some Fresnel layers, and then here's the glass. You can see it That’s a lot of Blur, but I can reduce the blurring. And then maybe looks a little bit more like actual glass. So, you can create quite interesting effects, by just playing with different sizes. So, for example here. Let's change this can be smaller. Then I can do something like this. So, it's very easy to create components like this, and duplicate them, change values, and play around. So, all of this is just the same idea but
different colors and materials to build this letter You can also create much more complex scenes if you combine different shapes for the profile of the path extrusion and also you can use another feature that is called "Align To Path" So, let me just first show you the potential of this, by going to the play mode and you can see here that all these spheres are basically following a path across these tubes and they repeat infinitely so these kind of like marble machine is, you know, really nice and looks very complex, but it's actually quite simple logic. So, a variation of the previous idea maybe a more simple example here is this one in which we have these cars that they move along this path but they also collide with the objects, right? So, I wanted to show you maybe this simple example because I feel like this is something that we can build now. So, you can learn how to create something like this. I'm just gonna go here to the top view and I'm just going to try to trace a path, that maybe goes from here, and then it goes like this. A little bit like this. Get to this point, and then it ends there. So, now let's just make sure that we just aligned these dots a little bit, so it makes more sense. Maybe like this, and maybe this one, a little bit more like this. And this one more like this. Alright! I think that's a little better now So, let's use a rectangle instead maybe smaller. And let's also add some round corners. Like this! Maybe a little bit smaller. Also something like this. Let's also duplicate the path, and let's make like a brighter line. And let's just move it a little bit to the top and let's change the size to be something like this, and something like that. I want to align this sphere to the path first using this feature that is called "Align To Path" and this is available on any object So, I can just choose the first path here Now my sphere is aligned. So, let's just maybe for now, just move this a little bit here. Maybe it's gonna be a little bigger too. So, basically, if you change the Slide, it's just going to move along the path, but you can also decide to start on a different Offset. So, for example maybe the motion is going to start here and then the Slide is going to make the movement along the path up to that point. So, I can create for example a new State in here, and then a transition to make sure that goes from current to State, and then this is going to be infinite. And what I can do now is that, on the the State 1 here, I can just change this to be 0 So, now if I play this animation, it's just going to animate like this, right? Maybe it could be 2 seconds, and instead of Easy In and Out, it could be Linear. and then it's going to be moving. Right there! Now, I don't really want this to be floating Let me show you how you can make it so it's actually on the surface. I'm just going to move this back to the floor. Something like this. I also want to make this sphere just a little bit smaller. Let me just remove this State for now and make it smaller. One thing that I want to do here is that... Let me just, for now, disable this, and then you can move the sphere to this point. So, I want to just group this sphere by pressing ⌘+G or Ctrl+G So, I can create this group. And now I want to move the group. If I press the letter "S", I can snap into this object and I want to press now ⌘+⌥ (Ctrl + Alt) and click on the group here and move the position of the group to be at the bottom of the sphere. So, now if I click on the group again, then move it a little bit to this point here Now it will work just fine! So, what I want to do is that I want to use this brighter path now instead, as the path for the movement and let's put it there. We can fix that as well. But now you see that if I slide, it's sliding and it's moving in the right way. Which is pretty cool, right? So, let's say maybe the Offset will be also around here Let's just make an animation for this to happen. Also, make sure that you delete the Start event from this sphere because we don't need that either Let's create a State here And it's going to be something like this. Maybe 2 seconds, Linear, and an Infinite motion here. So, now if we play this you see that is moving above the surface. So, you can replace the sphere with any other objects. Especially now that it's just a group, right? So, you can even duplicate the sphere
and maybe making something bigger here You know, maybe something weird like this and that's also gonna work You can see that... Here you can see that when the sphere moves across, or along the path is changing on the angle but there's a different mode here which is, that you can also choose the orientation to be World mode and that is just going to have an orientation that is the same as the world orientation. And then when you play this it's gonna be always in the same orientation. Now if you do this make sure that you set a good default for your rotation because otherwise, it will look a little weird. Let me just undo this and put Tangential here. Okay! All right! So, I just go back to the previous simple sphere in here and, what I want to show you now, is how you can add physics to this scene. So, we can have some obstacles on the road in here, and when the sphere is moving, it's going to collide with these obstacles. So, I just want to create a couple of cubes in here. One here. I can duplicate this and put it over here. This is smaller. Something like this. A little bit to the top. A little bit to the top Then, we can add some round corners on these cubes and let's use this blue color. So, the first step is to enable physics here in the environment settings, and make sure that you select the cubes. You also enable physics which is by default on both of them. But let's also make them to be dynamic so that means that when they Collide they will be push it. And let’s see if this is working already. Nice! So, maybe we can move this a little bit more to this, and this one will be around here. Perhaps a little bit of rotation Also a little bit of rotation for this one. So, let's see how that works. Nice! So, now the sphere is colliding with the objects on the road and that's how you can use physics in combination with the 3D paths to create collisions of one object that is moving along the path. Another thing that you can do with paths is that you can convert a 2D vector shape, into a 3D path. So, I had this composition in here and what I want is to convert the first element in here into a 3D path. I can remove the extrusion if I want to or I can leave it there and then I just need to press this button that is called "Convert to Path" you can see that immediately now this is a 3D path So, now I can change the values here to be maybe something like 20 and 20 and now I have this 3D path here and then I can duplicate it and making it smaller, and then duplicate again pressing ⌘+D (Ctrl+D) making it even smaller So, now I have a 3D path in here that was made from the 2D path. And if I double-click in here, you can see that we still maintain the round corners so, I can increase the round corners if I want to. I wanted to also show you how you can play with materials to achieve effects like this in which we are combining a 3D path, and the glass layer and some layer materials to achieve this iridescent effect. So, if we select this object in here and we go to the material you will see that the material is composed by different layers. We have a Fresnel layer at the top, then we have a Matcap and then another Fresnel layer, and then a couple of Matcaps, and then we have the glass layer, which is right here. So, if we select the Matcaps we will see that we have a couple of textures that are creating this sort of reflection/refraction effect This is just an image with some iridescent colors that it's just being projected on the surface of the model. Also you can control the transparency of the glass. So, if I reduce the glass completely, you will see that it looks more like a metallic shape, and then let me just go back there. So, you can move and distort, and do whatever you want. In this particular example, we have two different paths. One is creating the glass path; the one that is on the outside and it has a little bit of Reflections. and the other ones are the ones that are inside. Basically the lights inside the glass. So, you can see here in this group we have all of the elements that are inside. If I move one of them, you can see that it's just a normal 3D Path, and is using just a simple material. And if I select this path, you can see that it's just one material. White. Full white And we don't have lighting because we want full brightness on this. The same for this one in here. Is the same idea. It's just that the material here is some sort of yellow with a little bit of green. So, now if we want to animate this we can follow the same idea that we did before. And actually, I already have a version here that is animated. If we go to the play mode here, you will see that it's just animating the depth of these inside paths. Here's another example of how you can use the custom vector shapes to create very interesting effects. So, if you double-click in this shape you will see that it's similar to one of the previous scenes that we discussed. What is changing here though is that the base shape is more complex. You can see that this is the actual base shape it looks like a saw or something like that but the thing is that this is making all of these random wavy Now, going back to this scene there is an interesting trick here all of this is spheres they always point to the same path Which is called the "main rail animation path" and what is interesting is that; they all have animation but they would never Collide because they have the same timing. But the way that this is achieved is that every one of them have a different Offset So, they will make a full loop across all of this, but the starting point is different. So, even though they have the same timing, because they have a different Offset, they always maintain the separation in distance between each other. So this one is 0.09 This one is 0.39 and this one is 0.23 But they all make the same Loop. And for those in here, you will see if we play this animation here you'll see that they go from here to the middle and then they return. So the animation is a loop animation that is going from one position to another position in the middle of the path to prevent them to collide. And then we have other animations in here for example, this one is just making a loop that goes like this. And this one is just making a loop that it goes like this. If you're curious about how we can achieve this sort of tunnel profiles or tube profiles So, we can see the actual profile of these shapes. Is just a very basic 2D vector shape. that is being extruded and it just looks like this, right? Here in this example scene you can see how you can combine many different effects to achieve an interesting style. And this is just a 3D path that is using the shape "Star". If you change the size of this, you can add it more complexity or you can simplify and it's going to look quite interesting. All right! That is it! That's how you can use 3D Paths to create all different type of compositions and how you can blend or mix the 3D Paths idea with physics, or maybe you can blend it with the cloner to create more interesting effects So, I hope you liked this tutorial. If you're interested in more content about this please let us know in the comments Alright? See you in the next one! Bye, bye! 👋
