- We've created a 3D scene
of a VR birthday card from making some more.
We've got lots of cool objects in the scene.
There's a cake, there's some spheres for navigating.
Click on a sphere and go right to the birthday cake.
But, no birthday card would be complete
without actually saying the words happy birthday.
To say the words happy birthday, we need some text.
And text in 3D is tricky.
We could use HTML and put it on top
of the scene but the minute we go into immersive mode,
that's gonna go away.
We only see the 3D content.
So that won't work.
We could draw text into a texture,
and then just splat that inside the scene.
And, in fact, the VR stats module I have here
is doing exactly that.
It uses an HTML canvas,
draws some simple text updated three times a second.
That becomes a texture, which is then drawn
to a rectangle inside.
That's not really three dimensional text.
So my third option is, I can actually create
some three-dimensional geometry
from a small piece of text.
And that's what we're gonna do here.
ThreeJS has text support built into it,
we can create a text geometry.
But, we still need a font.
It needs to know what the actual shapes
of the letters should look like.
Now, it has a one font built into it,
but it's kind of a boring sans serif.
Instead, let's find a cool font to use.
So I went to a webpage called fontlibrary.org.
And they have a bunch of open source,
creative commons licensed fonts that we can use.
And there's a very popular one here called Poppins.
Probably for the new Mary Poppins movie.
Looks like something that my niece would enjoy.
So, let's take a look.
And let's write Happy Birthday Lauren
and it shows us a preview,
it's got kind of a bubbly look to
the round shapes in the font.
I like that, it was created by
the Indian Type Foundry in the 1920's.
So that's handy, it actually has glyphs
from many other languages.
So I can download this as a truetype font.
The next thing is we need to load it into our scene.
So let's create a loader.
There is a 3DS extension in the examples directory
which knows how to load truetype fonts,
to get the actual shapes of each letter.
So we need the TTFLoader and opentype,
which is the support library uses.
And those are already built into our boilerplate.
So we can just create a new TTFLoader.
We're gonna load it with the font.
So let's download Poppins, we'll unzip it.
We can see it has many different weights.
There's black, bold, bold italic,
I think what we want, just stick with regular for now.
And put it in the folder.
Now we can load it as Poppins-Medium.
So this will load and give us the font data.
Now we need to turn it into something
that ThreeJS understands.
So we'll do that by using the standard FontLoader.
So we created FontLoader, tell it to parse the data,
and now we have a font that ThreeJS knows how to use.
So let's create some geometry.
Now, our geometry is gonna be a ThreeJS TextBufferGeometry.
And we give it the text we want,
which is gonna be Happy Birthday Lauren.
And then a bunch of settings.
First setting is the font,
which is the one that we just loaded.
Of course, we have to have that.
Let's give it a size.
Now, the exact size we choose depends
on how big we want the text to be
and where it's going to be in the scene.
So I always just start with a size of one,
and start tweaking from there.
Then the height.
The height is actually the depth,
because we have the text in front of us.
If it was on the ground, it would be the height.
Let's start with, let's say, half a meter.
There's a bunch of other settings
that control how the curves are turned into polygons,
we'll just leave the defaults for now.
Another way of geometry, we can create a mesh,
using that geometry.
So now, the mesh just needs a material.
This time I'm using mesh standard material
instead of Lambert.
Lambert is kinda my default,
it's pretty cheap to render,
it gives you nice diffused shading.
It looks nice.
But when we want something to stand out,
if we want it to be shiny and very visible,
we can use standard material.
Which is more complicated,
and let's us control the look of the material
through roughness and metalness settings.
Standard is part of PBR, physically based rendering.
Which is becoming the standard through all 3D pipelines.
And ThreeJS supports it.
So for that let's give it a base color of pink.
And metalness, let's start with a metalness
of zero and a roughness, 0.5.
And we'll just see how that looks
and start tweaking the settings.
Now I have our object,
and of course we need to position it in the scene.
I put it at negative seven,
which is roughly where the cake is.
And five is gonna be somewhere above where the cake is.
And then add it to the stage,
like we do with everything else.
Okay, now we've reloaded
and we can see it does say Happy Birthday Lauren.
Though, it's not centered and the text
is kind of a weird color.
And it's way too big.
Let's go back,
and change the size.
We'll go a little further back.
Height seems okay, but actually,
it might be a little too high.
Let's move it down.
So that looks about right,
except that the text isn't centered.
It's positioning the left edge
right at the position of the whole object.
So let's just center it.
We can center the text by calling center
on the geometry object before we add it to the mesh.
Great, now it says Happy Birthday Lauren,
it's partly hidden by the trees,
and when I go navigate to the cake, I can see it.
Except that the text is up a little too high,
and it's way too deep.
So let's lower it slightly again, a little further back.
We always do lots of tweaking
as we start to experience the scene.
Okay, that's pretty much exactly what I want
except the text is too deep.
So we can change that with the depth setting,
which is actually height.
Let's change it to 0.2.
There we go, that looks better.
But, I am not really getting much of the color
and I want it to be kind of a shiny look.
So we're gonna add a bevel.
Turns out, when we generate the geometry,
we can add a bevel to it.
So we set bevelEnable to true,
and set the bevelThickness to
0.2 meters, which would be about 20 centimeters.
Use the rest of the default settings
so we can see how it looks.
Now we can see it, but it has
all of the letters are squished into each other.
That's because the bevel size is still way too big.
So let's set this bevel size down to 0.1.
Now, we can see the letters again,
and they're definitely beveled but
they're kind of squishing into each other.
So let's reduce the bevel size again.
Now we have nice bubbly text.
But you can see it's super bright, almost white.
That's because we're actually very close
to the light and the light is very intense.
So let's slide it back just a tad more.
And let's reduce the intensity
of our PointLight.
So we'd set it to 2.0, let's reduce it to 1.5.
There we go, Happy Birthday Lauren.
Text definitely looks shiny.
I'm pretty happy with that.
So, in this segment we created happy birthday text.
In order to do text, we could've done
HTML on top but we wouldn't see that in VR.
We could've done canvas,
create a texture, but that won't look very good
once you get close to it.
We wanted something that's bright and bold and rounded.
So we created happy birthday with text geometry
using a custom font.
And then messed with the settings
until we got the exact look we wanted.
So that's it for text.
The final thing we want to do now
is add some interaction.
It would be nice if when we got to the cake,
it would actually sing Happy Birthday.