Moving imported glb model with animation

Thank you,
this is clearly not an input problem.
It all works out of motion :frowning:

Sorry for the slow response, but I can’t repro this. Can you set up a repro? Also, can you tell me what avatarMesh points to? Is this a skinned model and is avatarMesh pointing to a parent of the skinned mesh? If so, changing these mesh transforms will be ignored since that is per glTF specification.

Hi, all good, thank you.
My example is quite simple. As it is written there, only other touch control:

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

or

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;
      avatarMesh.scaling.scaleInPlace(0.7);


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

And in the playground you can move mesh.
In the browser it moves.

I don’t understand. Where did you put the asset for your react native project such that loading "avatare/Xbot.glb" works? I tried loading a different model and it moves just fine.

const modelsUrl = "app:///models/";
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;
      avatarMesh.scaling.scaleInPlace(0.7);
      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("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);
            }
          });
        }
      });

can i see your code?

I tried with Xbot.glb in a newly created assets folder.

      const scene = new Scene(engine);
      setScene(scene);
      var camera = new FreeCamera("freeCamera", new Vector3(-3, 1, 0), scene);
      camera.setTarget(new Vector3(10, 0.1, 0));
      setCamera(scene.activeCamera!);
      scene.createDefaultLight(true);

      SceneLoader.ImportMeshAsync('', 'app:///Xbot.glb').then(result => {
        const mesh = result.meshes[0];

        const deviceSourceManager = new DeviceSourceManager(engine);
        const handlePointerInput = (inputIndex: PointerInput, previousState: Nullable<number>, currentState: Nullable<number>) => {
          if (inputIndex === PointerInput.Horizontal && currentState && previousState) {
            mesh.position.z += 0.01;
          };
        };
        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);
            });
          }
        });
      });

This works just fine?

Actually, I use the same code.
But my XBot stops and does not move. :frowning:

I’m not sure how to help. If you can set up a repo with this that reproduces for you, maybe we’ll see some difference?

Hi,
i have pushed in:

https://github.com/igorroman777/babylonjs2

Main screen is:

artspaces-vr/screens/Gallery3DScreen.tsx

Interestingly, touch does not work in this version either. This project is a copy of another project. There, at least touch worked.

Looks like this is related to some input issues. The mesh that is being returned when the input is working after a fast refresh is a different mesh than the one that was loaded. The loaded mesh (the one that is being draw) is not the one that is being moved. You can check this easily by logging the uniqueId property of the mesh.

@PolygonalSun is working on some input fixes regarding dispose that may help with this.

ok,
I’ll check uniqueId property.
In other projects where input works.

Yes, something is wrong.
I have this:

 LOG  Xbot avatar is loaded: 480
 LOG  BJS - [18:12:53]: Babylon Native (v5.0.0-beta.4) launched
 LOG  Xbot avatar is loaded: 634
 LOG  inputIndex avatarMesh: 480
 LOG  moveWithCollisions:0.1
 LOG  inputIndex avatarMesh: 480

I.e. there are two uniqueId: 480 und 634

1 Like

Yes, I believe this is caused by the input not being disposed properly in the code. @PolygonalSun made a fix and we need to test it in Babylon React Native to see if it resolves the problems.

1 Like

I have made an update:

    "@babylonjs/core": "^5.0.0-beta.9",
    "@babylonjs/loaders": "^5.0.0-beta.9",
    "@babylonjs/react-native": "^0.4.0-alpha.47",

Now touch input (device.deviceType === DeviceType.Touch) no longer works.

@PolygonalSun would be great if you can have a look

I have updated again:

    "@babylonjs/core": "^5.0.0-beta.11",
    "@babylonjs/loaders": "^5.0.0-beta.11",
    "@babylonjs/react-native": "^0.65.0-alpha.47",
.....
    "expo": "42.0.3",
.....
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-native": "0.64.2",



My app crashes.

@bghgary might be able to help ?