AS3-建立在3D空间中随意加入影片箱路径路径、随意、影片、空间

2023-09-08 10:43:48 作者:永不落的梦想

我想通过填充一个查找表三维点(矢量3D的http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/geom/Vector3D.html)我会再访问以后。

I'm trying to optimize a 3d demo by populating a lookup table with 3d points(Vector 3D http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/geom/Vector3D.html) which I will then access later on.

这些3D点将定义在三维空间中的随机和加入影片箱路径

These 3D points will define a random and loopable path in 3D space.

有谁知道实现这一目标的一种方式?

Does anyone know a way of achieving this?

我想修改Greensock贝塞尔吐温创造三维空间中的贝塞尔,然后不知怎么抓得到的补间的XYZ值。

I was thinking modifying the Greensock Bezier tween to create a bezier in 3d space, and then somehow grabbing the xyz values of the resulting tween.

推荐答案

好吧,你需要做两件事情:

Ok, you'll need to do two things:

从创建几个片段一环3D三次Bezier曲线

Create a looped 3D cubic bezier curve from several fragments

创建自定义补间功能,将你的对象作为一个目标,你的贝塞尔环路的路径和您的总循环时间。

Create a custom tween function that will take your object as a target, your bezier loop as a path and your total loop time.

您三次Bezier曲线的一个片段,将始终以4个顶点,一个完整的循环必须包含至少2段,所以你需要随机产生至少7个顶点。顶点的数目总是会 3 * NumberOfSegments + 1 ,但我们将只存储 3 * NumberOfSegments 作为第一顶点将等于最后一个

One fragment of your cubic bezier curve will always take 4 vertices, a full loop must contain at least 2 segments, so you will need to randomly create at least 7 vertices. The number of vertices will always be 3 * NumberOfSegments + 1, but we will store just 3 * NumberOfSegments as the first vertex will be equal to the last one

最简单的情况下(2段,6个顶点):

Most simple case (2 segments, 6 vertices):

...
private function generateRandomPoints():Vector<Vector3D>
{
    var resultingVector:Vector<Vector3D> = new Vector<Vector3D>();
    for(var i:int = 0; i < 6; i++)
    {
        var x:Number = Math.random() * 10;
        var y:Number = Math.random() * 10;
        var z:Number = Math.random() * 10;
        var currentPoint3D:Vector3D = new Vector3D(x, y, z);
        resultingVector.push(currentPoint3D);
    }
    return resultingVector;
}
...

现在,当我们有我们的道路上,我们可以分析它得到这个渐变的效果。您可以调用这个函数,每次你需要新坐标(但你需要存储的初始时间的地方),或创建一个中间人的对象将处理一切为您服务。我会告诉最基本的例子 - 自治功能:

Now when we have our path, we can parse it to get this tweening effect. You can either call this function every time you'll need new coordinates (but you'll need to store your initial time somewhere), or create a tweener object that will handle everything for you. I'll show the most basic example - autonomous function:

public static function getNextCoordinates(loopStartTime:int, totalLoopTime:int, path:Vector.<Vector3D>):Vector3D
    {
        var resultingPoint:Vector3D = new Vector3D();
        var passedTime:int = getTimer() - loopStartTime;

        //Total passed ratio
        var passedRatio:Number = passedTime / totalLoopTime;
        var totalSegments:int = path.length / 3;

        var totalTimePerSegment:Number = totalLoopTime / totalSegments;

        //So it can loop forever
        while (passedRatio > 1)
        {
            passedRatio -= 1;
        }
        //Let's find our current bezier curve segment number
        var currentSegment:int = Math.floor( passedRatio * totalSegments);
        var currentSegmentRatio:Number = (passedTime - currentSegment * totalTimePerSegment) / totalTimePerSegment;
        //It can be optimized here
        while (currentSegmentRatio > 1)
        {
            currentSegmentRatio -= 1;
        }

        var startingIndex:int = currentSegment * 3;
        //our four path vertices
        var point0:Vector3D = path[startingIndex];
        var point1:Vector3D = path[startingIndex + 1];
        var point2:Vector3D = path[startingIndex + 2];

        //if it's a last segment, we need to "connect" to the first vertex
        if (startingIndex + 3 >= path.length)
        {
            var point3:Vector3D = path[0];
        }
        else
        {
            point3 = path[startingIndex + 3];
        }
        //At last, we find our coordinates
        var tempRatio:Number = 1 - currentSegmentRatio;
        resultingPoint.x = tempRatio * tempRatio * tempRatio * point0.x + 3 * tempRatio * tempRatio * currentSegmentRatio * point1.x + 3 * tempRatio * currentSegmentRatio * currentSegmentRatio * point2.x + currentSegmentRatio * currentSegmentRatio * currentSegmentRatio * point3.x;
        resultingPoint.y = tempRatio * tempRatio * tempRatio * point0.y + 3 * tempRatio * tempRatio * currentSegmentRatio * point1.y + 3 * tempRatio * currentSegmentRatio * currentSegmentRatio * point2.y + currentSegmentRatio * currentSegmentRatio * currentSegmentRatio * point3.y;
        resultingPoint.z = tempRatio * tempRatio * tempRatio * point0.z + 3 * tempRatio * tempRatio * currentSegmentRatio * point1.z + 3 * tempRatio * currentSegmentRatio * currentSegmentRatio * point2.z + currentSegmentRatio * currentSegmentRatio * currentSegmentRatio * point3.z;

        return resultingPoint;
    }

您可以扩展这个功能是补间对象的一部分。 我已经在二维空间中进行了测试,并沿随机多段贝塞尔曲线,它完美地循环精灵的移动

You can extend this function to be a part of the tweening object. I've tested it in 2D space and it perfectly loops sprite's movement along a random multi-segment bezier curve

干杯!

 
精彩推荐
图片推荐