Away3d basics 3-camera

Original English address: http://www.flashmagazine.com/Tutorials/detail/away3d_basics_the_cameras/

The camera Camera class is a tool that must be used to observe the 3D world. like a real-world camera, a camera in the 3D world scales, focuses, and locates a 3D object based on the principle of view. In this tutorial, you will learn three types of "cameras" in away3d"

Whatever you want to do in away3d, there are several "objects" that are indispensable. in this basic guide, we will explain the basic 3D elements of scene, view, camera, primitives, textures texture, and other concepts that will be used. every example in the Guide is based on the as3 script. therefore, they can all be run in flash and flex.

If you are a 3D cainiao, you may want to see our introduction to the 3D core concepts. This tutorial also contains six away3d project instances. Before Running instance files, you must first set the away3d Development Environment on your computer. After the away3d development environment is set up, you can open, explore, and debug these instances by downloading these instances to your project folder. However, because of the use of highly integrated Code, these examples all use a file cover.. Download the file to your project directory to ensure that all instances can run.

Cameras in away3d

Away3d provides three types of cameras: camera3d, targetcamera3d, and hovercamera3d. you can set zoom focus, depth of field, pan, tilt, and position for each camera. All three types of cameras can directly set these features in the constructor, as shown in the following figure:

1. var cam: camera3d = new camera3d ({ZOOM: 5, focus: 200 });

You can also set attributes as follows:

1. var cam: camera3d = new camera3d ({ZOOM: 5, focus: 200 });

2. Cam. Zoom = 5;

3. Cam. Focus = 200;

Let's take a look at the simple camera example below, so that you can understand the zoom mechanism of the camera in a general sense. The focus attribute determines the camera's angle of view breadth. The following is an example of a test:

Movie: Click here to watch as: Camera.

Tiflop has written a very good tutorial on zoom and focus settings (papervision). Its principles are the same as those in away3d. If you want to learn more, please refer to relevant articles.

1 cam. Pan = 45; cam. Tilt =-10;

The functions of the pan and tilt methods are just as literal. They allow the camera to rotate horizontally and vertically. The value of this attribute can be positive or negative. We also mentioned the depth of field attribute. When it is mixed with a two-dimensional Sprite, this attribute can set the depth effect of a 3D object. This Guide will discuss it further in the following sections.

All these attributes will be taken into consideration during the rendering of the view. This counts all the processes that can be met (Note: A 3D object consists of multiple triangular surfaces). We call it "filter ", this process consumes a considerable amount of CPU, but "filtering" ensures that only visible content is involved in rendering.

There are some differences between the three types of cameras.

Camera3d (Free camera)

Camera3d is the most basic and has no fixed form. You can freely move and locate camera3d.

Movie: Click here to watch as: basic04camera3d.

Use the, D, W, S, and up and down arrow keys to manipulate the preceding example. In this example, we use a conventional method for moving away3d objects.

1. camera. moveup (10); camera. movedown (10); camera. moveleft (10); camera. moveright (10); 2. camera. moveforward (10); camera. movebackward (10 );

These method names fully demonstrate their usage. Note that the camera is located at the central point (, 0). If you add a sphere to the scene, you cannot see it because camera is in the Sphere at this time, by default, only the outside of the sphere can be seen. To see this sphere, you can use "sphere. invertfaces ()" or change the Z attribute of the camera to remove the camera from the sphere, as shown below:

1. Camera. z =-1000;

Here we move the camera to nearly 1000 units. Setting the x/y/z attribute value of the camera will move the camera's position in the 3D space, but remember that the camera must face a certain position (3D point ). By default, the camera is oriented to the center of the three-dimensional scene coordinates. To enable the camera to face other points, we need to use:

1. Camera. lookat (New number3d (x, y, z ));

This code tells the camera the point (x, y, z) Facing three-dimensional coordinates. You can also use pan, tilt, and three-axis rotation to enable the camera to face a specified point.

Note that when you want the camera to face a specific point, you must first determine the camera bit. If you specify the orientation of the camera before changing the camera position, the orientation of the camera is still

The original direction. Therefore, before changing the camera orientation, we need to specify the camera space or use another type of camera that is easier to set orientation.

Targetcamera3d (target camera)

The target camera has all the attributes of the Free camera and has the ability to point to other 3D objects or 3d positions.

Movie: Click here to watch as: basic05targetcamera3d.

Use the navigation key (A, D, W, S) to operate on the sample video using the target camera. No matter how the camera position changes, the camera always points to the same target, so that the camera. moveleft

Moving the camera to the left is essentially a rotation of the camera around the target.

This type of camera is oriented to the coordinate center by default, but we can change its orientation by changing the camera target:

1.camera.tar get = sphere;

Click any 3D object in the example to feel its working mechanism.

Hovercamera3d (rotating camera)

The rotating camera has the functions used by the target camera, and it also adds a feature that allows the camera to bypass 3D by setting the pan and tilt attributes.

It is very useful when things rotate. The camera is also rotated, So it turns more smoothly. It allows you to rotate the camera as freely as you think. It is one of the most competent cameras.

Movie: Click here to watch as: basic06hovercamera3d.

Here we use two attributes of the rotating camera:

1.camera.tar getpanangle = 0w.camera.tar gettiltangle = 0;

The angles used for Pan and tilt range from 0 ~ Between 360, which is relative to the current value.

1. Camera. panangle = 0; camera. tiltangle = 0;

The above setting is the initial position of rotation. When we create a new camera, we also need to reset these values to 0. The speed of the rotation process must be determined in advance.

"Steps" to confirm.

1. Camera. Steps = 16;

Change "steps (Steps)" from the default value of 8 to 16, and the rotation will be slower and smoother. You can also reduce the value to 0. This will instantly turn to new

. To make the rotating camera really rotate, you still need to perform the following method frame by frame:

1. Camera. Hover (); view. Render ();

Only the camera. Hover () camera can be rotated. Ladies and gentlemen, are you ready? Now let's highlight all the things we have learned above.

How these attributes and methods work.

Example: use the mouse to rotate the scene

The most classic way to present 3D scenes is to allow users to control the scenes with the mouse, as shown in the following example:

Movie: Click here to watch as: triaxe2.as

Here I will explain the sample code. First, we define some parameters that will be used later.

1. Private var view: view3d; private var swfstage: stage; private var cover: cover;

2. // hovercam controls. Private var camera: hovercamera3d;

3. Private var lastmousex: Number; private var lastmousey: number;

4. Private var lastpanangle: Number; private var lasttiltangle: number;

5. Private var move: Boolean = false;

We add a rotating camera and deliver it for use with the viewport, which is more than the default camera Root Using the viewport.

1. Camera = new hovercamera3d ({ZOOM: 2, focus: 100, distance: 250 });

2. view = new view3d ({Camera: Camera, X: 250, Y: 200 });

Then set the pan and tilt values so that their initial values are different from the default values, so that the camera has an angle at the beginning.

1.camera.tar getpanangle = camera. panangle = 45;

2.camera.tar gettiltangle = camera. tiltangle = 20; camera. mintiltangle =-90;

Note that we need to set the initial angle and the unspecified angle at the same time, otherwise the camera will go to the unspecified position at the beginning. Also note that we set 'mintiltang'

-90. This allows us to rotate to the bottom of the scenario, which is not allowed by default. Next, we will add some 3D objects in the scene and render the scene frame by frame.

1. addeventlistener (event. enter_frame, onenterframe );

Add two listeners to listen on the mouse for interaction.

1. This. Stage. addeventlistener (mouseevent. mouse_down, mousedown );

2. This. Stage. addeventlistener (mouseevent. mouse_up, mouseup );

When you press mouse, we set the current Pan and tilt values to the mouse position. We use it to calculate the camera's moving speed.

1. Private function mousedown (Event: mouseevent): void {

2. lastpanangle = camera.tar getpanangle; lasttiltangle = camera.tar gettiltangle;

3. lastmousex = stage. mousex; lastmousey = stage. Mousey; move = true ;}

Note that I have not set the move value (Boolean value) at the same time. This parameter indicates the mouse press and bounce status. We need to reset it after it pops up.

1. Private function mouseup (Event: mouseevent): void {move = false ;}

Recently, we also need a "magic key" -- frame-by-frame processing function:

1. Private function onenterframe (E: Event): void {// render the viewport

2. var cameraspeed: Number = 0.3; // The speed is approximately the same as that of mouse.

3. If (MOVE ){

4. camera.tar getpanangle = cameraspeed * (stage. mousex-lastmousex) + lastpanangle;

5. camera.tar gettiltangle = cameraspeed * (stage. mousey-lastmousey) + lasttiltangle;

6.} camera. Hover (); view. Render ();}

This function calculates the target values of Pan and tilt. In the mousedown function, we store the previous mouse position.

Lastmousex/lastmousey. Subtract the current mouse position value to get the mouse movement, multiplied by a speed constant (cameraspeed)

Then, the current PAN/Tilt value (lastpanangle/lasttiltangle) is added. The hover () and render () are called to update the view. If you want to reverse

In this process, you only need to reverse the parameters:

1.camera.tar getpanangle = lastpanangle-cameraspeed * (stage. mousex-lastmousex );

2.camera.tar gettiltangle = lasttiltangle-cameraspeed * (stage. mousey-lastmousey );

It's just one of the many ways the camera rotates around 3D objects. You can make an improvement. How does one add a slider to control the scaling (camera. Zoom? After this guide, I will go back and discuss the camera rotation problem. So I will continue to read more about it.