Flash与3D编程探秘（三）- 摄像机（Camera）

3D场景与摄像机应用

最新推荐文章于 2023-09-17 12:22:35 发布

转载最新推荐文章于 2023-09-17 12:22:35 发布 · 882 阅读

文章标签：

#flash #编程 #keyboard #up #游戏 #工作

as3D 专栏收录该内容

9 篇文章

订阅专栏

本文详细介绍了在3D场景中使用摄像机的概念和方法，包括如何通过移动摄像机和物体来实现3D视觉效果，以及如何在简单的赛车游戏中应用这一原理。通过实例代码，演示了如何设置原点、焦距、舞台，以及定义摄像机和物体的属性，从而在3D空间中实现动态视角转换和物体缩放。此外，文章还指导读者如何通过键盘控制赛车移动和加速，提供了完整的代码实现和功能解释。

在前面的两节中，你，作为观察者，所在空间的位置是一成不变的，物体在来回移动，让你产生了3D错觉。但是随着对3D的深入，会发现只让物体运动并不足够。当讨论3D空间的时候，摄像机理论上代表3D中的一个点，我们从这个点去观看这个空间。为什么要使用摄像机呢？因为观察者希望能够透过一个镜头看到其他所有舞台上的物体，对于他来说，它只需转动眼球就可以看到大千世界的另一面。（其实程序里摄像机只不过是一组数值来表示你的摄像机在3D空间的参数，比如位置）想象一下你在广阔的撒哈拉沙漠里越野，又或者你的朋友小P走向在你的身旁。你的朋友小P慢慢走向你并最终到达离你很近的位置，几下来你们可以交谈了。但是，如果小P站在原地不动，而是你走向他的身旁，那么对于地面来说，小P是不动的，而你（摄像机）是移动的。在这里你的眼睛就充当了摄像机。看看下面的两个动画文件，再对比一下。左边是小P走向你，右边是你走向小P。

移动物体和移动摄像机

你会发现对于你的眼睛来说，你可以并不走动，只要把小P和周围一切的物体都移动到你的面前，也会达到同样的效果。但是哪一种可行呢？下面的两个动画说明了如何在3D空间中使用摄像机。动画效果如下，左面的是移动小P，右边是移动摄像机。

对比移动小P和移动你的摄像机

制作步骤：

1. 和以前一样，定义原点，设置焦距，创建舞台。

// origin is the center of the view point in 3d space
// everything scale around this point
// these lines of code will shift 3d space origin to the center
var origin = new Object();
origin.x = stage.stageWidth / 2 ;
origin.y = stage.stageHeight / 2 - 70 ;

// focal length of viewer's camera
var focal_length = 400 ;

2. 下面定义一个摄像机物体，它具有3D空间的x，y，z，并且给它一个移动方向和初始的在z方向的移动速度。

// setup camera
var camera = new Object();
camera.x = 0 ;
camera.y = 0 ;
camera.z = 0 ;
camera.direction = 1 ;
camera.speed_z = 6 ;

3. 创建一个小球在舞台上。

// create a sphere
// go to library, right click on Sphere, choose linkage
// and check Export for Actionscript
for (var i = 0 ; i < 1 ; i ++ )
{
    var sphere = new Sphere();
    sphere.x_3d = - 30 ;
    sphere.y_3d = 80 ;
    sphere.z_3d = 600 ;

     // add all the spherees to the scene object
    scene.addChild(sphere);
}

4. 接下来开始写运动的循环函数。每一次执行函数一开始我们要把摄像机的位置在z方向移动一定的量。如果摄像机移动的离小球很近了的话，让摄像机向反方向移动。

// move the spherees back and forth
function run(e:Event)
{
     // here we offset the camera position by its moving speed times the direction
    camera.z += camera.speed_z * camera.direction;

     if (camera.z > 600 )                    // if the camera is too close to the ball
    {
        camera.z = 600 ;
        camera.direction = - 1 ;           // move camera backward
    }
     else if (camera.z < 0 )                // if the camera is too close to the screen
    {
        camera.z = 0 ;
        camera.direction = 1 ;
    }
     // loop through all the objects on the scene
     for (var i = 0 ; i < scene.numChildren; i ++ )
    {
         // calculate the scale what the object should be
        var scale = focal_length / (focal_length + scene.getChildAt(i).z_3d - camera.z);
        scene.getChildAt(i).x = (scene.getChildAt(i).x_3d - camera.x) * scale;
        scene.getChildAt(i).y = (scene.getChildAt(i).y_3d - camera.x) * scale;
         // properly scale the object to look 3d
        scene.getChildAt(i).scaleX = scene.getChildAt(i).scaleY = scale;
    }
}

5. 计算出小球离摄像机的x距离，y距离和z距离，然后得出小球的缩放比率。最后把小球缩放并移动到相应的位置。That's it! 不要忘记添加循环函数执行事件。

this .addEventListener(Event.ENTER_FRAME, run);

注意:

你需要考虑让摄像机的z的指不能小于-1乘焦距，如果z小于这个值，那么公式scale = focal_length/(focal_length+z)得出的缩放比率会是负数，那么物体就会开始向后运动。

一个简单的赛车小游戏制作

下面运用摄像机的概念来制作一个简单的赛车小游戏，游戏里你可以使用WASD键控制赛车，COOL！那么开始。

简单赛车游戏，键盘WASD控制

1. 定义原点，设置焦距，创建舞台。

// origin is the center of the view point in 3d space
// everything scale around this point
// these lines of code will shift 3d space origin to the center
var origin = new Object();
origin.x = stage.stageWidth / 2 ;
origin.y = stage.stageHeight / 2 ;

// now create a scene object to hold all the spheres
var scene = new Sprite();
this .addChild(scene);
scene.x = origin.x;
scene.y = origin.y;

// focal length of viewer's camera
var focal_length = 400 ;

2. 下面定义一个摄像机物体，它具有3D空间的x，y，z，并且给它初始的在z方向的移动速度。

// setup camera
var camera = new Object();
camera.x = 0 ;
camera.y = - 40 ; // make the camera off the ground a little bit
camera.z = 0 ;
camera.speed_z = 0 ; // your driving speed

3. 创建两个个场景，一个用来盛放所有的赛车，另外一个盛放放有的路边轮胎。然后把它们添加到舞台上。

var tires = new Sprite();              // this sprite holds all the tires
var cars = new Sprite();                // this sprite holds all the cars
var txt_speed = new TextField();     // your dashboard
txt_speed.x = 20 ;
txt_speed.y = 20 ;
// now add them to the screen
scene.addChild(tires);
scene.addChild(cars);
this .addChild(txt_speed);

4. 定义一些赛车的运动状态的变量。

// now here are the variables determine the car's moving state
var move_left = false ;
var move_right = false ;
var speed_up = false ;
var brake = false ;

5. 那么接下来创建40个轮胎并且把前20个放在路的左边，后20个放在路的右边，给赛道画出一个轮廓。

// now create 40 tires, 20 on the left and 10 on the right
for (var i = 0 ; i < 40 ; i ++ )
{
    var tire = new Tire();
     if (i < 20 )
    {
        tire.x_3d = - 400 ;
        tire.z_3d = i * 500 ;
    }
     else
    {
        tire.x_3d = 400 ;
        tire.z_3d = (i - 20 ) * 500 ;
    }
    tire.y_3d = 40 ;
    tires.addChild(tire);
}

6. 创建8个赛车，给它们相应的xyz位置（注意要赛车放在赛道上，设置它们的x范围在-230到230之间）不同的起始z位置和速度，最后添加到舞台上。

// create 8 opponent cars
for (var j = 0 ; j < 8 ; j ++ )
{
    var car = new Car();
    car.x_3d = Math.random() * ( - 230 - 230 ) + 230 ;         // give them random x position
    car.y_3d = - 30 ;
    car.z_3d = - 800 + ( 8 - j) * 400 ;                              // give them speed
    car.speed_z = ( 8 - j) * 15 ;
    cars.addChild(car);
}

7. 接下来要写一个函数，每一次执行这个函数，首先把赛车在z方向移动一定量（赛车相对地面是运动的），然后计算比率，把赛车移动到相应的位置并且缩放。我把它命名updateCar，还是运用摄像机的理移动的基本知识，在每一个摄像机移动后，分别计算出摄像机与小车的xyz距离，然后把小车缩放和移动。注意小车如果离摄像机太远或者被甩到摄像机的后面的话，让它不在屏幕上显示。

// for each of the running cycle, these two functions are called
function updateCar(car)
{
    var x = car.x_3d - camera.x;             // calculate the x distance between your camera and car
    var y = car.y_3d - camera.y;             // same we can y distance
    var z = car.z_3d - camera.z;            // and z distance

     if (z < 0 || z > 10000 )                   // if car is too far or left behind
        car.visible = false ;                  // then do not draw it
     else
        car.visible = true ;

    car.z_3d += car.speed_z;             // move the car
    z = car.z_3d - camera.z;                 // recaculate the z distance

    var scale = focal_length / (focal_length + z);     // caculate the scale what the car should be
    car.x = x * scale;
    car.y = y * scale;
    car.scaleX = car.scaleY = scale;     // scale it to a proper size
}

8. 轮胎的更新函数updateTire和赛车的更新函数类似，不同的是，轮胎相对地面是静止的，所以这里不改变它们的xyz值。如果轮胎已经到了摄像机后面（轮胎的z小于摄像机的z），把这个轮胎重新定位到摄像机前非常远的地方。

function updateTire(tire)
{
    var x = tire.x_3d - camera.x;
    var y = tire.y_3d - camera.y;
    var z = tire.z_3d - camera.z;

     if (z < 0 )
    {
        tire.z_3d += 10000 ;                // if the tire is left behind, then offset it
        z = tire.z_3d - camera.z;
    }

    var scale = focal_length / (focal_length + z);
    tire.x = x * scale;
    tire.y = y * scale;
    tire.scaleX = tire.scaleY = scale;
}

9. 下一步，run函数执行首先把摄像头沿z方向移动，然后调用前面写的updateCar和updateTire函数，刷新所有赛车和轮胎的位置和大小。

// here is the function loop
function run(e:Event)
{
    camera.z += camera.speed_z;                             // first move your camera

     for (var i = 0 ; i < cars.numChildren; i ++ )              // update all the cars
    {
        updateCar(cars.getChildAt(i));
    }
     for (var j = 0 ; j < tires.numChildren; j ++ )             // and the tires on the side
    {
        updateTire(tires.getChildAt(j));
    }

    txt_speed.text = int (camera.speed_z) + " MPH " ;   // show your speed
    txt_speed.setTextFormat( new TextFormat( " Verdana " , 16 , 0x444444 , true ));
}

10. 下面是键盘响应事件函数，我写了一些的注释在程序里，不过我相信你应该很快就能看懂，就不打算详细解说了。实现的功能是当按下左键你的赛车左移；按下上键，赛车开始加速（当然极速是需要你来定义的了）等等。

// keyboard functions
function key_down(e:KeyboardEvent): void
{
     if (e.keyCode == 37 )             // left key
        move_left = true ;
     if (e.keyCode == 39 )             // right key
        move_right = true ;
     if (e.keyCode == 38 )             // up key
        speed_up = true ;
     if (e.keyCode == 40 )             // down key
        brake = true ;
}
function key_up(e:KeyboardEvent): void
{
     if (e.keyCode == 37 )
        move_left = false ;
     if (e.keyCode == 39 )
        move_right = false ;
     if (e.keyCode == 38 )
        speed_up = false ;
     if (e.keyCode == 40 )
        brake = false ;
}
function keyboard_response(e:Event): void
{
     if (move_left)
    {
         // move the camera to the left, remember here the fast you go, the fast your steer
        camera.x -= camera.speed_z / 6 ;
         if (camera.x < - 300 ) camera.x = - 300 ;   // limit your car so it won't go off the road
    }
     if (move_right)
    {
        camera.x += camera.speed_z / 6 ;
         if (camera.x > 300 ) camera.x = 300 ;         // limit your car so it won't go off the road
    }
     if (speed_up)
    {
        camera.speed_z += . 2 ;                   // accelerate
         // limit the car speed in a range
         if (camera.speed_z < 0 ) camera.speed_z = 0 ;
         else if (camera.speed_z > 120 ) camera.speed_z = 120 ;
    }
     else
    {
        camera.speed_z *= . 99 ;                      // if you don't hit the throttle, it will stop soon
    }
     if (brake)
    {
        camera.speed_z -= . 3 ;                       // slow down
         if (camera.speed_z < 0 ) camera.speed_z = 0 ;
    }
}

11. 最后，添加循环函数执行和键盘响应事件。如果没问题的话，现在发布运行。成功了！

// now initialize all the necessary event listeners and we are done
this .addEventListener(Event.ENTER_FRAME, run);
this .addEventListener(Event.ENTER_FRAME, keyboard_response);
stage.addEventListener(KeyboardEvent.KEY_DOWN, key_down);
stage.addEventListener(KeyboardEvent.KEY_UP, key_up);
stage.stageFocusRect = false ;
stage.focus = scene;