Learn how to use SceneKit to make 3D letters.
- [Instructor] While I'm not a master at SceneKit, it does intrigue me. One cool and relatively easy feature is using 3D text. SceneKit has text geometry you can use to add 3D text to projects. Let me show you how to do that on an iPhone project. Download the Xcode starter project from GitHub. Instead of a game template, I used a single view template and set up the scene programmatically, laying it out in code so you can transfer this easily to a playground if you wish. I added some sliders, so you can move the camera around, and the code to move the camera.
Head to the view controller code, to the make scene method. You can see that I've already added the scene, the camera node, and the lighting. The camera node will be moving around by those sliders. On the bottom there, you'll see where it says do your work there, give yourself some space and we'll add some coding here. First thing we're gonna do is make a SCNText object with our text in it. So we're gonna do that as let pizzaGeometry equal SCNText.
And we're gonna use the one string any with extrusion depth. And the string will be pizza and the extrusion depth I'm gonna make 0.5. And you can play around with those extrusion depths if you'd like. That's how deep the 3D image will be. Next, I'll add a font. The default font is 36 point Helvetica New. And that's often way too big of a scene. The scene itself is only one unit. So that's 36 units in comparison, and it's huge. It also helps to keep a font that has some weight to it.
So I'll use Avenir Next heavy for my font. So now I'm gonna set up pizza geometry and set its font. And I'll pick a UIFont. And we'll use the name size one here. And for a font we're gonna use Avenir Next. And if you want a version of that, you'll add a dash and then you'll put bold or heavy. And I'm gonna put heavy here. And I'm gonna make this just 1.0, like so.
And the size of 1.0 is very easy to work with. So for a bare minimum, you can add this geometry to a node and then the node to a child node. So I've already created a text node. So I'm gonna put that in here, textNode equals SCNNode, geometry, and I'm gonna call that the pizzaGeometry. And then I'm gonna assign that text node to the scene, scene.rootNode.addChildNode, and we'll use textNode, like so.
Okay, go ahead and run that. I'm gonna run it on my iPhone 8 Plus simulator here. And we get a 3D looking pizza here. And you can move it around a little bit and you can see that it actually is 3D, but not looking incredibly good yet. You can see there's a little kinkiness to the edges. So go ahead and stop the app, and let's make this look a little bit better. One way you can do is add some color. You do that with materials and setting a color for different conditions. I'll set the color for diffuse lighting to red.
And for that, I'm gonna use something else on the pizza geometry. So I'm gonna put that above textNode here; firstMaterial will give us the first material we're using. And we're gonna want diffuse for the kind of material. And the contents of the material will be a color, like so. Now I'm gonna do another color here on the material.
And this one will be specular; that's how you get some reflective light on this. And I'm gonna do contents again. And this one, I'm gonna actually get a little more fancy on my color. UIColor, and I'm going to use red, green, blue. And my red will be 0.4 and my green will be 0.9 and my blue will be 0.3. My alpha, I'm gonna keep at 1.0.
Go ahead and run that. And now you can start seeing the light. And it'll actually move in the light back and forth. Now if you look really closely, I'm gonna zoom in here a bit, particularly on the A, you'll notice that it's kind of chunky-looking here. That's the next thing I wanna fix. And to do that, that's a property called its flatness. So go ahead and stop the app.
And we're gonna add one more line of pizzaGeometry here, and that's flatness. And the smaller the flatness, the smoother the curve, so I'm gonna set this to 0.1. I'm also gonna add a chamfer, which, I'm gonna set the radius on that. And I'm gonna set the radius on that to 0.05. Go ahead and run again. And now you have a pretty cool display.
It moves around a little bit and I'll move it in again. And you can see that's much smoother. And as it rotates, you get the light on different pieces of it and on the edges of those chamfers. I've made all of this in code, by the way, because it is very transferrable to other devices. You can try this out in playgrounds, or on the Apple watch with a little bit more work. This was just a taste of the SceneKit text. There's a lot more you can do. And there's plenty to learn in the library about SceneKit if you wanna know more.