Join Seb Lee-Delisle for an in-depth discussion in this video Creating a 3D environment by building a skybox, adding particles, and flying around, part of Papervision3D 2 Essential Training.
- View Offline
In this movie, we're going to add special materials to each side of our cube to create a skybox. The Skybox uses special images on each side, so that when you're inside the cube, it looks like a seamless environment. In this case, we're going to create a space environment. So first of all, we're creating our cube and our MaterialsList like before, but instead of using ColorMaterials, we're using BitmapMaterials. And the bitmaps that we're using get embedded here. Let's just take a look at a couple of those, and look at the back face of the cube there.
And that's the left-hand side of the cube. You can see they join up perfectly. All sides of this cube should join up. So now, when we apply those to the cube, you can see when we run it, we have a cube with like space textures on each side and you can't see the edges at all. Now these space textures are actually specially distorted so that when you are inside the cube, you shouldn't really see the corners of the cube. It should feel like you're just in a panoramic environment.
But of course, it's not going to look like that unless you're actually inside the cube. So remember from before that the default z position of the camera is -1000. So you're always going to pretty much be looking at stuff that you add into the scene at the origin. But of course, we want to move the camera forward to the origin so that we're now inside the skybox there. Let's take a look now. So you are probably fairly unimpressed by this because we can't actually see anything. You find as you're working with Papervision, there's going to be many reasons why you run your file and there's nothing there.
It's not really the same as Flash in 2D where you put stuff on the stage and it's pretty much always going to be there, no matter what you do, unless you move it off. But in Papervision, there's any number of reasons why you can't see the things that you put into your scene. Like for example, the camera might not even be looking at it. It might be behind you. But in this case, because we're inside the cube and Papervision only renders the triangles on the outside, it means that you can't see anything. You're only seeing the inside faces. So, let's look at the next example, Cube3a.
You can see here now we are setting the doubleSided flag on each one of those materials. So we can make sure that when we're inside of the cube, we'll still see the outer edges. We're also making the cube a lot bigger so that we can make sure that we're not too close to the edges of the cube. Let's take a look at that. Ah, so this is better. Now, we're inside our space environment. You can see I can move the mouse and look around and you can't really see the edges of the cube at all. It's fairly seamless.
Let's take a look at the next example. Now, the idea behind a Skybox is that as you move around, the Skybox moves with you. This ensures that you don't actually hit the edges of the Skybox and that always stays kind of at infinity. So, on our enter frame now, we're going to move the camera forward four units every frame using the moveForward method. moveForward is a method in every displayObject3D and the camera. We'll be looking at interesting ways of using that later, but this version is just moving the camera forward, no matter which way it's facing.
And then these lines of code here update the cube's position so that they always follow the camera around. Now, in order to get a better idea of how we're moving, we're also going to add a star field into our scene. So you can see here, we're creating a star particle field here using this ParticleMaterial that we are defining the line above. We're just using the basic ParticleMaterial that we used in another chapters, just a circular white particle. So, the camera moves around and the Skybox moves with it, but this particle filled doesn't move. Let's take a look at that.
So now, you can see as we move around, we're flying through space and the particle has really helped to give us an impression of where we're moving. But of course, no matter how far we move, we're never going to hit the edge of the Skybox because that's moving around with us. So in our final file, Cube4, this is pretty much the same as the last example except instead of using a normal circular particular material, we're using this BitmapParticleMaterial. We are going to be looking at particles in more depth later but this is a way of applying a bitmap to a particle rather than just a simple shape.
Let's just take a quick look at our BitmapParticleMaterial that's here. It's a little transparent star shape. We're embedding it into the file up here as before using the Flash Builder Embed directive. So now we have star-shaped particles but we're also chucking in a DAE model for good measure. Let's take a look at this final finished scene. So now, you can see our star particles are much more star-shaped and also we should have our friend somewhere here, our Space Cow. Careful not to hit him.
So now we've learned how to create a Skybox and apply these special materials to each edge to make it look like a seamless environment. We've also added a particle field to give us the impression of how we're moving, relative to the real environment because we're not advocating any closer to the skybox. And finally, we've learned about the BitmapParticleMaterial to make specially shaped particles that aren't just simple shapes.
Users should have a basic knowledge of Flash Builder and Actionscript 3.
- Creating 3D primitive shapes
- Controlling rotation
- Moving the camera in 3D space
- Creating a particle field with depth-of-field blur
- Importing models from external applications
- Making a simple 3D game
- Using ViewportLayers to selectively render and sort layers
- Placing a custom 3D model into an augmented reality scene
- Creating interactive carousals
- Creating interactive grids
- Working with particles and billboards