How can this array be transferred to a JSON.js

Questions
#1

I’m looking for a solution to load different animations by button. so I removed the animation array “morphTargets” from the JSON script “horse.js” and written it into a separate JSON script. Now I try to reload and delete. Does anyone know how to do that?

Animation array greatly shortened.

function myFunction() {	

    var oldArray = [
    { "name": "horse_A_001", "vertices": [0,1389,54,0,1408,116,0,1372] },
    { "name": "horse_A_002", "vertices": [0,1408,54,0,1425,111,0,1413] },
    { "name": "horse_A_003", "vertices": [0,1442,55,0,1456,105,0,1470] },
    { "name": "horse_A_004", "vertices": [0,1480,55,0,1490,99,0,1530] },
    { "name": "horse_A_005", "vertices": [0,1515,56,0,1520,92,0,1582] },
    { "name": "horse_A_006", "vertices": [0,1542,55,0,1542,87,0,1618] },
    { "name": "horse_A_007", "vertices": [0,1555,54,0,1550,87,0,1633] },
    { "name": "horse_A_008", "vertices": [0,1558,52,0,1550,92,0,1628] },
    { "name": "horse_A_009", "vertices": [0,1555,50,0,1552,104,0,1614] },
    { "name": "horse_A_010", "vertices": [0,1521,48,0,1527,118,0,1574] }
    ],
  
    var newArray = oldArray.slice();
  //var nweArray = oldArar.concat(); // concat can also be used to copy

console.log( newArray ); 	

}

The original horse.js without animation array

"metadata" : {
	"formatVersion" : 3,
	"description"	: "3D assets and textures for ROME - 3 Dreams of Black - at http://ro.me are licensed under a Creative CommonsAttribution-NonCommercial-ShareAlike 3.0 Unported License ( http://creativecommons.org/licenses/by-nc-sa/3.0/ )."
},

"scale" : 10.000000,

"materials": [	{
"DbgColor" : 15658734,
"DbgIndex" : 0,
"DbgName" : "comp_horse_rig:blinn9SG",
"colorDiffuse" : [0.41999999999999998, 0.56999999999999995, 0.45000000000000001],
"colorSpecular" : [1.0, 0.42999999999999999, 0.35999999999999999],
"illumination" : 4,
"opticalDensity" : 1.0
}],

"vertices": [0,1389,54,0,1408,116,0,1372],


"morphTargets": [ ],


"morphColors": [
{ "name": "horse_colorMap", "colors": [0.650,0.360,0.220,0.650,0.360,0.220] }
],

"normals": [],

"colors": [],

"uvs": [[0.448620,0.529399,0.416272,0.497377]],

"faces": [10,53,51,49,0,4,2,0,10,49,51,50]

}
#2

I don’t know enough about the animation system to have a complete solution, but https://threejs.org/examples/webgl_morphtargets_horse.html could be useful here.
It uses an AnimationMixer and dynamically loads the AnimationClip via AnimationClip.CreateFromMorphTargetSequence.
Quote from the docs:

CreateFromMorphTargetSequence
Returns a new AnimationClip from the passed morph targets array of a geometry, taking a name and the number of frames per second.

#3

Thanks @whorfl for your replay. I already use the example horse.js, and this probably only describes how the sequence of frames stored per time work. But maybe there is another way as exchange arrays. I could write all the animation fields with different names in the same horse.js and only calls I would like to play. ?

#4

@Tom if you want you can try my loader - you can load up a variety of formats and export them to three.js JSON format, or export just the animation in JSON format.

I just moved my site to Heroku so only models with embedded textures are working at the moment. Shouldn’t be an issue for extracting animations though.

As for loading the JSON animation, there is an AnimationLoader. It’s actually a bit broken at the moment and I had to modify it a bit to make it work. If you like I can share my modified version with you.

#5

@looeee thank you, sounds good, to that I will gladly try. I am not sure, it can solve my broblem. To create animations, I have to build a own recorder at a later time. iI try to give an existing model (in my case a face, which has many morphTargets) with different mimic animations. The face should always be present and listen to about 40 different animations, which I can trigger with the button.

I can imagine two ways. the one way copied the animation into the main.js, and the second way get the animation over the loader from outside, instead of looking for them in main.js.

#6

The face should always be present and listen to about 40 different animations, which I can trigger with the button.

This is pretty much exactly the scenario I faced when I when added the download animation function. In my case my model was built in 3DS MAX, and has about 6 different animations (walk, run, jump etc). It’s exported in FBX format which only allows a single animation. So I was given 7 files:

base_pose.fbx (no animation)
run.fbx (model with run animation)
walk.fbx (model with walk animation)
etc.

Then I load each model in the loader, and extract the animation, so I now have:

base_pose.fbx
run.json (run THREE.AnimationClip only, in JSON format)
walk.json
etc

Then I load up the base_pose.fbx and the animations in my main app, create THREE.AnimationActions for each clip and have them play as needed.

#7

wow, that’s exciting. We are rebuilding the character faces of DAZ and others with different tools like Maya, 3DS Max, and c4d. After which we load them into Blender because of the exporter for JSON.

Now they are ready for the animation. And I do that in three.js … yes, this sounds crazy now, but for this I have developed an own animationstool, which transmits the mimic to the model over a camera. This all works very well, but now the recorder is missing and the possibility to play the recorded animations again. so I have to stay with JSON

#8

So this I would like to try. Do you have a small example in connection with horse.js?

#9

Sure - the AnimationLoader.parse function needs to be modified like this:

  parse( json, onLoad ) {

    var tracks = json.tracks.map( t => THREE.KeyframeTrack.parse( t ) );

    var clip = new THREE.AnimationClip( json.name, json.duration, tracks );

    onLoad( clip );

  },

Then it can load an animation clip exported from the loader - as long as it’s just a single clip (the loader can export multiple animations, but you’ll need to modify the parse function again to read them.

#10

Ah ok, many thanks!! I’ll try to do that.

#11

I know I’m responding to an old question… yet it is still relevant. How are you extracting the animations as json ? I know in Blender there used to be a three.js exporter buy it’s now depreciated. Yet you say you load the animations and then extract them. Any tips on how to do that? Thanks…

#12

I see here that the following approach can be used to extract the json… I wonder if I can do this with morph targets as well, that is if they are actually treated like clips.

var jsonObject = animations[ 0 ].toJSON(); // creates a primitive object with basic animation data
var jsonString = JSON.stringify( jsonObject ); // serializes the object as a string

To recreate the AnimationClip later, you’ll need to use var clip = AnimationClip.parse( jsonObject ) .