Hyemi Song Design Lab

출처 http://www.flashmagazine.com/Tutorials/detail/away3d_basics_the_cameras/

The camera is what you view the 3D world through. Just as a real camera, the virtual 3D camera applies perspective to your models by adjusting properties such as zoom, focus and position. In this tutorial you'll learn how to use the 3 cameras available in Away3D.

No matter what you want to do in Away3D, there's some things that you'll always need to set up. The "Basic" tutorials will explain the Scene, View, Camera, Primitives, Textures and explore some of the possibilities. Each example in the series will be organized as Actionscript Classes so they can be used in both Flash and Flex.

If you are new to 3D on computers, you might want to read our introduction that explains the core 3D concepts. This tutorial also contains the source for 6 other Away3D projects that may be worth checking out. To run the example files, you will first need toset up Away3D on your computer. When you have the Away3D source files and your software is set up, you can open, explore and export the examples in this tutorial by just placing them in your project directory. 3D is processor intensive, so all the examples use a file called Cover.as that you must also download to your project directory to be able to run the examples.

Away3D Cameras

Away3D offers 3 different cameras: Camera3D, TargetCamera3D and HoverCamera3D. All the cameras offer settings for zoom, focus, depth of field, pan, tilt and position.

All of these cameras have properties that can be set in the constructor like this:

They can also be set or changed using the properties directly like this:

If you have a SLR camera or even a simple camera that has a proper lens, you will know how the zoom works. The focus property on the other hand decides the focal length of the camera (angle of view). To try this out, take a look at this example:

movie: Camera.as

Here you can see that the focus works together with the zoom to decide how you view the Scene. Lower focus values will move the "rendering plane" closer to the camera. Higher values wil move it away from it. Tartiflop has written a great tutorial that explains zoom and focus settings for Papervision. For Away3D it's the same, so if you want to learn more, check it out.

Pan and Tilt will do as they say, they will rotate the camera around what it is looking at in either horisontal or vertical direction. You can set both positive and negative values. I initially  mentioned the Depth Of Field. When combined with 2D sprites, this can be used to create depth effects. We'll look closer at this in a later tutorial.

All these properties are all considered when rendering the View. The process of figuring out what triangles are visible though the View/Camera is called Culling. Calculating how something should look in 3D requires a lot of CPU and culling make sure only what is visible to the Camera is calculated.

The 3 cameras work a little differently, so here's a breakdown of each of them and how you use them.

Camera3D

Camera3D is the basic, free form camera. You can move and point it in any direction.

movie: Basic04Camera3D.as

Use the keys A, D, W, S and arrow up/down to navigate the 3D space. In this movie, we use a set of standard movement methods available to all Away3D objects:

These functions are pretty self explanatory. Note that a new Camera3D is by default positioned in the centre of the 3D world (0,0,0), meaning that if you add a Sphere you will not see anything since the camera is actually inside it. By default, a sphere is only viewable from the outside, so to see the sphere, we either have to invert the sphere ( sphere.invertFaces(); ) or move the camera outside the sphere by setting the cameras Z property like this:

Here we pull the camera back one thousand units, towards us. Setting the x/y/z properties of the camera will make it move, but remember that any camera must also point to a certain location. By default, the camera will look at the center coordinates of our 3D Scene. To point the camera somewhere else, we use the "lookAt" command:

This tells the camera to look at the coordinate x/y/z in our virtual 3D world. You can also make the camera Pan, Tilt and rotate along any of the three axes.

A word of warning about setting the x/y/z properties - make sure you always set the camera position before asking it to "lookAt" something. If you first "lookAt" something and then change the position, the camera will still be looking in the direction set initially. To solve this, always update your "lookAt" reference after positioning the camera or use one of the other cameras that make targeting objects much easier.

TargetCamera3D

TargetCamera3D has all the properties of Camera3D, but it has a special ability to "target" other objects or positions in the 3D world:

movie: Basic05TargetCamera3D.as

Use the navigation keys as for the above movie. Using a TargetCamera3D, the methods for moving the camera about get a new meaning. Here the camera is always looking at the target object, so camera.moveLeft actually rotates the camera around the targeted object.

By default, this camera is looking at the center of the coordinate system, but we can change this to any other position by changing the target:

To see how the targeting works, just click any of the primitives in the example above.

HoverCamera3D

HoverCamera3D has all the properties that TargetCamera3D has, but adds methods that are useful for circling around an object by setting the desired pan and tilt. It also hovers the camera, so that it moves softly from one position to another. You are not limited to circle around objects though, so this is maybe the most versatile camera of them all.

movie: Basic06HoverCamera3D.as

Instead of using the move-methods, we now use two custom properties in the HoverCamera3D:

These are the angles from 0 to 360 that the camera will Pan and Tilt to. These values are relative to the current values:

These are the starting point for the "hover", so when we create the new camera, we also set these to zero. The "hover" is effectively a tween of the position that is performed over a predefined number of "steps":

By increasing this from the default 8 steps, we'll get a slower and smoother transition from one angle to another. You can also reduce this number, all the way down to zero steps. This will move the camera instantly to it's new position. Note that for the HoverCamera3D to actually "hover", we need to add a little something to our EnterFrame method:

Unless you call camera.hover() the camera will just stand still. Now it's time to put these properties to use and see how they work.

Orbiting your scene using the Mouse

One of the most classic ways to display a 3D scene is to just move the camera back from the scene center and let the user rotate around the scene using the mouse as in the example below.

movie: Triaxe2.as

I'll now explain what happens in this code. We start by defining some variables that we'll need later.

We then add a HoverCamera3D and set our view to use that rather than the default camera.

We set some pan and tilt values on the camera so it opens at an angle a little different from the default:

Note that we have to set both the angle and the accompanying targetangle at once, or the camera will start by rotating towards the target angle. Also note that we set 'mintiltangle' to minus ninety. This allows us to rotate below the scene, something that is prevented by default.

Next, we add some objects to our Scene and set the scene to render on EnterFrame.

To grab the values from the Mouse, we define two more listeners and tell these to call functions when they occur:

In our MouseDown handler, we'll need to save the current pan and tilt values of the camera as well as the position of the mouse. We'll use these to calculate the speed of the camera later.

Note that we're also setting the boolean variable 'move' to true. This variable will tell us if the mouse is down or up, so when the mouse is released, we'll unset it.

The last bit we need is where 'the magic' happens, in the EnterFrame handler.

The goal of this function is to calculate a small value that we can add to the target pan and tilt values. We know the previous mouse position ('lastMouseX/lastMouseY') since we saved these in our MouseDown handler. By subtracting the current values, we'll know how far the Mouse have moved. We multiply this with a speed factor ('cameraSpeed') and add the result to the existing values (lastPanAngle/lastTiltAngle). We finish off by calling the hover and render functions to make the view update.

If you want the inverse of this - so the mouse moves in the opposite direction of dragging, you just swap the parameters around:

This is just one of many possible solutions to rotating around an object and there's many ways you can improve on this. How about adding scrollwheel support for zooming (camera.zoom)? We'll get back to camera movement in many of the following tutorials, so just keep reading to learn more

===============

카메라만 잘 구현해도 에펙 부럽지 않은 비주얼을 만들 수 있을 것이다.

열공!

Implicit coercion of a value with static type

자주 보게 되는 에러들이다

1118: Implicit coercion of a value with static type flash.display:DisplayObjectContainer to a possibly unrelated type flash.display:MovieClip.
1118: Implicit coercion of a value with static type Object to a possibly unrelated type loadLayer.

이 에러들은 반환되는 값이 명확하지 않기때문에 생기기때문에 명확하게 해주자

_layer_block.addEventListener("CompleteLoadLayer", LoadClipInfo);

private fuction LoadClipInfo(e:Event):void

trace(_layer_block);  //결과 [object loadLayer]

trace(e.target);         //결과 [object loadLayer]

trace(e.target == e.target);   //결과 true

하지만

아래함수로 호출하게 되면

loadload(_layer_block);          //결과 이상없음

loadload(e.target);                 //결과 . 1118에러

private function loadload(layer:loadLayer):void

e.target으로 호출하면 에러가 난다

그럴땐 강제로 반환되는 형을 맞춰 주자

loadload(e.target as loadLayer);