error on 'new BABYLON.AnimationGroup()'

[dbawel]

Hello,

I copied the following playground into a scene, and receive a console error.

Playground scene:

https://www.babylonjs-playground.com/#92EYG#21

 

Console error:

TypeError: BABYLON.AnimationGroup is not a constructor

 

Am I using the wrong version of Babylon?

DB

 

[dbawel]

Obviously a version issue - looking for version 3.2.0-alpha. 

DB

[dbawel]

OK - using the new alpha 4 version, and the scene still won't load. The only console error I get is:

Source map error: request failed with status 404
Resource URL: http://qedsoft.com/SBSW/pathTest/js/babylon.max.js
Source Map URL: babylon.environmentHelper.js.map

Is there an error in my code below?

Quote

 

var createScene = function() {
    var canvas = document.getElementById("renderCanvas");
    var engine = new BABYLON.Engine(canvas);
    var scene = new BABYLON.Scene(engine);
    scene.clearColor = new BABYLON.Color3( .5, .5, .5);
    // camera
    var camera = new BABYLON.ArcRotateCamera("camera1",  0, 0, 0, new BABYLON.Vector3(0, 0, -0), scene);
    camera.setPosition(new BABYLON.Vector3(0, 0, -70));
    camera.attachControl(canvas, true);

     var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
    
    var path = [new BABYLON.Vector3(-10, 10, 20),
            new BABYLON.Vector3(10, 0, 10),
            new BABYLON.Vector3(30, 16, 30),
            new BABYLON.Vector3(45, -21, 45),
            new BABYLON.Vector3(35, 30, 0)
            ]; //[{x:0, y:0, z: 0}, {x:10, y:00, z: 10}, {x:20, y:20, z: 20}, {x:30, y:30, z: 30}, {x:40, y:0, z: 35}];
        
        var catmullRom = BABYLON.Curve3.CreateCatmullRomSpline(
            path,
            20
        );

        var catmullRomSpline = BABYLON.Mesh.CreateLines("catmullRom", catmullRom.getPoints(), scene);
        catmullRomSpline.color=new BABYLON.Color3(1,0,0);
    
    // Create Path3D from array of points
    var path3d = new BABYLON.Path3D(catmullRom.getPoints());
    var curve = path3d.getCurve(); // create the curve
    var tangents = path3d.getTangents();  //array of tangents to the curve
    var normals = path3d.getNormals(); //array of normals to the curve
    var binormals = path3d.getBinormals(); //array of binormals to curve
    
    //Create and draw a plane in xy plane to trace the curve at (0, 0, 0)
    var box = BABYLON.MeshBuilder.CreateBox("box", {}, scene);
    var norm = new BABYLON.Vector3(0, 0, 1); //normal to plane
    var pos_of_norm = new BABYLON.Vector3(0, 0, 0);  // position of normal (for display)

    //Draw the normal line in red
    var normLine = BABYLON.Mesh.CreateLines("normLine", [pos_of_norm, pos_of_norm.add(norm).scale(2)], scene);    
    normLine.color = BABYLON.Color3.Red();
    
    //Set box as parent of normal line so they move and turn as one
    normLine.parent = box;

    var animationPosition = new BABYLON.Animation("animPos", "position", 10, BABYLON.Animation.ANIMATIONTYPE_VECTOR3, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
    var animationRotation = new BABYLON.Animation("animRot", "rotation", 10, BABYLON.Animation.ANIMATIONTYPE_VECTOR3, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);    
    
    var keysPosition = []; 
    var keysRotation = [];

    for(p = 0; p < catmullRom.getPoints().length; p++) {
        keysPosition.push({
            frame: p,
            value: catmullRom.getPoints()[p]
        });

        keysRotation.push({
            frame: p,
            value: BABYLON.Vector3.RotationFromAxis(normals[p], binormals[p], tangents[p])
        });
    }

    animationPosition.setKeys(keysPosition);
    animationRotation.setKeys(keysRotation);

    // Create the animation group
    var animationGroup = new BABYLON.AnimationGroup("Group");
    animationGroup.addTargetedAnimation(animationPosition, box);
    animationGroup.addTargetedAnimation(animationRotation, box);
    
    animationGroup.play(true);

    
    return scene;
} 

createScene();

 

 

[JCPalmer]

I get a little cube following a red line.  No error.  Try a different browser / clear cache.  Am using Firefox.  It is loading alpha 3.

[dbawel]

@JCPalmer-

I'm using FireFox as well, and always clear cache before running. Could you try the following link?

http://qedsoft.com/SBSW/pathTest/index.html

Thanks,

DB

[GameMonetize]

Worked for me but no rendering as there is no call to runRenderLoop (But code works)

[dbawel]

@Deltakosh-

Again, I'm trying to work too fast, and didn't even run the render loop. Any idea when babylon.js v3.2 will be ready? How stable is it right now?

As always, thanks again for taking time to look at my dumb mistakes. Otherwise, everything is going well at Sony - except I have to work in ES6 - which I believe is a bit early at this time. Let's catch up soon.

DB

[Dad72]

Babylon 3.2 was started not too long ago, so it is not stable yet.

ES6 is a good choice, it is stable and use by any modern browser.

[GameMonetize]

We are in early alpha stage for 3.2 so you can use it but you may expect some changes along the road

[dbawel]

@Dad72- I find ES6 simple to integrate, however, it all depends on the features as to compatibility with all browsers/server packages. We still need to compile to ES5 to assure QA currently - so use with caution.

@Deltakosh - Do you have an estimated release date for version 3.2 - as we're in production with it now, and expect to be using it in a product release (South by Southwest trade show content) in March. As the features I'm currently using appear to be working without error, I expect it should be stable for the show. But if you have any advise on this, I'd love to hear it. Also in reading through the post:

https://github.com/BabylonJS/Babylon.js/issues/3411

Am I able to detect when the mesh reaches the last frame of the path animation? This will really simplify my code if it is a feature which is available.

 

Also for anyone - how might I assign which axis of a mesh (playground scene above) to follow the normals of a curve/path? I haven't been able to change this in the playground scene as of yet.

https://www.babylonjs-playground.com/#92EYG#22

Thanks,

DB

[GameMonetize]

3.2 is due by early May. But stable versions should be there around March

 

Regarding AnimationGroup, they offer an OnAnimationEnd observable that will do the trick for you

 

[dbawel]

Hi @Deltakosh - I'll keep using 3.2 as it's been stable so far and I'll need to use OnAnimationEnd and the AnimationGroup function. I saw OnAnimationStart and OnAnimationEnd mentioned, but it wasn't clear in the post if it had been implemented. This is an excellent feature - great work DK.

As for my last question, does anyone know how I assign a specific axis to  travel on the path normals?

Cheers,

DB