Tutorial: How to use LookAt, Attractor and Cursor Follow for 3D websites

Hi, in today's video we will take a look at how we can create these little interactive 3D elements that you can put on your website anywhere with Needle

Engine. And the best thing about it is

Engine. And the best thing about it is you don't need to know how to write any code for it to get started. Most of the times we can start from a template like

in this case the Neil engine samples package already has this cute little scene prepared for you. If you're not familiar with the Needle Engine samples,

you can um just install Needle Engine and then click on the Needle Engine menu item and explore samples. It will bring

up the samples window here where we have a whole lot of 3D scenes that are ready to go and you can dive into how they made

them apart to use them for your own um 3D projects.

In this video, we will take a look at the look at cursor interactive 3D header example.

To get started, you just doubleclick the little uh icon or click on open or install package. We will then have this

install package. We will then have this little scene here open. Every Needle

engine projects contains of the Needle Engine component. um it defines where

Engine component. um it defines where our web project is put on disk and you can use it to for example easily um

deploy the 3D scene to the browser. But

let's get not ahead of ourselves. First

of all, we have game object called camera and as you would like expect uh it has a camera component on it. When we

look at the scene, it's just aligned to look at our little 3D character here and has some controls for the field of view.

So, we can set it up to show as much or as little of the scene as we want to.

Make sure you have the clipping planes adjusted to match the size of your scene. In this case, I don't know, the

scene. In this case, I don't know, the scene is not so huge, but um that's why the the far plane is set to 50. In the camera, we can also

to 50. In the camera, we can also control the background color if you want to. By default, you will see it's set to

to. By default, you will see it's set to the skybox. And when we look at the game

the skybox. And when we look at the game view, you will also see that reflected just in case you don't see it in the scene view. Uh you can always double

scene view. Uh you can always double check in the game view in Unity as well.

But let's now change it back to the solid color as we had it and uh continue with the deep dive.

One of the most important components used in the scene is the cursor follow component. In this sample, we use it to

component. In this sample, we use it to make the eyes look at the position of the cursor. Like when we check in the

the cursor. Like when we check in the browser, you see I move the cursor around and our little character's eyes are rotating to look at the cursor.

Actually, two components are in use here. First we have the cursor follow

here. First we have the cursor follow with um settings for the damping which is used to make the eye or the the

object follow the cursor position slower if we turn up the damping. And second we have the look at component which is put on the eyes effect is very simple. We

have a look at component put on the 3D object that we want to move which is then looking at the other element in the scene the cursor. So we have one object

in the scene that is following our cursor position and then on each eye we have a look at component is used to rotate the eyes to look at the cursor. I

can show you how the cursor follow component is really following well the cursor by just adding here a little

object to visualize the position. I just

created a new sphere and I click on play to export the scene to the web. Let me

now return to our browser. You see my my cursor is being followed by this little sphere. And to probably explain

little sphere. And to probably explain what the damping does, I can just simply increase the slider here and export again.

And you see in the browser now the the sphere is really really slowly following my cursor. So I have all the artistic

my cursor. So I have all the artistic choices um right here in Unity and I can edit them visually fact on the browser and I don't need to know any code for

that.

And then also we have secondary animation um by also having a look at in the head.

So the head is turning as well as the eyes. Uh I can visualize it by just

eyes. Uh I can visualize it by just turning off the head rotation real quick. If I disable the look at

quick. If I disable the look at component like the head is not moving anymore.

And if we turn it on again and export again, you see now the eyes are also slightly rotating.

So why only slightly?

Look at the the head cursor follow object in this scene and we have set it very closely to the camera. When we move

our mouse on the screen, it will only move this object a little bit in the 3D world. The

angle that the head will be rotating is not as large. To increase the effect, we can simply move this object closer

to the object that is actually rotating.

And you will see that it will now rotate a lot more.

So now you see the 3D head is rotating a lot a lot more when I when I turn my cursor.

You have also maybe noticed um that the camera uh is looking in the direction of the of my cursor. Like when I move to the left, the camera moves to the left

as well. And when I move to the right,

as well. And when I move to the right, the camera looks a little bit to the right as well. And this is really just the same trick all over again because we

have a camera look target put into the head. This will be moved when I rotate

head. This will be moved when I rotate the head. Like for example, you can see

the head. Like for example, you can see when this head rotates the camera target that is put inside the head is also being rotated. Let's check the camera to

being rotated. Let's check the camera to verify.

And you see here um we have another look at component which is now put into the head. Um to

prove it to you I can again turn it off and we can export it again to to see now the camera is not moving anymore. It's

very static. The other thing that is really obvious in this scene is you see the little plants that are moving closer and further away from our head. This is

an effect that we can achieve using the attractor component. Component is very

attractor component. Component is very easy. It has a list of rigid bodies in

easy. It has a list of rigid bodies in the scene and applies a force to move them to push them towards the position of the attractor. Can set up a strength

in the attractor component and to increase or decrease the force. Like if

we want um objects to be pushed away, we can simply use a negative force or we can pull them towards us using a positive force. And you see gizmos in

positive force. And you see gizmos in the scene to that are visualizing how large the effect is in the scene. In

this case, it's the yellow the yellow circle. And if I make the circle

circle. And if I make the circle smaller, you see now um only a few objects are inside the circle and everything outside will not be

attracted. Let me remove the secondary

attracted. Let me remove the secondary attractor just for demonstration purposes.

Um and maybe make the radius even smaller. Now the radius is too small. So

smaller. Now the radius is too small. So

I increase it again a little bit.

Maybe four.

And now you see only a small portion of the plants are attracted to the cursor.

And if I move it over here, well, I guess uh the radius is too small. So Oh,

yeah. Now, now it's being attracted.

Yeah. So we can use this to either cover the whole scene or just attract a small portion.

And if we select the plants, uh you will also notice, okay, they have uh a little green circle around them, which means they have a sphere collider or some kind

of collider mesh. And they also have a richer body, which has set a pretty high drag value, so they don't spin around so

fast. I mean, they they slow down faster

fast. I mean, they they slow down faster in the 3D scene. and adds also some angular drag so they're not rotating as quickly.

So this is a new sample that is now available with Needle Engine that you can use to create your own 3D characters that interact with your cursor or other

objects and that you can throw around and have fun with and simply integrate into your 3D website.

Thank you for watching and I hope I see you soon on the needle forums. Bye-bye.