model with skeleton/armature/bones in node

[f1-outsourcing]

@vasturiano It looks like it is not possible to default load a model with a skeleton, is there any way around this?

      three_graph.nodeThreeObject(({ id }) => {  //here you can set the custom glb/mesh based on specific id rule
        if (!(id % 2)) {
          var model = glb1.clone();
          model.name = "nodeglb1_" + id;

          if (animations['glb1'] !== undefined) {
            var mixer = new THREE.AnimationMixer(model);
            let glbaction = mixer.clipAction(animations['glb1'], model);
            glbaction.setLoop(THREE.LoopRepeat);
            glbaction.play();
            mixers.push(mixer);
          }

          //get height 
          let sizebox = new THREE.Box3().setFromObject(model);
          let size = new THREE.Vector3();
          sizebox.getSize(size);

          const sprite = new SpriteText(id);
          sprite.color = "black";
          sprite.textHeight = 2;
          sprite.position.z -= size.z * (1 / sfglb) + (spgap / 100 * (size.z * (1 / sfglb)));
          model.add(sprite);

          return model;
        }

      loader.load(urlglb1, function (gltf) {
        glb1 = gltf.scene;
        glb1.name = "glb1";

        glb1.scale.set(sfglb, sfglb, sfglb);

        if (typeof gltf.animations[0] !== 'undefined') {
          var mixer = new THREE.AnimationMixer(gltf.scene);
          let glbaction = mixer.clipAction(gltf.animations[0], gltf.scene);
          animations['glb1'] = gltf.animations[0];
          glbaction.clampWhenFinished = true;
          glbaction.setLoop(THREE.LoopRepeat);
          glbaction.play();
          mixers.push(mixer);
        }
      },
        undefined,
        function (error) { console.error(error); }
      );

test.zip

[f1-outsourcing]

@vasturiano It looks like it is not possible to default load a model with a skeleton, is there any way around this?

I have added this code I have, any hints are welcome in what I do wrong.

[vasturiano]

@f1-outsourcing could you provide an example on https://codepen.io/ or https://codesandbox.io/ ? The above code is only partial and doesn't show what is glb1 for example.

[f1-outsourcing]

I don't have accounts on these sites. glb1 is just a model loaded as is in all the examples. I tried also with downloaded fbx files, just to make sure it is not some weird blender export. When I remove in blender these bones and export it, it is fine.
Maybe there is something in this skeleton that forces centre 0,0,0

[f1-outsourcing]

Terribly, terribly sorry to disturb you with this. Turns out I had switcht to this

          //var model = glb1.clone();
          var model = SkeletonUtils.clone(glb1);

[vasturiano]

No problem @f1-outsourcing. And does it work fine that way?

[f1-outsourcing]

I can't really tell yet. :) Seems things are ok, some things need to be rewritten so it detects this difference.

[f1-outsourcing]

It looks like the raycaster can’t seem to find all objects, I think it is mostly related to when an animation is added, when I remove the animation it seems ok. Then I read this[1] about a difference with SkinnedMesh. This issues seems only when I attach it to this node. Adding the same object to the the scene directly, seems to be ok.

Could the nodeThreeObject influence this in any way? Someone on threejs is writing they still have issues with the raytracer and skinnedmesh.

      raycaster.setFromCamera(mouse, camera);

      ObjectToTest = [];
      scene.traverse(function (child) {
        if (child.isMesh || child.isSkinnedMesh) {
          ObjectToTest.push(child);
          //console.log("rayobj", child.name);
        }
      });

If log them I see these skinned meshes names. But when I log them at intersects, I don’t see them any more.

intersects = raycaster.intersectObjects(ObjectToTest);

      for (const intersect of intersects) {

        console.log("intersect", intersect.object.name);
      }
    }

[1]
https://stackoverflow.com/questions/34547473/three-js-raycasting-object-selection-with-animation

[f1-outsourcing]

It is threejs, I managed to get better results with setting this boundingbox[1]

child.computeBoundingBox();

[1]
https://discourse.threejs.org/t/get-location-on-click-of-skinned-mesh-object/23152/3

[f1-outsourcing]

I have been visualising these bounding boxes and they seem to have weird (huge) dimensions, all are not even around the models. Not rotated, not scaled. However when I give them static (smaller) dimensions, I can observe they are scattered around the scene in exactly the same pattern. So three models in triangle, then 3 helperbox in the same triangle shape with just an offset to the models. They also seem to drift/move a bit as the models.

          let viewbox = new THREE.BoxHelper( model, 0xffff00 ); 
          scene.add( viewbox );

Currently I am doing this computeBoundingBox(); within the nodeThreeObject assignment. Should I do this somewhere else or am I just not loading these correctly?

[f1-outsourcing]

I have currently moved as many transforms necessary to the section where I load the glb's. If I put them in the scene and create a box helper they look like this.

When I put these glb's on nodes with this code

      three_graph.nodeThreeObject(({ id }) => {  //here you can set the custom glb/mesh based on specific id rule
        if (id % 2) {
          let model, source = "glb1", is3d = false;

          eval(source).children.forEach(function (item, index) {
            if (item.name === "Armature") {
              model = SkeletonUtils.clone(eval(source));
              if (showboxhelpers) model.add(new THREE.BoxHelper(model, 0xff0000));
              model.rotation.x = -Math.PI / 2;
              is3d = true;
            } else {
              model = eval(source).clone();
              model.rotation.x = 0;
            }
          });
          model.name = "node-" + source + "-" + id;

          if (showboxhelpers) model.add(new THREE.BoxHelper(model, 0x990000));

The helperboxes look like this.

I assume this is not correct not? Weird is after rewriting most scaling/rotating to the glb loader functions I got this raytracer to work, however I am using these boxes to calculate the height and put a sprite above the cube.