Moving imported glb model with animation

Sorry for the delay. We are working on it and will report back when it’s ready.

I have made another update of babylonjs only. App runs, but touch input does not work.
Old:

    "@babylonjs/core": "^5.0.0-beta.4",
    "@babylonjs/loaders": "^5.0.0-beta.4",
    "@babylonjs/react-native": "^0.4.0-alpha.45",
    ..
    "expo": "42.0.3",
     ...
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-native": "0.64.2",

New:

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

Yes, we’ve noticed the same thing. @PolygonalSun

1 Like

I am actively investigating this and will update as soon as I have something

1 Like

Is there any news already?

I think the new release should be up soon @bghgary could confirm ?

5.0.0-rc.1 ?

and 0.64.0-alpha.47 ?

No, unfortunately we ran into a bunch of issues. @ryantrem and I are fixing the issues ASAP.

1 Like

all right, thanks

I get this error:

Error: Protocol version mismatch: 2 (Native) !== 4 (JS)
NativeEngine@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.artspacesvr&modulesOnly=false&runModule=true:283800:24

0.64.0-alpha.48 is out. Use corresponding @babylonjs/core@5.0.0.rc.1.

Note that the contract for DeviceSource.onInputChangedObservable has changed. It no longer has previousState and currentState. The type definition will also need some work and will be updated soon. You can still get the relative information using properties that are equivalent on the web side. This is due to performance reasons.

1 Like

App is running again. Great.
But that means this code is not up to date:

      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;

Yes, as I mentioned the contract has changed.

Here is the new contract usage:

1 Like

Hi!

I’d been having some issues with the devicesourcemanager in react native as well. Not for the mouseevent though. Has the whole devicesourcemanager been overhauled or is it just the mouse part?

Thanks! :smiley:

cc @PolygonalSun @ryantrem @sebavan

We changed the data that comes from the events since there were performance problems for the web implementation and probably also for the native implementation, but we haven’t fixed the native version yet. What kind of problems are you having?

I receive the following values on smartphone with touch inpit:

 LOG  PointerInput: {"0":"Horizontal","1":"Vertical","2":"LeftClick","3":"MiddleClick","4":"RightClick","5":"BrowserBack","6":"BrowserForward","7":"MouseWheelX","8":"MouseWheelY","9":"MouseWheelZ","12":"Move","Horizontal":0,"Vertical":1,"LeftClick":2,"MiddleClick":3,"RightClick":4,"BrowserBack":5,"BrowserForward":6,"MouseWheelX":7,"MouseWheelY":8,"MouseWheelZ":9,"Move":12}
 LOG  event: {"movementX":3,"movementY":1,"offsetX":0,"offsetY":0,"altKey":false,"ctrlKey":false,"metaKey":false,"shiftKey":false,"clientX":730,"clientY":1319,"x":730,"y":1319,"deviceType":3,"deviceSlot":0,"inputIndex":12,"pointerId":0,"pointerType":"touch","type":"pointermove"}
 LOG  PointerInput: {"0":"Horizontal","1":"Vertical","2":"LeftClick","3":"MiddleClick","4":"RightClick","5":"BrowserBack","6":"BrowserForward","7":"MouseWheelX","8":"MouseWheelY","9":"MouseWheelZ","12":"Move","Horizontal":0,"Vertical":1,"LeftClick":2,"MiddleClick":3,"RightClick":4,"BrowserBack":5,"BrowserForward":6,"MouseWheelX":7,"MouseWheelY":8,"MouseWheelZ":9,"Move":12}
 LOG  event: {"movementX":3,"movementY":1,"offsetX":0,"offsetY":0,"altKey":false,"ctrlKey":false,"metaKey":false,"shiftKey":false,"clientX":730,"clientY":1319,"x":730,"y":1319,"deviceType":3,"deviceSlot":0,"inputIndex":12,"pointerId":0,"pointerType":"touch","type":"pointermove"}
 LOG  PointerInput: {"0":"Horizontal","1":"Vertical","2":"LeftClick","3":"MiddleClick","4":"RightClick","5":"BrowserBack","6":"BrowserForward","7":"MouseWheelX","8":"MouseWheelY","9":"MouseWheelZ","12":"Move","Horizontal":0,"Vertical":1,"LeftClick":2,"MiddleClick":3,"RightClick":4,"BrowserBack":5,"BrowserForward":6,"MouseWheelX":7,"MouseWheelY":8,"MouseWheelZ":9,"Move":12}
 LOG  event: {"movementX":0,"movementY":0,"offsetX":0,"offsetY":0,"altKey":false,"ctrlKey":false,"metaKey":false,"shiftKey":false,"clientX":730,"clientY":1319,"x":730,"y":1319,"deviceType":3,"deviceSlot":0,"inputIndex":2,"pointerId":0,"pointerType":"touch","type":"pointerup","button":0}
 LOG  PointerInput: {"0":"Horizontal","1":"Vertical","2":"LeftClick","3":"MiddleClick","4":"RightClick","5":"BrowserBack","6":"BrowserForward","7":"MouseWheelX","8":"MouseWheelY","9":"MouseWheelZ","12":"Move","Horizontal":0,"Vertical":1,"LeftClick":2,"MiddleClick":3,"RightClick":4,"BrowserBack":5,"BrowserForward":6,"MouseWheelX":7,"MouseWheelY":8,"MouseWheelZ":9,"Move":12}
 LOG  event: {"movementX":0,"movementY":0,"offsetX":0,"offsetY":0,"altKey":false,"ctrlKey":false,"metaKey":false,"shiftKey":false,"clientX":730,"clientY":1319,"x":730,"y":1319,"deviceType":3,"deviceSlot":0,"inputIndex":2,"pointerId":0,"pointerType":"touch","type":"pointerup","button":0}
 LOG  PointerInput: {"0":"Horizontal","1":"Vertical","2":"LeftClick","3":"MiddleClick","4":"RightClick","5":"BrowserBack","6":"BrowserForward","7":"MouseWheelX","8":"MouseWheelY","9":"MouseWheelZ","12":"Move","Horizontal":0,"Vertical":1,"LeftClick":2,"MiddleClick":3,"RightClick":4,"BrowserBack":5,"BrowserForward":6,"MouseWheelX":7,"MouseWheelY":8,"MouseWheelZ":9,"Move":12}
 LOG  event: {"movementX":0,"movementY":0,"offsetX":0,"offsetY":0,"altKey":false,"ctrlKey":false,"metaKey":false,"shiftKey":false,"clientX":730,"clientY":1319,"x":730,"y":1319,"deviceType":3,"deviceSlot":0,"inputIndex":2,"pointerId":0,"pointerType":"touch","type":"pointerup","button":0}

Result:
// /** Left Click or Touch */
event.inputIndex === PointerInput.LeftClick
or
event.inputIndex === PointerInput.Move
and more frequently
movementX=0

My solution is:

        if (event.inputIndex === 12 && event.movementX) {
          console.log("bla handlePointerInput:" + event.movementX);
          // rootNode.rotate(Vector3.Down(), event.movementX * 0.005);
          let touchRotate_x = event.movementX * 0.005;
          camera.rotation._y += touchRotate_x;
       };

I’ve encountered problems when switching pages, where it would be registered multiple times when the rest of the library is all disposed of, or the devicesourcemanager returning null when I just came from a page with react native gestures. It’s not a dealbreaker.

Touch input now works for me.
But an old problem remains:
i want to move my avatar:

 const [avatarMesh, setAvatarMesh] = useState<Mesh>();
....
      const handlePointerInput = (event: IMouseEvent) => {
        if (event.inputIndex === PointerInput.Move && event.movementX) {
          // let touchRotate_x = event.movementX * 0.005;
          // camera.rotation._y += touchRotate_x;

          if(avatarMesh) {
            avatarMesh.position.x += event.movementX;
          }
       };
...
    const glbAvatarFile = "avatare/Xbot.glb";
  
    SceneLoader.ImportMeshAsync('', 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("Xbot avatar is loaded: " +avatarMesh.uniqueId);
      setAvatarMesh(avatarMesh);
    });

And that doesn’t work again. Or sometimes avatarMesh is undefined

The ids change constantly.

G  Xbot avatar is loaded: 2709
 LOG  BJS - [10:40:51]: Babylon Native (v5.0.0-rc.1) launched
 LOG  Xbot avatar is loaded: 3024

 LOG  avatarMesh Id: 2390
 LOG  avatarMesh Id: 2709
 LOG  avatarMesh Id: 2390
 LOG  avatarMesh Id: 2709
 LOG  avatarMesh Id: 2390
 LOG  avatarMesh Id: 2709
 LOG  avatarMesh Id: 2390
 LOG  avatarMesh Id: 2709