mkadirtan

Members
  • Content Count

    5
  • Joined

  • Last visited

  1. Hello everyone! 🙂 In my BJS project, it is possible to key a characters position in the timeline. I achieved this result using GSAP Timeline tool. However, for my system to be consistent I need to control skeleton animations via same timeline. My solution ideas: use some kind of goToFrame() function (which I couldn't find for skeletal animations, also it is hard to control speed this way) Manage skeleton animation using a nested timeline. My problem is that: I've found the way bone animations are recorded. If I'm correct "_localMatrix.m" value is being updated during animation. However, I couldn't manage to update it manually. What am I missing here? What does "_" in a variable name tell me? Thanks in advance! //Loaded animation data myCharacter.skeleton.bones[i].animations[j]._keys[k].value.m //Characters current state myCharacter.skeleton.bones[i]._localMatrix.m
  2. Hello! I'm creating a 3D application with BabylonJS. Users are able to create keyframes for object positions (Cube.position.x etc.), which in turn creates an animation. Time is controlled by using a slider. What would be the best practice, better approach for such an application? Currently I'm using TimelineLite. It is a "tween" based system, and in practical use it would cause me problems. For example, if a user wants to change position of a keyframe, or create a new keyframe between other keyframes.. these kind of actions would cause troubles. I know these problems could be fixed, however I was wondering if there is a better approach for creating an animation system as such? A good example of what I want to achieve is: https://nunustudio.org/editor/editor.html
  3. mkadirtan

    GUI Blocks Navigation

    Yep! This solved my problem, thank you very much!
  4. Hello everybody, I'm trying to add a simple GUI to my project. However, as soon as this line of code is inserted: let advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI"); My navigation system is broken, even though I have a free camera, I can't navigate the scene. I have following errors in my console: I've tried: Running on Firefox and Chrome, Local server and Web server. Full source of my application: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Scene Design</title> <style> html, body { overflow: hidden; width: 100%; height: 100%; margin: 0; padding: 0; } #renderCanvas { width: 100%; height: 100%; touch-action: none; } </style> <script src="src/js/babylon.js"></script> <script src="src/js/babylon.gui.min.js"></script> <script src="src/js/TimelineLite.min.js"></script> <script src="src/js/TweenLite.min.js"></script> </head> <body> <canvas id="renderCanvas"></canvas> <script> let scene, tl, sphere, ground, Plane; let slider; let createScene = function(){ // ENGINE, SCENE, CAMERA, LIGHTS let canvas = document.getElementById("renderCanvas"); let engine = new BABYLON.Engine(canvas, true); let scene = new BABYLON.Scene(engine); let camera = new BABYLON.FreeCamera("Camera", new BABYLON.Vector3(2,4,-3), scene); camera.setTarget(BABYLON.Vector3.Zero()); camera.attachControl(canvas, true); let light1 = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(1,-1,4), scene); let light2 = new BABYLON.PointLight("light2", new BABYLON.Vector3(0, 1, 4), scene); //OBJECTS sphere = new BABYLON.MeshBuilder.CreateSphere("sphere", {diameter: 2}, scene); sphere.position.y = 1; Plane = new BABYLON.MeshBuilder.CreatePlane("Plane", {width: 6, size: 6}, scene); Plane.position.z = 5; //BACKGROUND, GROUND scene.clearColor = new BABYLON.Color3(0,0.8,0.6); ground = BABYLON.Mesh.CreateGround("ground", 200, 200, 1, scene, false); let groundMaterial = new BABYLON.StandardMaterial("ground", scene); groundMaterial.specularColor = BABYLON.Color3.Black(); ground.material = groundMaterial; //LOOP engine.runRenderLoop(function(){ scene.render(); }); //RESIZE window.addEventListener("resize", function(){ engine.resize(); }); //GUI //PROBLEMATIC CODE HERE let advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI"); //PROBLEMATIC CODE HERE return scene; }; //TIMELINE scene = createScene(); tl = new TimelineLite(); tl.fromTo(sphere.position, 3, {x: -2}, {x: +2}); </script> </body> </html>