Moving imported glb model with animation

Hello, @sebavan I am trying to move imported glb model with animation.
Platform: android and babylonjs react native.

Code:

 const glbAvatarFile = "avatare/Xbot.glb";
  
    SceneLoader.ImportMeshAsync(null, modelsUrl, glbAvatarFile, scene).then(result => {
      result.meshes[0].position = new Vector3(0.5, - 0.5, 0);

      const avatarMesh = result.meshes[0] as Mesh;
      // mesh.scaling = new Vector3(0.5, 0.7, 0.5);
      avatarMesh.scaling.scaleInPlace(0.7);
      //avatarMesh.parent = camera;

      console.log("avatar is loaded");
      setAvatarMesh(avatarMesh);
    });

.............................
............................
 const deviceSourceManager = new DeviceSourceManager(engine);
      const handlePointerInput = (inputIndex: PointerInput, previousState: Nullable<number>, currentState: Nullable<number>) => {
        if (inputIndex === PointerInput.Horizontal &&
          currentState && previousState) {
    
            var walkSpeed = 0.3;
            if(avatarMesh) {
              // avatarMesh.moveWithCollisions(avatarMesh.forward.scaleInPlace(walkSpeed));
              let cam = camera;
              var speed = 10;
              var frameCount = 220;
              var ease = new CubicEase();
              ease.setEasingMode(EasingFunction.EASINGMODE_EASEINOUT);
      
       
              const  startPosition = avatarMesh.position;
              const endPosition = new Vector3(avatarMesh.position._x + 1, 0.5, avatarMesh.position._z + 1);

              Animation.CreateAndStartAnimation('avatar1', avatarMesh, 'position', speed, frameCount, startPosition, endPosition, 0, ease);
              avatarMesh.position = endPosition;
              
              console.log("moveWithCollisions");

              const walkAnim = scene.getAnimationGroupByName("walk");
              walkAnim.start(true, 1.0, walkAnim.from, walkAnim.to, false);
            }
        };
      };

Can’t you just change the mesh position?
avatarMesh.position = newPosition;

Yup this should work, this is weird if it does not and a repro in the playground would be great to troubleshoot ?

I have made:

https://playground.babylonjs.com/#8LFTCH#1077

it works here:

hero.moveWithCollisions

The other variant does not:

hero.position._x += 0.5;

On android both methods do not work.

it should be hero.position.x += 0.5; and your playground is having errors in load and such… Also on android you won t guess access to the keyboard so it can not work

Ok,
it works:
hero.position.x += 0.1;

Sure, on android is other touch control

Yes,
same code with touch conrol doesn’t work on android:

 const deviceSourceManager = new DeviceSourceManager(engine);
      const handlePointerInput = (inputIndex: PointerInput, previousState: Nullable<number>, currentState: Nullable<number>) => {
        if (inputIndex === PointerInput.Horizontal &&
          currentState && previousState) {
            let touchRotate_x = (currentState - previousState) * 0.005;
            camera.rotation._y += touchRotate_x;

            if(avatarMesh) {
              avatarMesh.position.z += 1;
              console.log("moving:" +avatarMesh.position.z);
            }
        };

@PolygonalSun might help with this part.

@igorroman777 a simple repro in the playground would be great :slight_smile: Please try to only include the bare minimum for the repro

Hi @brianzinn
i don’t quite understand it. I have it for playground
made:

https://playground.babylonjs.com/#8LFTCH#1077

It works in the browser.
How do I do it for react native on smartfone?
There it same code in principle only different control:

const glbAvatarFile = "avatare/Xbot.glb";
  
    SceneLoader.ImportMeshAsync(null, modelsUrl, glbAvatarFile, scene).then(result => {
      result.meshes[0].position = new Vector3(0.5, - 0.5, 0);

      const avatarMesh = result.meshes[0] as Mesh;
      // mesh.scaling = new Vector3(0.5, 0.7, 0.5);
      avatarMesh.scaling.scaleInPlace(0.7);
      //avatarMesh.parent = camera;

      console.log("avatar is loaded");
      setAvatarMesh(avatarMesh);
    });
const deviceSourceManager = new DeviceSourceManager(engine);
      const handlePointerInput = (inputIndex: PointerInput, previousState: Nullable<number>, currentState: Nullable<number>) => {
        if (inputIndex === PointerInput.Horizontal &&
          currentState && previousState) {
            let touchRotate_x = (currentState - previousState) * 0.005;
            camera.rotation._y += touchRotate_x;

            if(avatarMesh) {
              avatarMesh.position.z += 1;
              console.log("moving:" +avatarMesh.position.z);
            }
        };

Hey @igorroman777,
In that code snippet, I noticed that you are creating a DeviceSourceManager object and that you have a function handlePointerInput but I’m not seeing it being called anywhere. Is there any more input code that has been omitted from this snippet? For example, are you using onInputChangedObservable or some call to getInput?

2 Likes

No, function handlePointerInput works.
I can see in the logs that e.g:

moving: 113

and the camera also rotates: s. camera.rotation._y += touchRotate_x;
Only avatarMesh is nit moving.
I.e. does not work:

avatarMesh.position.z += 1;

It’s a bug on babylonjs react native. Or ? @bghgary

@igorroman777 Please kindly stop tagging random people to this thread. @PolygonalSun did much of the work to support input and he is the best person to help you with this issue. Thanks.

sorry :slight_smile:

1 Like

Hi @PolygonalSun
As I said, there is a problem mesh does not move,:

avatarMesh.position.z += 1;

everything e.g. mooving Camera else works:

camera.rotation._y += touchRotate_x;

So the camera is moving but your mesh isn’t moving and this is in a Babylon React Native instance?

@PolygonalSun For the PG, looks like you press w to move the character. Apparently in Babylon React native (BRN), this doesn’t work.

@igorroman777 Is the event firing in BRN?

@bghgary, I see what you mean about the character moving with ‘w’ now. If that’s the case, Babylon React Native currently isn’t supporting keyboard inputs yet so movement by pressing ‘w’ wouldn’t work yet but it is currently on my plate of things to get implemented for Babylon React Native.

As noted earlier, there is no keyboard on a mobile device, so I think @igorroman777 means that the input is different using the code he pasted above.

Hi,
sure, i only use keyboard for playgroung. there the movement works:

https://playground.babylonjs.com/#8LFTCH#1077

For mobile devices I use other control, namely touch:

  const deviceSourceManager = new DeviceSourceManager(engine);
      const handlePointerInput = (inputIndex: PointerInput, previousState: Nullable<number>, currentState: Nullable<number>) => {
        if (inputIndex === PointerInput.Horizontal &&
          currentState && previousState) {
            let touchRotate_x = (currentState - previousState) * 0.005;
            camera.rotation._y += touchRotate_x;

            if(avatarMesh) {
              avatarMesh.position.z += 1;
              console.log("moveWithCollisions:" +avatarMesh.position.z);
            }
        };
      };
....
deviceSourceManager.onDeviceConnectedObservable.add(device => {
        if (device.deviceType === DeviceType.Touch) {
          const touch: DeviceSource<DeviceType.Touch> = deviceSourceManager.getDeviceSource(device.deviceType, device.deviceSlot)!;
          touch.onInputChangedObservable.add(touchEvent => {
            handlePointerInput(touchEvent.inputIndex, touchEvent.previousState, touchEvent.currentState);
          });
        } else if (device.deviceType === DeviceType.Mouse) {
          const mouse: DeviceSource<DeviceType.Mouse> = deviceSourceManager.getDeviceSource(device.deviceType, device.deviceSlot)!;
          mouse.onInputChangedObservable.add(mouseEvent => {
            if (mouse.getInput(PointerInput.LeftClick)) {
              handlePointerInput(mouseEvent.inputIndex, mouseEvent.previousState, mouseEvent.currentState);
            }
          });
        }
      });

Everything (handlePointerInput) also works:

  1. camera moves
  2. log “moveWithCollisions …” is there

Only mesh “avatarMesh” does not move!

Okay, if you are getting the console log, then it’s not an input problem. Let me see if I can repro.