Basic elements of away3d 5-3d (1)

Address: http://www.flashmagazine.com/Tutorials/detail/away3d_basics_5_-_primitives_part_1/

In most 3D software, basic 3D elements constitute the foundation of the 3D world. Away3d comes with 17 basic 3D elements and some other help items. This tutorial explains how to use these basic 3D elements to achieve cool effects, such as music waveforms and CMYK color separation. This tutorial also introduces two code writing methods supported by away3d.

First, do not underestimate these basic 3D elements. They may be simple, but they are very useful! For example, a simple sphere can be used to create a panorama. Of course, you can also use the basic 3D element skybox to create a cube panorama.

In the previous two tutorials on basic 3D elements, we focused on common 3D elements. In the last section of Section 3 about 3D basic elements, we will introduce unconventional 3D basic elements, such as turtles. Are you talking about turtles? Yeah, there are cows in other 3D engines. away3d contains the basic 3D element of turtles.

Prerequisites

This tutorial is based on other tutorials. If you are a flash 3D cainiao, you may want to take a look at these tutorials first. For example, for some source files, click the attached as file to view how they work. A cover. As file is used in all these examples. This file makes flash films used in the tutorial not work at the same time, or it will drag your computer down. If you are not sure how to use these examples, refer to this tutorial.

"Texture" is used in some examples in this tutorial ". For details about textures and materials, refer to the following tutorial. If you want the code to work in Flash CS3, read this tutorial.

The triangle (triangle)

Triangles are the cornerstone of 3D models. Although a single triangle is of little use, multiple triangles can be combined together to generate any model. Fortunately, away3d allows us to import complex models from 3D software, so we don't have to use a triangle to piece together a complex model. Triangles have other purposes. A triangle is the smallest unit in a 3D basic element. It is often used as a resource-intensive object like a particle effect.

To create a triangle, you must set a \ B \ c three points in the 3D space. Each vertex is a vertex (point located by x/y/z), as follows:

1. var TRI: triangle = New Triangle (); tri. A = new vertex (0,200, 0 );

2. Tri. B = new vertex (100,0, 0); tri. c = new vertex (-100,0, 0); tri. bothsides = true;

3. View. Scene. addchild (TRI );

The following is a complete triangle example:

Movie: Click to view as: basic08_triangle.as

Note: we set the "bothsides" attribute of the triangle to true. If this is not done, we can only see one side of the triangle.

The plane (plane)

A plane is a rectangle without thickness. By default, a plane consists of two triangles. However, you can increase the number of triangles as needed. The plane is the second basic lightweight 3D element. However, it is the best choice to complete some tasks. When you create a TV wall, use a plane and place the film material on it. The plane is also very useful for setting off the ground in 3D scenarios. Let's look at this example.

As mentioned above, away3d supports two code writing methods. When creating an object, you can pass the attribute value to the constructor or set the attribute after the object is created. Let's take a look at the two possible methods.

The first method can pass all the parameters of the class in the class constructor. The following code creates a black line white box plane.

1. var myplane: plane = new plane ({material: "white # Black", rotationx:-90 });

2. View. Scene. addchild (myplane );

This writing method is very simple. You can easily specify the color of the box. Of course, you can declare each attribute separately:

1. var mat: wirecolormaterial = new wirecolormaterial (); mat. Color = 0xff0000;

2. Mat. wirecolor = 0x000000; var myplane: plane = new plane (); myplane. Material = MAT;

3. myplane. rotationx =-90; view. Scene. addchild (myplane );

This method is cumbersome, but many developers prefer to use it for code readability. It is up to you to decide how to use it. Many developers have strong personal preferences for writing code. away3d supports both methods to help everyone.

You may have noticed that in this example, we have converted the plane 90 degrees along the X axis, because the plane has no thickness and can only be seen when the plane is turned towards us.

You can adjust the plane complexity by setting the segment parameter:

1. myplane. segmentsw = 4; myplane. segmentsh = 6;

This sentence can increase the triangle density in the plane, which can compensate for the distortion caused by too few triangles. Click the button to experience this problem:

Movie: Click to view as: textures.

Next let's take a look at the more representative code using a plane. Here you will see a set of CS3 icons designed by Adobe's John nack. Click and drag to see the color separation. Then align the outer frame to re-overlap the image.

Movie: Click to view as: basic08_plane.as

Separate the four transparent PNG images to simulate the CMYK separation effect. This is implemented in this way: Let hovercam3d rotate around five planes. c \ m \ Y \ K and a white plane are like five sheets of paper combined by blendmode. multiply.

The cube)

The cube has a height, width, and thickness. You can set different materials for each surface.

Movie: Click to view as: basic08_cube.as

There are two ways to write code:

1. cube = new cube ({width: 200, height: 100, depth: 300 });

You can also write it more readable:

1. var Cube: Cube = new cube (); cube. width = 200; cube. Height = 100; cube. Depth = 300;

That method is up to you. Use the cubematerials attribute to set the materials of the six faces (top, bottom, left, right, front and back), as shown in the following code:

1. cube. cubematerials. Left = new colormaterial (0 xffffff, {ALPHA:. 3 });

Each 3D object can be moved or rotated along the x/y/z axis as follows:

1. cube. x = 200; cube. rotationy = 45;

For more details about how to operate 3D objects, see this tutorial. Now we use cubes in the project. The following is an example of a music waveform display bar. The height, color, and filter of the waveform bar change according to the waveform changes.

Movie: Click to view as: basic08_cube_music.as

The blue cube describes the right channel, while the red cube describes the left channel. The spectrum of each sound channel is divided into eight parts, and each cube represents a part of the Sound Spectrum. The maximum value of each part is in an array and gradient is set. Each time a new maximum value is detected, we apply a blur filter and add dimensions and colors. View the source code analysis details.