Adding Follow-up camera in using gltf model

window.addEventListener("DOMContentLoaded", function () {

  var canvas = document.getElementById("renderCanvas");

  var engine = new BABYLON.Engine(canvas, true);

  createScene = function () {

    var scene = new BABYLON.Scene(engine);

    var camera = new BABYLON.FreeCamera(

      "camera1",

      new BABYLON.Vector3(0, 5, -10),

      scene

    );

    // Targeting the camera to scene origin

    camera.setTarget(new BABYLON.Vector3.Zero());

    // Attaching the camera to canvas

    camera.attachControl(canvas, true);

    var light = new BABYLON.HemisphericLight(

      "light1",

      new BABYLON.Vector3(0, 1, 0),

      scene

    );

    //create a built-in "sphere" shape; its constructor takes 6 params: name, segment, diameter, scene, updatable, sideOrientation

    var sphere = new BABYLON.Mesh.CreateSphere("Sphere", 16, 2, scene);

    // Move the Sphere upward meanse in y axis

    sphere.position.y = 1;

    var inputMap = {};

    // This sceneloader is for loading gltf models it constructor takes : location, name, scene

    var character = new BABYLON.SceneLoader.ImportMesh(

      "",

      "./assets/undercover_cop_-_animated/",

      "scene.gltf",

      scene,

      async function (newMeshes, particleSystems, skeletons, animationGroups) {

        try {

          var dude = newMeshes[0];

          var animations = animationGroups;

          console.log(animations);

          var idleRange = animations[2];

          var walkRange = animations[0];

          var breathingIdleRange = animations[1];

          animations[0].stop();

          dude.position = new BABYLON.Vector3(1.5, 1, 0);

          scene.actionManager = new BABYLON.ActionManager(scene);

          scene.actionManager.registerAction(

            new BABYLON.ExecuteCodeAction(

              BABYLON.ActionManager.OnKeyDownTrigger,

              function (evt) {

                inputMap[evt.sourceEvent.key] =

                  evt.sourceEvent.type == "keydown";

              }

            )

          );

          scene.actionManager.registerAction(

            new BABYLON.ExecuteCodeAction(

              BABYLON.ActionManager.OnKeyUpTrigger,

              function (evt) {

                inputMap[evt.sourceEvent.key] =

                  evt.sourceEvent.type == "keydown";

              }

            )

          );

          scene.onBeforeRenderObservable.add(() => {

            if (inputMap["ArrowUp"]) {

              dude.position.z += 0.1;

              animations[0].play();

            }

            if (inputMap["ArrowLeft"]) {

              dude.position.x -= 0.1;

              animations[0].play();

              dude.rotation.y -= 90;

            }

            if (inputMap["ArrowDown"]) {

              dude.position.z -= 0.1;

              animations[0].play();

              dude.rotation.y += 180;

            }

            if (inputMap["ArrowRight"]) {

              dude.position.x += 0.1;

              animations[0].play();

              dude.rotation.y += 90;

            }

            //Adding follow Camera

          });

        } catch (e) {

          console.log(e);

        }

      }

    );

    console.log(character);

    // create a built-in "ground" shape;

    var ground = BABYLON.Mesh.CreateGround("ground1", 20, 20, 10, scene);

    // To add the texture

    var groundTexture = new BABYLON.StandardMaterial("grounfTexture", scene);

    // Give the location of texture

    groundTexture.diffuseTexture = new BABYLON.Texture(

      "./assets/ground_texture.jpg",

      scene

    );

    ground.material = groundTexture;

    return scene;

  };

  var scene = createScene();

  //   This is run render Loop

  engine.runRenderLoop(function () {

    scene.render();

  });

  window.addEventListener("resize", function () {

    engine.resize();

  });

  var animationBlending = function* (toAnim, fromAnim) {

    let currentWeight = 1;

    let newWeight = 0;

    toAnim.play(true);

    while (newWeight < 1) {

      newWeight += 0.01;

      currentWeight -= 0.01;

      toAnim.setWeightForAllAnimatables(newWeight);

      fromAnim.setWeightForAllAnimatables(currentWeight);

      yield;

    }

  };

});

I’ve used one gltf model and want to add follow camera to it. I tried this but it’s giving me issues. Please help me with this. Now I’veonly one camera.

Can you describe the issues in more detail and provide us a Babylon.js Playground (babylonjs.com) repro?

Ok i’ll try

How can i add html and gltf model there
.

Check Using External Assets In the Playground | Babylon.js Documentation (babylonjs.com)

Github page
Sorry, for that I can’t able to add external gltf there don’t know why. But, you can refer above link for example, and press the arrow key for moving the character.

Made this , but gltf is not lading

You can use this path for the gltf in the playground now that you put it on GitHub:

https://ak228212.github.io/babylonJs/assets/undercover_cop_-_animated/scene.gltf

Ok let me try

See after adding adding gltf

This playground doesn’t seem to work right.

Yes, Don’t know why

But in babylon inspector it’s showing it’s texture
Please help me in this

Here you go: https://playground.babylonjs.com/#U6168F#17

You were rapidly creating many cameras, lights, and environments.

            // scene.createDefaultCameraOrLight(true, true, true);
            // scene.createDefaultEnvironment();

Now that we have a playground. What do you want to do? I’m not sure I understand from your playground code what you want.

Thank you so much for that. Now please help me in solving my issue. I want that my scene has two cameras one is showing the ground and scene perfectly and the second will follow the character all time whenever it moves or rotates. Please help me with this.

Like this: https://playground.babylonjs.com/#U6168F#19?

Thank you so much for giving your solution. But I need little bit more, that camera should follow avatar means we can see the avatar also. And if I move avatar it follows him. Like, follow camera.

Well the forum is to help you understand the framework and not write code for you :slight_smile:
I would highly suggest that you work on @bghgary playground and come back with questions

Yeah ok,

Thanks again for your help