Search the Community

Hi everyone! I need you again ! So my problem : I have a scene (and a dream too...but it's not the question actualy... ....) Here, a .gif of my scene : Like you can see, I play animations of basics meshes on html select onchange event without difficulties...But when I try to play a skeleton animation with the last select html tag with the onchange event, I get an error in console like this : If I play my animation in the callback function parameter of the "Scene.Loader.ImportMesh(...)" function, there is no problem....I tried to create a "homemade" callback function but I had the same result... Here my scene code : 'use strict';// A voir pour popup patiente//var canvas = document.getElementById('myCanvas');//var context = canvas.getContext('2d');//var imageObj = new Image();////imageObj.onload = function() {//context.drawImage(imageObj, 69, 50);//};//imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';var scene;var engine;var posXSkel = 0;var posYSkel = -3;var posZSkel = 5;var objBrasSqueletteSupportExterne;var objBrasSqueletteSupportInterne;var objBrasSquelette;var objBrasProgramationSupportExterne;var objBrasProgramationSupportInterne;var objBrasProgramation;var objBrasPieceSupportExterne;var objBrasPieceSupportInterne;var objBrasPieceSupport;var objBrasPieceOutil;var objCapot;var objTrappeContour;var drapAnimationStart; var nameLastSkelAtelier;var tabMeshImportes = [];var tabSkelImportes = [];var tabAnimationSquelette = [];var tabAnimationPiece = [];var objAnimTest;//Start the demofunction runVisuAtelier(canvasId,listeParamsSkel) { var canvas = document.getElementById(canvasId); engine = new BABYLON.Engine(canvas, true); nameLastSkelAtelier = ""; scene = new BABYLON.Scene(engine); BABYLON.SceneLoader.Load("", "SceneAtelier.babylon", engine, function (newScene) { // Wait for textures and shaders to be ready //newScene.executeWhenReady(function () { // Attach camera to canvas inputs newScene.activeCamera.attachControl(canvas); // Get the scene's objects objCapot = newScene.getMeshByName("MeshCapotTrappeAtelier"); objBrasSqueletteSupportExterne = newScene.getMeshByName("MeshSupportExterneBrasSkeletteAtelier"); objBrasSqueletteSupportInterne = newScene.getMeshByName("MeshSupportInterneBrasSkeletteAtelier"); objBrasSquelette = newScene.getMeshByName("MeshAimantBrasSkeletteAtelier"); objBrasProgramationSupportExterne = newScene.getMeshByName("MeshSupportExterneBrasProgramationAtelier"); objBrasProgramationSupportInterne = newScene.getMeshByName("MeshSupportInterneBrasProgrammationAtelier"); objBrasProgramation = newScene.getMeshByName("MeshCasqueProgramationAtelier"); objBrasPieceSupportExterne = newScene.getMeshByName("MeshSupportExterneBrasPieceAtelier"); objBrasPieceSupportInterne = newScene.getMeshByName("MeshSupportInterneBrasPieceAtelier"); objBrasPieceSupport = newScene.getMeshByName("MeshBrasPieceSupportAtelier"); objBrasPieceOutil = newScene.getMeshByName("MeshBrasPieceOutilsAtelier"); objTrappeContour = newScene.getMeshByName("MeshContourCapotAtelier"); // In default, the scene plays all animations newScene.stopAnimation(objCapot); newScene.stopAnimation(objBrasSqueletteSupportExterne); newScene.stopAnimation(objBrasSqueletteSupportInterne); newScene.stopAnimation(objBrasSquelette); newScene.stopAnimation(objBrasProgramationSupportExterne); newScene.stopAnimation(objBrasProgramationSupportInterne); newScene.stopAnimation(objBrasProgramation); newScene.stopAnimation(objBrasPieceSupportExterne); newScene.stopAnimation(objBrasPieceSupportInterne); newScene.stopAnimation(objBrasPieceSupport); newScene.stopAnimation(objBrasPieceOutil); newScene.stopAnimation(objTrappeContour); // Set up the select tag initSelectPackPiecesAte(); initSelectAnimaSkelAte(); initSelectAnimaPackPieceAte(); //scene.beginAnimation(target, from, to, loop, speedRatio, onAnimationEnd) //newScene.beginAnimation(objCapot, 140, 160, true, 1.0, function(){}); scene = newScene; createSkybox(); createAllSkeletons(listeParamsSkel); drapAnimationStart = false; // Once the scene is loaded, just register a render loop to render it engine.runRenderLoop(function() { scene.render(); }); //}); });}//Create the skyboxfunction createSkybox() { var sMaterial = new BABYLON.StandardMaterial("skyboxMaterialMagasin", scene); sMaterial.backFaceCulling = false; //sMaterial.reflectionTexture = new BABYLON.CubeTexture("images/skybox/skybox", scene); sMaterial.reflectionTexture = new BABYLON.CubeTexture("../../Bll/MoteurJeu/Img/IMG_Decor/Skybox/skyboxArene", scene); sMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE; var skybox = BABYLON.Mesh.CreateBox("SkyboxMagasin", 50, scene); skybox.material = sMaterial; skybox.checkCollisions = true; }// Set the position of meshfunction setupMeshWithPosFix(obj,meshes,posX,posY,posZ){ obj = meshes[0]; obj.position = new BABYLON.Vector3(posX,posY,posZ); return obj;}// Create the skeleton into the cylinderfunction createSkeleAtelier(tabParamsSkel){ if(tabParamsSkel != null) { var skelAtelier; var nomSkelAtelier = tabParamsSkel[0].NomBlender; //var chemVersFichierSkelAtelier = tabParamsSkel[0].ChemVersFichier; //var nomFichierSkelAtelier = tabParamsSkel[0].NomFichier; if(nameLastSkelAtelier != "") { skelAtelier = scene.getMeshByID(nameLastSkelAtelier); if(skelAtelier != null) { scene.beginAnimation(objCapot, 500, 540, false, 1.0, function(){}); skelAtelier.position = new BABYLON.Vector3(posXSkel, posYSkel-10, posZSkel-2.0); if(tabMeshImportes.length > 0) { var i = 0; var nbMeshesImportes = tabMeshImportes.length; for(i=0;i<nbMeshesImportes;i++) { var mesh = scene.getMeshByID(tabMeshImportes[i]); mesh.position = new BABYLON.Vector3(posXSkel, posYSkel-10, posZSkel-2.0); } } } } // Charger le squelette de démo pour l'aperçu de la pièce //skelAtelier = scene.getMeshByName(nameLastSkelAtelier); //skelAtelier = scene.getMeshByName(nomSkelAtelier); //skelAtelier = scene.getSkeletonByName("Armature"); //skelAtelier = scene.getSkeletonById(nomSkelAtelier); skelAtelier = scene.getMeshByID(nomSkelAtelier); // If mesh already exists if(skelAtelier != null) { // Jouer l'animation d'entrée du squelette scene.beginAnimation(objBrasSqueletteSupportExterne, 0, 100, false, 1.0, function(){}); scene.beginAnimation(objBrasSqueletteSupportInterne, 0, 100, false, 1.0, function(){}); scene.beginAnimation(objBrasSquelette, 0, 100, false, 1.0, function(){}); scene.beginAnimation(objTrappeContour, 0, 100, false, 1.0, function(){ scene.beginAnimation(objTrappeContour, 100, 190, false, 1.0, function(){}); scene.beginAnimation(objBrasSquelette, 100, 190, false, 1.0, function(){}); scene.beginAnimation(objBrasSqueletteSupportInterne, 100, 190, false, 1.0, function(){}); scene.beginAnimation(objBrasSqueletteSupportExterne, 100, 190, false, 1.0, function(){}); skelAtelier.position = new BABYLON.Vector3(posXSkel, posYSkel+3.5, posZSkel-2.0); }); } nameLastSkelAtelier = nomSkelAtelier; }}// Load all of the skeleton at the beginning of in the scenefunction createAllSkeletons(listeParamsSkel){ var tabParamsSkel = eval(listeParamsSkel); if(tabParamsSkel != null) { var i; for (i=0;i<tabParamsSkel.length;i++) //for (i=0;i<1;i++) // for test the first skeleton only { var skelAtelier; var nomSkelAtelier = tabParamsSkel[i].NomBlender; var chemVersFichierSkelAtelier = tabParamsSkel[i].ChemVersFichier; var nomFichierSkelAtelier = tabParamsSkel[i].NomFichier; BABYLON.SceneLoader.ImportMesh(nomSkelAtelier, "../../Bll/MoteurJeu/" + chemVersFichierSkelAtelier, nomFichierSkelAtelier, scene, function (newMeshesSkel,particleSystems, skeletons) { // -10 in y to load the skeleton under the floor and +3.5 in final position skelAtelier = setupMeshWithPosFix(skelAtelier,newMeshesSkel,posXSkel, posYSkel-10, posZSkel-2.0); //skelAtelier = setupMeshWithPosFix(skelAtelier,newMeshesSkel,skeletons,posXSkel, posYSkel+3.5, posZSkel-2.0); // Animation of skeleton is good here !!!! //objAnimTest = scene.beginAnimation(skeletons[0], 10, 55, true, 1.0, function(){}); //objAnimTest.stop(); }); tabSkelImportes.push(tabParamsSkel[i]); } }}// Create the device on the robotfunction createPieceAtelier(tabParamsPiece){ if(tabParamsPiece != null) { // Play the scene animations... scene.beginAnimation(objBrasPieceSupportExterne, 200, 270, false, 1.0, function(){}); scene.beginAnimation(objBrasPieceSupportInterne, 200, 270, false, 1.0, function(){}); scene.beginAnimation(objBrasPieceSupport, 200, 270, false, 1.0, function(){}); scene.beginAnimation(objBrasPieceOutil, 200, 270, false, 1.0, function(){ var i; var nbPieces = tabParamsPiece.length; for(i=0;i<nbPieces;i++) { var nomBlenderPiece = tabParamsPiece[i].NomBlender; var chemVersFichierPiece = tabParamsPiece[i].ChemVersFichier; var nomFichierPiece = tabParamsPiece[i].NomFichier; var piece; var pos = tabMeshImportes.indexOf(nomBlenderPiece); if(pos == -1) { // Import the mesh BABYLON.SceneLoader.ImportMesh(nomBlenderPiece, "../../Bll/MoteurJeu/" + chemVersFichierPiece, nomFichierPiece, scene, function (newMeshes) { piece = setupMeshWithPosFix(piece,newMeshes,posXSkel, posYSkel+3.5, posZSkel-2.0); piece.name = nomBlenderPiece; }); tabMeshImportes.push(nomBlenderPiece); } else { var mesh = scene.getMeshByID(tabMeshImportes[pos]); if(mesh != null) mesh.position = new BABYLON.Vector3(posXSkel, posYSkel+3.5, posZSkel-2.0); } } scene.beginAnimation(objBrasPieceOutil, 270, 340, false, 1.0, function(){}); scene.beginAnimation(objBrasPieceSupport, 270, 340, false, 1.0, function(){}); scene.beginAnimation(objBrasPieceSupportInterne, 270, 340, false, 1.0, function(){}); scene.beginAnimation(objBrasPieceSupportExterne, 270, 340, false, 1.0, function(){}); }); }}// Create the animation of the skeletonfunction createAnimation(idSkel,idAnimationSkel){ if(!drapAnimationStart) { var i = 0; var skelAtelier; var keyDeb; var keyFin; var nbSkel = tabSkelImportes.length; for(i=0;i<nbSkel;i++) { if(tabSkelImportes[i].ID == idSkel) { var nomSkel = tabSkelImportes[i].NomBlender; skelAtelier = scene.getMeshByID(nomSkel); if(skelAtelier != null) { // Find keyframes of the animation var j = 0; var nbAnimsSkel = tabAnimationSquelette.length; for(j=0;j<nbAnimsSkel;j++) { if(tabAnimationSquelette[j].ID == idAnimationSkel) { keyDeb = tabAnimationSquelette[j].KeyFrameDeb; keyFin = tabAnimationSquelette[j].KeyFrameFin; } } } } } if(!drapAnimationStart) { var objAnim = scene.beginAnimation(skelAtelier.skeleton, keyDeb, keyFin , false, 1.0, function(){ drapAnimationStart = false; }); drapAnimationStart = true; } //objAnimTest.restart(); //skelAtelier = scene.getSkeletonByName("Armature"); /* var objAnim = scene.beginAnimation(skelAtelier.skeleton, keyDeb, keyFin , false, 1.0, function(){ drapAnimationStart = false; }); drapAnimationStart = true; */ //test(retour2,skelAtelier.skeleton, keyDeb, keyFin ); // affiche 'Retour 2' //scene.render(); //scene.unregisterBeforeRender(function(){ //}); //scene.registerBeforeRender(function(){ /* if(!drapAnimationStart) { var objAnim = scene.beginAnimation(skelAtelier.skeleton, keyDeb, keyFin , false, 1.0, function(){ drapAnimationStart = false; }); drapAnimationStart = true; } */ //}); } }function addInTabAnimationSquelette(animationSkel){ tabAnimationSquelette.push(animationSkel);}function addInTabAnimationPiece(animationPiece){ tabAnimationPiece.push(animationPiece);}// Test of callback functionfunction retour2(lObjSkel,lImgeDeb,lImgeFin) { //alert('Retour 2'); if(!drapAnimationStart) { var objAnim = scene.beginAnimation(lObjSkel, lImgeDeb, lImgeFin, false, 1.0, function(){ drapAnimationStart = false; }); drapAnimationStart = true; } }function test(fct_retour,objSkel,imgDeb,imgFin) { fct_retour(objSkel,imgDeb,imgFin); // appel de la fonction} and here my onchange event function of the html select "Liste des Ids des packs de pieces" : function getValComboAnimationSkelAtelier(idDeComboSkel,idDeCombo){ // Get the skeleton var selectBox = document.getElementById(idDeComboSkel); var txtCombo = selectBox.options[selectBox.selectedIndex].textContent; var posBal = txtCombo.indexOf(':'); var idSkelStr = txtCombo.substr(0,posBal); // Get the num skeleton selectBox = document.getElementById(idDeCombo); txtCombo = selectBox.options[selectBox.selectedIndex].textContent; posBal = txtCombo.indexOf(':'); var idAnimationStr = txtCombo.substr(0,posBal); if(idAnimationStr != "") { createAnimation(idSkelStr.trim(),idAnimationStr.trim()); } }Anyone has an idea ??? Thanks !! Zino