Basic Sample
Take a look at a basic example of how to create a 3d element in away3d in a few lines of code.
Video Transcript
00:00Here you've got a basic little hello world in a way 3D.
00:03It's 65 lines if you comment out most of it, which goes to
00:08show how they pretty much do everything for you, which makes
00:12it easy to get up and running.
00:13And then you can kind of, as soon as you've found your feet,
00:15you take it from there.
00:17So what do we need?
00:19Forget the imports.
00:20They're done automatically.
00:23Yeah.
00:23Sten sprite.
00:25It's a bit weird the way you actually add.
00:29Now, you add your view, which is the view 3D class.
00:33There you go, away 3D containers, view 3D.
00:36You add it to the display list, which is a bit
00:38counterintuitive, because it's not actually part of the
00:40display list.
00:41I think away 3D handles that internally somewhere.
00:45You also need, stage 3D has something called the context
00:483D, which is what you draw into.
00:50And away 3D doesn't give you direct access to that.
00:54It gives you a proxy.
00:55It gives you a stage 3D proxy, which kind of gets you
00:58from running until stage 3D is ready.
01:01And that can take, relatively speaking, quite a long time,
01:05because it's got to interrogate the GPU and find out if the
01:07GPU will support proper 3D rendering or not.
01:12That's a big issue.
01:13We're running a bit short and tired.
01:15I'm going to have to bash through this, I think.
01:19So I'm just going to make a cube, shove a few lights on it,
01:24chuck it around a bit.
01:25So we've got view.
01:27Your view is a new view 3D.
01:31We're going to just get ourselves a nice little color
01:34material.
01:35There are a few different materials to choose from,
01:37most of them are bitmap based.
01:39But color material is nice and easy.
01:40It's just a flat color.
01:42So we create a new color material in blue.
01:48Ignore that for now.
01:50We don't need that, really.
01:51Create a new cube, 300 on each side.
01:56These measurements, I found a bit weird stuff with these.
01:59These measurements are completely arbitrary.
02:01They could be 30, 30, 30, and you just move the camera in.
02:06They don't relate to anything at all.
02:08They're just numbers.
02:10Normally, I kind of work around the hundreds and thousands.
02:12That seems to be what most people do.
02:16So we created our cube here.
02:19Now the view, when you create it, the view needs the scene.
02:24You can create your own scene and add it to the view,
02:26but there's no need, really.
02:28As soon as you create new view 3D,
02:31it gives it a default scene.
02:33It gives it a default camera.
02:34It doesn't give it any default lights.
02:36So you've got to watch out for that one.
02:39And then you just call add child view, and you're good to go.
02:45Now flash display objects, they render happily away
02:51whatever frame rate you've told it to, 60 here.
02:54And they'll chug away, and they'll go process code,
02:58render, process code, render, and they'll
03:00do that 60 times a second, and you pretty much
03:03have to forget about it.
03:05The view isn't like that.
03:07The view only renders, because a render call
03:10can be very expensive if you're doing a complex scene.
03:13So it doesn't render unless you ask it to.
03:17So the obvious thing to do is just
03:18to link it to an enter frame.
03:20There you go, on enter frame.
03:21And every on enter frame, we're going to render the view.
03:25Now, if necessary, you can link it to a timer to slow it down,
03:33or you've got a lot more control.
03:34You can kind of just tell it, if everything in the scene
03:37is nice and static, you can just stop rendering for a while,
03:40because it does very quickly get,
03:43even if you're using stage 3D, it
03:45does get quite expensive in terms of operations.
03:50So hello, away.
03:52There we go.
03:52Let's debug this one.
03:55Yay, look at that.
03:56Magic.
03:57It's a cube, seen end on in blue.
04:01It's not really that impressive at all.
04:05So what we're going to do, first thing, uncomment this bit.
04:09Every render call, every display, every object
04:14contained in 3D has a rotation, x1, z, as its properties.
04:18So you can spin it around.
04:19So I'm just going to every enter frame.
04:21I'm just going to rotate x and y a little bit.
04:24And all of a sudden, we've got a cube spinning around.
04:31You don't get to see any of the faces, really,
04:33because there aren't any lights in the scene.
04:38Lights don't do what you think they do in 3D.
04:40They certainly do what I think they should do,
04:42which is behave like lights.
04:44All they do is tell surfaces how to color themselves.
04:47So if you stick a couple of lights in a scene,
04:51they weren't necessarily light anything.
04:53For instance, let's have a look.
04:59Here we've got some lights.
05:01I'm going to put a couple of point lights in it.
05:04There's a few lines of code here,
05:05but there's nothing really.
05:07Create a point light, give it an x, y, and z position,
05:10give it a color.
05:11Always good, if you like, in 3D scene
05:12to change the color of the lights just slightly.
05:15Even if they're all somewhat off-white,
05:17some are slightly reddy, some are slightly bluey,
05:18it gives your eyes a much better perception of depth
05:22and of what's pointing where.
05:24So this is a slightly reddy light,
05:27and this is just flat white, and they're
05:29in different positions.
05:30Now, I'm going to add these lights to the scene here,
05:42and off we go.
05:47It doesn't really help us any, because the lights don't
05:49actually light the scene.
05:50They need to be added to the scene to get their positions,
05:55but they light materials.
05:58So actually, if we have this material blue, color material,
06:03it's not going to be lit until you tell it to be lit.
06:07So that means it's an optimization trick.
06:11Only light what actually needs to be lit,
06:13because everything is another little bit
06:16of processing sucked up.
06:19But all materials have a lights property,
06:23and that expects an array of lights.
06:25So you can light different things with different lights.
06:29So if you've got four lights, you
06:30can create an array of just a couple of them
06:32and apply it to one material.
06:34Select another couple to another material.
06:36There's an awful lot of playing around you can do with it.
06:39But as a rule of thumb, try and use as few lights
06:41as possible.
06:42Try and use as little of anything as possible.
06:46So that's adding the lights to our cube.
06:53And then you start to get something
06:54a little bit more 3D looking, because they're point lights
06:58rather than directional lights.
06:59Directional lights still will allow you to pull out the faces,
07:02but you do get much nicer little bits of specular shading.
07:06You can just see the corner of it there.
07:09Corner of it there.
07:10There you go.
07:10That's the sort of thing you're looking for.
07:13You can adjust on the material itself
07:16how glossy or not it is, the amount of specular shading,
07:19the amount of ambient shading.
07:21It's almost an art form in itself,
07:23which I've got kind of a little bit of the way into how
07:27to light 3D scenes and how to get materials to behave properly.
07:31But you can see that's so simple just to get up and running
07:34with a few things.
07:38Here's another material for you.
07:41This is a bitmap file material, which is lovely.
07:44It's like a loader.
07:45It gives you a proxy for a material.
07:46So you create a bitmap file material,
07:49and you just give it a URL, say load that.
07:53Weird thing about bitmaps in a way 3D,
07:56they need to be square to be a material.
07:59I don't know why.
08:01It's not to do with UV mapping, which I'm not going to go into.
08:05They also have to be a power of two.
08:06So this JPEG here is 512 by 512, 2048 by 2048.
08:12But if you don't, it'll just throw errors,
08:17which can cause issues a little bit down the line.
08:22So after creating my cube, which is given a default material,
08:27blue, straight after that, I'm just
08:28going to change the material to image.
08:32Going to go debug.
08:34Oh, don't do this.
08:36Cube equals new cube.
08:40Yeah, undefined property blue.
08:42All right, then.
08:43Debug that.
08:47There you go.
08:49And all of a sudden, you've got
08:51you can do some nice, oh my god, it's full of stars
08:54type of effects.
08:55So you see, it's not that hard, really,
08:57just to start throwing things around 3D space.
09:01When you get to detecting collisions and detecting
09:05the mouse, then it does get a little bit more complicated.
09:08But again, that's probably out of scope for where we are now.