(futuristic sounds)
- We've been creating a VR
birthday card for my niece.
Here's what we have so far.
I think it looks pretty cool.
We've got some good
lighting, fun little models,
nice birthday cake.
The problem is it's supposed to be VR,
it's supposed to be immersive,
and yet I can't actually
navigate around the scene
to go take a look at
things so let's fix that.
Navigation in VR is tricky
but we could do something
like a first person shooter
where you just use the arrow
keys to move forward and back,
left and right.
Turns out, if you're trying to do that,
first, if you're in VR, you
may not be able to see that
and if you could, the
acceleration as you speed up
and slow down would make people very sick.
What we often do in VR, instead
of trying to do cameras,
as the camera is fundamentally controlled
by the player's head.
Instead, we will use teleportation.
So that means you click on the
area that you want to go to
and then you jump right to it.
The jumping won't make people sick
whereas speeding up and
slowing down to get there will.
So let's build a simple
teleportation system.
First thing were going to need is
some place to teleport to.
So let's go in our code to innate content
and at the bottom of innate content,
let's add a target.
Target1 equals new.
We want this to be a, let's
just use simple spheres for now.
So it's going to be a
mesh with sphere geometry
and let's make it about
half a meter wide so 0.3
is the radius and let's make
it something bright like red.
Now let's position it a
little bit in front of us.
Again, we'll put it at head
height which is 1.5 meters.
Now let's flip back and see
what our scene looks like.
We've got a red sphere.
It's definitely too big and too close
so let's make it a little
smaller for the back.
There we go.
That looks better.
Of course we're going
to need a couple of them
so instead of creating,
putting these all straight
in the scene, we're going
to add an array of targets.
So here's our second target.
Let's put this over on
the left and say four.
Those are too close.
Okay, that looks pretty good
and we'll add one more on the right.
And then one more right where we are.
So now I've created four targets.
There's one in the
middle, one on each side,
and then one that's
actually right where we are
which I can't see but
once I get over there,
I might want to go back
to where I started.
So these are all of the
points within the scene
that we can navigate to.
Now, let's make it so that
we can actually get to those.
Let's add all of these to
target object, targets array.
Now for each target, we're
going to add it to the scene.
We're also going to add an event handler.
So on target is clicked,
just going to print
that it's being clicked.
And the event has a target object on it
so we know which is being clicked on.
And the last thing we need
to do is make each target
we click on.
Now the pointer object can
click on anything we want.
We just need to give it some indication
of what things should be clickable.
It's called the intersection filter.
What I commonly do, since
every ThreeJS object
has an extra place called user data,
I just add a Boolean clickable,
add a clickable as true, then I know that
it can be clicked and will receive events.
So target.userData.clickable is true.
Now whenever I click
on one of those things,
I can see in the console it says clicked
and it gives me all the
information about that object.
So now what we'd like to do
is actually move the camera
over there.
There's a problem.
We could try to move the
camera but it will immediately
be put back to the
origin and that's because
the camera really isn't ours to control.
The camera is attached
to the player's head.
As they move their head, the
camera object can change.
If they are in a six
degree of freedom headset
where they can actually forward and back,
the camera will change.
We can't mess with the camera.
It's the number one rule of the art.
Don't mess with the user camera
because that's their head.
Instead what we can do is move
the entire world around us.
So far, we've been adding
everything to the scene object.
This is something that ThreeJS creates
that everything else is inside of.
So what we're going to do,
instead of adding directly
to the scene, we'll create a
new object called the stage.
Stage equals new three.group.
Now, instead of add to the
scene, we'll add to the stage.
Everywhere we call scene.add,
we'll call stage.add
including even our lights,
all of our targets,
and of course the environment itself
which is that big JLTF file
and we'll add to the scene.
Then we add the stage itself to the scene.
If we did that correctly,
nothing will look different
but we have an extra level of indirections
so now we can start making the stage.
Great, everything looks the same.
So now, whenever I click, we find out
where the thing is that we
clicked on with e.target
and get its position.
We use that to move the stage.
Now of course we're
moving towards the stage
but since we can't move the camera,
really we're moving the stage towards us
so whatever direction we would have gone,
we want to do the opposite to the stage.
So what we want to do is copy
the position of the target
to the stage but the opposite direction.
So stage.position.x is negative,
we need that target position of x.
We don't want to mess with the heights
so leave we leave y alone.
Same for z.
Now when I click on the sphere,
we'll go right to it.
Now that I'm looking at this,
I can see hmm, perhaps
I should move the target
to be a little bit closer to the camera.
Again, you'll find that
when you develop your stage,
you get all the basics of plays.
You spend most of your time tweaking
to get the perfect experience.
There we go.
Now I can walk right to the cake.
So what we've done is create
a teleportation system.
This means there are specific
points within the overall
VR scene that the user can
go to by clicking on them
and then they're being teleported to it.
So first I had to think
what are the places
the user would want to go to
or that I would want to let them go to.
If this was a game, there
would be certain places
they shouldn't be able to go to.
Put targets in those places.
A target is something
that you can click on
to teleport you to that spot.
So I'm just using a red
sphere and a fancier version
that might be like a glowing diamond
or something related to the
experience you're creating.
Then I have to move the
camera except in VR,
we never move the camera.
So instead, we put everything in the scene
inside another object called stage
and move the stage in
the opposite direction.
So instead of moving the
camera to the mountain,
we move the mountain to the camera.
Now when I click on it,
I go right to the
mountain and to the cake.
So now I can navigate around the scene
in 2D one VR.
Next thing we want is to
actually say happy birthday
in the scene.
To do that, we're going to need some text.
So next time we'll add
text, happy birthday,
and make it look really cool and shiny.
(upbeat drum music)
