Jump to content

error on 'new BABYLON.AnimationGroup()'


Recommended Posts

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?



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(

        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++) {
            frame: p,
            value: catmullRom.getPoints()[p]

            frame: p,
            value: BABYLON.Vector3.RotationFromAxis(normals[p], binormals[p], tangents[p])


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

    return scene;




Link to comment
Share on other sites


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.


Link to comment
Share on other sites

@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:


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.




Link to comment
Share on other sites

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?



Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...