Hello, I am a little confused about a lot of things

[Harry]

I am a 3D graphic artist and a very (emphasis on the very) amateur programmer. So this library is at times very overwhelming for me and frustrating as even the most basic 3D task is quite complex (in a good way).
I am essentially trying to jerry-rig it onto the Construct 3 game engine to mixed results. I can now get objects to load in the view(playing an animation automatically.) I have noticed that a lot of the examples use something called AnimationGroups. but I have no idea how to change them from one to another.

This is the scene creation function that I am using:

var createSceneGTLF = function (canvas, engine) {
var scene = new BABYLON.Scene(engine);

//Adding a light
var light = new BABYLON.HemisphericLight();

//Adding an Arc Rotate Camera
var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0.8, 10, BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, false);
//THIS MAKES SURE NO LOADING SCREEN!
BABYLON.SceneLoaderFlags.ShowLoadingScreen = false;
// The first parameter can be used to specify which mesh to import. Here we import all meshes
var anims = [];
var stp = 2;
var vel = 1;
var alienload = BABYLON.SceneLoader.Append("https://cdn.jsdelivr.net/gh/NRABrasil/ar@79c50129b36d9b326afbe28fac6e6f7508567436/", "rooster5.glb", scene);
alienload.onSuccess = function (task) {
    scene.activeCamera = null;
    scene.createDefaultCameraOrLight(true);
	scene.animationGroups[1].play(true);
    // scene.activeCamera.attachControl(canvas, false);
};

scene.clearColor = new BABYLON.Color4(0.0, 0.0, 0.0, 0.0);

return scene;

}

Sorry if the paste becomes unformatted, I am new to the forums.

But as you can see I have tried many things to change the Animation but to no avail.

Also, how would I go about referring to the newly created object in a new function? would the var that I have specified work outside of the create function?

Sorry if this is a long one, I have so many more questions but I thought I ought to keep this short for now.

Any help or guidance would be much appreciated.

All the best,

Harry.

[Wingnut]

Hi Harry, welcome to the forum. Just some minor issues… you’re doing fine. We got bird!

https://playground.babylonjs.com/#EBZF5R#2

I think I beat Vincent. onSuccess wasn’t running… needed some massaging. Now run any animation [0-7] in line 32. Fun model! Harry, if ya got questions, just ask.

Setting alienload.onSuccess AFTER we had already called SceneLoader.Append()… might be too late to get installed in-time. SO, I put the onSuccess function… INSIDE the parameters/args of the SceneLoader “call”. Sort of “register” the onSuccess function… a bit earlier.

And then, it started running properly when the file finished loading… and everything in lines 23-34… suddenly started working better. YAY!

I also did another “loader”, using the more-modern AssetsManager system. https://www.babylonjs-playground.com/#ZJYNY#207 Cleaner, fancier. Line 23 up-scaling of the root… not allowed, though. Probably not a mesh, even though it has a .rotationQuaternion. Probably a transformNode.

When I opened the playground’s inspector, and clicked-around in the “nodes”… I could see that maybe it had a top-most root and a lower-down rudy_root. Maybe I need to scale rudy-root instead of root.

Maybe broken cuzzzzz… ya don’t scale birds, you pluck them. Only fish/reptiles can be scaled. erf.

UPDATE: https://www.babylonjs-playground.com/#ZJYNY#208 I moved many things (including up-scaling attempt) from meshTask.onSuccess()… into assetsManager.onFinish(). Now the line 23 up-scaling is working… making Rudy 3 times bigger in all dimensions. Adjust the “10” in line 8 to set camera distance (camera.radius).

Other adjustments in line 8: the -Math.PI/2 is the camera left/right pan amount (camera.alpha)… currently set -1.57… so camera looks directly +z (a common setting). Generally, values -6.28 to +6.28 go there. People often animate camera.alpha with a simple animation… for cool model touring. Here is an example, which also demonstrates the cool BJS “observables” system… in lines 36-40. We wait for scene-ready to be observed, and then we install another little observer that runs each frame-render. camera.alpha += .01… adds a tiny bit of value to camera.alpha… each time the frame renders. Easy and fun.

The 1.5 value (in line 8) is the up/down “tilt” of the camera… known as camera.beta. Generally, it uses values 0.001 to 3.14. Value 0.001 is camera aimed down from above. 3.14 is looking up, from beneath. Our current value of 1.5… means we have our camera.beta sitting slightly above the equator/horizon of the scene. All three of these ArcCam values… are for arcCamera orbital direction/aiming.

The new BABYLON.Vector3(0, 2, 0) in line 8… is the position of the camera.target or .lockedTarget if it exists. It is the center-point or pivot of the arc-cam’s orbital sphere-area. We have raised the camera’s currently-invisble target 2-units (y-axis) above the ground-plane (and thus the camera is rasied, too). People often move/animate the camera.target from one mesh.position to another… to “focus-upon” and orbit a different “featured mesh”.

WAY TMI, eh? I like the arcCam - one of my best friends. I think you should get to know it.

Does Rudy need a skybox? It helps our eyes see that the camera is orbiting, instead of the model rotating. Here we go… a camera.alpha rotation around rudy in a skybox. FUN!

[Vinc3r]

Getting into webGL for an artist can be harsh but don’t be discouraged, this forum will give you a lot of help (in addition to the doc’ of course). To allow community to easily help you, playgrounds are very great (doc, check examples as well)

---

About message formating, this forum use markdown, so for a block of javascript, just use ```javascript as tag

[Harry]

Thank so you very much! @Wingnut & @Vinc3r those changes really helped and got me unstuck! I still have so much to learn but I am slowly getting it. The documentation of Babylon and the playground are so useful! (It was one of the reasons I chose to test it out over Three.Js(+ it plays nicer with the engine I am using))

I have only two more questions.

With Animation Groups how can you find what is currently playing? I have been going through the docs at AnimationGroup - Babylon.js Documentation and cannot really find anything. I thought the is playing accessor might be what I am after, but it returns a bool.

For example, how would I find the value?

scene.animationGroups[whatvalueiscurrentlyplaying].stop();

And with functions how would I go about waiting for an animation to end before doing something else (to get a more seamless transition) I was looking at weights (but they went straight over my head for now).

But then I found some reference to onAnimatinEndObservable.

function MyFunction1()
{
	//Do Something
	scene.animationGroups[3].onAnimationEndObservable.add(function() {
		scene.animationGroups[3].reset();
    	scene.animationGroups[3].stop();
		scene.animationGroups[4].play(true);
	});
	//scene.animationGroups[4].play(true);
}

Sorry if these seem like really basic questions. I can kind of see how everything works just in a very crude fasion.

All the best,

Harry.

[Wingnut]

Hi Harry…thx for the kind words… I’m glad we were helpful. I just added an Update section to my last post… mostly arcCam talk… and maybe worth reading.

I’m not much of an animation expert… so I can’t help with the “which animation isPlaying?” question, but I DO know that animations can have ‘onAnimationEnd’ functions, which are used similar to loader.onSuccess “callback” functions. Playground search in-code for onAnimationEnd returns some decent examples.

var whenAnimEnded = function(which) {
    console.log("anim ended");
}
 
scene.animationGroups[4].play(true, whenAnimEnded);

It might be THAT simple… but you’ll need to research it a bit, because I’m not sure. Be sure to CREATE (declare) the function/name FIRST (like I did)… before you try to use its name in a later call to something else.

Animations use one of THREE types of “loopMode”… and these can affect onAnimationEnd triggering.

BABYLON.Animation.ANIMATIONLOOPMODE_RELATIVE
BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE
BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT

Animations - Babylon.js Documentation - see parameter 5. It takes a bit to learn. Your animations are currently in CYCLE mode, I believe… looping to start-over. Constant means freeze at the end (but animation keeps running… frozen in place so onAnimationEnd will NOT trigger)… and relative means… start each next-loop… from ENDING frame of previous loop. Give yourself time and patience.

We should probably invent BABYLON.Animation.ANIMATIONLOOPMODE_PINGPONG, too… run the anim forward, then backward, then forward, etc. Right now, ping-pong CAN be done, but it takes special processing in onAnimationEnd function… reversing keyframe orders.

Yep, you’re climbing the BabylonJS learning curve at 1000 kph, now. Remember to eat and sleep sometimes, because this stuff can get real addictive (too much fun).