Loading animation data by loader.parse

Questions
,
1

Hi,I’m trying to embed animation json model in Three.js script.
I tried to use loder.parse.
But it doesn’t work.
My code is follows.

var test_model = {
	"uvs":[[-10,10]],
	"influencesPerVertex":2,
	.....
}

var loader = new THREE.JSONLoader();
loader.parse( test_model, function (model.geometry, materials ) {
	materials.forEach(function (material) { material.skinning = true; } ); 

var character = new THREE.SkinnedMesh(model.geometry, materials);
mixer = new THREE.AnimationMixer(character);
action.dance = mixer.clipAction(model.geometry.animations[ 0 ]);
scene.add( character );
animate();
action.dance.play();

I tried to load same data without animation by using following code.
In this case It works correctly.

var loader = new THREE.JSONLoader();
var model = loader.parse( test_model );
var mesh = new THREE.Mesh( model.geometry, new THREE.MeshBasicMaterial() );
scene.add( mesh );

Any help will be greatly appreciated. Thank you!

2

The problem is that THREE.JSONLoader parses geometry data as instances of THREE.Geometry. THREE.SkinnedMesh however does not support THREE.Geometry since R99.

Notice that THREE.JSONLoader was removed from the core in R99, too. Using this loader is not supported anymore. It’s best if you switch to a glTF based workflow. More information in this guide:

https://threejs.org/docs/index.html#manual/en/introduction/Loading-3D-models

3

Thank you Mugen87 for your very helpful information.
From now on, I will use gltf.
By the way, can I use gltf loader.parse for loading embed SkinnedMesh data?
I think that If cause of problem is update of THREE.Geometry, the problem is still exists.
Is my understanding correct?
In fact following code works correctly,

 const loader = new THREE.GLTFLoader();
 loader.setCrossOrigin( 'anonymous' );
 loader.setDRACOLoader( new THREE.DRACOLoader() );

 loader.load(
    './test_model.gltf',
    function ( gltf ) {
      mesh = gltf.scene;
      mesh.scale.set( 1, 1, 1 );

      let animations = gltf.animations;
      if ( animations && animations.length ) {
        mixer = new THREE.AnimationMixer( mesh );
          for ( let i = 0; i < animations.length; i ++ ) {
            let animation = animations[ i ];
            mixer.clipAction( animation ).play();
          }
      }

But following code doesn’t work.

 var test_model = {
    "accessors" : [
        {   "bufferView" : 0,
            "componentType" : 5123,
            "count" : 933,
}


  loader.parse(test_model,
    function ( gltf ) {
      mesh = gltf.scene;
      mesh.scale.set( 1, 1, 1 );

Thank you

4

GLTFLoader is used multiple times in the examples in order to load skinned mesh data e.g.:

https://threejs.org/examples/webgl_animation_skinning_blending
https://threejs.org/examples/webgl_animation_skinning_morph

5

Thank you Mugen87.
Yes, I understood that GLTFLoader can load skinnedmesh data.
I already tried it.
http://kimuraya-bakery.la.coocan.jp/three_js/gundam.html
It works correctly.
But I still can’t load embed data by using loader.parse.
Is there any example for loading embed skinnedmseh data?