zoukankan      html  css  js  c++  java
  • as3摄像机旋转和移动

    上一篇讨论了关于旋转摄像机的一些基础知识,在这篇文章中我将介绍如何在程序中使用这些知识定点旋转摄像机,以及把移动和旋转摄像机结合在一起。当 只运用旋转摄像机时,在屏幕上看到物体围绕着摄像机旋转,动画并不是那么的”3D”,不过这个是必经之路,等你完全的明白了旋转这个概念后,再添加上摄像 机在3D空间移动,那样你就不会觉得乏味了。首先来看一个定点旋转摄像机的例子当作热身。这个例子,还是使用我们的小P,不过是很多的小P,这样使的场景 看起来更加的有层次感。运行程序(效果如下),所有的物体都在围绕摄像机旋转,我想你会有摄像机在不停的旋转的错觉(或者没有…)。

    定点旋转摄像机

    动画制作步骤:

    1. 一开始还是一些老步骤,设定原点,建立一个舞台,还有定义摄像机,这些都是前几篇所讨论过的,就不再过多解释了。

     

    // same as usual 

    var origin =new Object();

    origin.x = stage.stageWidth/2;
    origin.y = stage.stageHeight/2;
    origin.z = 0;
    var scene = new Sprite();
    scene.x = origin.x;
    scene.y = origin.y;
    this.addChild(scene);
    var camera = new Object();
    camera.x = 0;
    camera.y = 0;
    camera.z = 0;
    camera.panning = 0;

    var focal_length = 300;

     

    2. 下面定义一些常量,比如物体的总数量,PI和物体z间距。

    // constants
    var MAX_OBJ = 100;
    var PI = 3.1415926535897932384626433832795;
    var DISTANCE_Z = 20; // the distance to your camera

    3. 下面是初始化所有的物体,运用随机数产生小P所在的角度(对于摄像机),递增小P所在点到摄像机的距离(3D空间的),使用三角函数就可以得到小P的x和z,同样使用随机数产生它的y,最后把它添加到舞台上。

    // now create lots of balls around your camera
    for (var i = 0; i < MAX_OBJ; i++)
    {
    var ball = new Sphere();
    ball.angle = Math.random()*(0-PI*2) + PI*2; // this is the rotate angle on the xz plane
    ball.dist_center = 140 + (MAX_OBJ-i)* DISTANCE; // the distance to your camera
    ball.x_3d = Math.cos(ball.angle) * ball.dist_center; // then we use trig to get x
    ball.z_3d = Math.sin(ball.angle) * ball.dist_center; // and z
    ball.y_3d = Math.random()*(-240-240) + 240; // now put the ball at random y
    scene.addChild(ball); // add the ball to the collection
    }

    4. 对于每一个物体,在摄像机转动角度时刷新它的大小和位置。于是下一步写一个函数来达到目的,首先要确定小P相对于摄像机的旋转角度。然后根据这个角度和摄像机和小P之间的垂直距离,算出它到摄像机的x,z和y的距离。最后,还是运用之前学过的算法,缩放和移动物体。

    // update ball size and position
    function update(obj)
    {
    // get the angle relative to your camera panning angle
    var angle = obj.angle - camera.panning;
    var x_pos = Math.cos(angle)*obj.dist_center - camera.x; // use trig calculate the x
    var z_pos = Math.sin(angle)*obj.dist_center - camera.z; // and z
    var y_pos = obj.y_3d - camera.y; // calculate the relative y

    if (z_pos > 0) // if the ball isin front of the camera
    {
    if (!obj.visible)
    obj.visible = true; // make the ball visible anyway

    var scale = focal_length/(focal_length+z_pos); // cal the scale of the ball
    obj.x = x_pos*scale; // calcualte the x position in a camera view
    obj.y = y_pos*scale; // and y position
    obj.scaleX = obj.scaleY = scale; // scale the ball to a proper state
    }
    else
    {
    obj.visible = false;
    }
    }

    5. 写一个循环函数,在每一次执行时,递增摄像机的角度,并且刷新舞台上的所有的物体。

    function run(e:Event)
    {
    camera.panning += 0.01; // increase the panning angle

    if (camera.panning > 2*PI)
    camera.panning -= 2*PI;
    if (camera.panning < -1*2*PI)
    camera.panning += 2*PI;

    for (var i = 0; i < scene.numChildren; i++) // update all the balls on the screen
    {
    update(scene.getChildAt(i));
    }
    }
    // add loop event listener

    this.addEventListener(Event.ENTER_FRAME, run);

    注意:

    这里提到的旋转,都是在保持y不变的情况下,横向旋转摄像机,换句话说,让摄像机绕着y轴旋转,当然同理也可以写出摄像机围绕着x轴旋转的函数。不过如何同时进行上述两种旋转,我将在后面的文章里进行介绍。

    移动和旋转的组合
    现在你已经知道如何横向旋转摄像机,同时前几篇文章中也已经介绍了如何移动摄像机,如果把这两个操作结合在一起,那一定很棒。我想你应该觉得不会很 困难,因为前面已经把两个分开操作学会了,下面所要做的只是把这两种操作组合在一起。来看一个动画,其中发灰的摄像机是运动前的位置,另外一个是向后(沿 摄像机镜头的反方向)移动后位置(当摄像机镜头垂直向上看得时候移动得到),从动画中可以看到,对于摄像机镜头来说,景物的位置是不一样的。

  • 相关阅读:
    maven+spark2.0.0最大连通分量
    Eclipse+maven+scala2.11.8+spark2.0.0的环境部署
    杀死mapreduce
    filter-自己的理解
    JS变量声明提升
    js==运算符强制转换规则
    html 文字间距
    如你所见,我开始用微博
    vue数据模拟
    vue项目目录介绍
  • 原文地址:https://www.cnblogs.com/bluesea-flash/p/3319101.html
Copyright © 2011-2022 走看看