Moving imported glb model with animation

igorroman777 · January 31, 2022, 5:59pm

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;

sebavan · January 31, 2022, 6:45pm

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

igorroman777 · February 1, 2022, 4:34pm

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.

sebavan · February 1, 2022, 5:14pm

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

igorroman777 · February 1, 2022, 5:31pm

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

Sure, on android is other touch control

igorroman777 · February 1, 2022, 6:20pm

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);
            }
        };

sebavan · February 1, 2022, 6:30pm

@PolygonalSun might help with this part.

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

igorroman777 · February 1, 2022, 7:16pm

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);
            }
        };

PolygonalSun · February 1, 2022, 7:38pm

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?

igorroman777 · February 1, 2022, 9:37pm

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

bghgary · February 1, 2022, 10:04pm

@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.

igorroman777 · February 2, 2022, 9:32am

sorry

igorroman777 · February 2, 2022, 10:13pm

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;

PolygonalSun · February 2, 2022, 11:58pm

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

bghgary · February 3, 2022, 12:06am

@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?

PolygonalSun · February 3, 2022, 12:13am

@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.

bghgary · February 3, 2022, 12:17am

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.

igorroman777 · February 3, 2022, 5:01pm

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:

camera moves
log “moveWithCollisions …” is there

Only mesh “avatarMesh” does not move!

bghgary · February 3, 2022, 8:26pm

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

Topic		Replies	Views
Cannot move GLB after importing Questions	1	946	February 18, 2020
How to update imported GLB mesh position (Bug?) Questions	6	1886	November 9, 2023
Importing model inbuilt animations and play/pause them Questions animation	6	947	January 1, 2021
How to move a glb mesh Questions	2	790	July 4, 2019
GLB file with animation from Blender, Animation Autostart issue Questions	13	1506	April 12, 2022

Moving imported glb model with animation

Related topics