I have two character meshes, both with identical skeletons. I’m wanting to import another .glb file containing animations for these characters, and then apply these animations to each character. I made a post on the Babylinjs forum, but the one recommended solution doesn't seem to work.
Here is my post in the Babylonjs forum: https://forum.babylonjs.com/t/how-to-import-animation-groups-then-assign-them-to-different-meshes/36187
And here is the playground that I'm currently struggling with: https://playground.babylonjs.com/#AHQEIB#1825
Related
My goal is to make a ROBLOX like customization system for my game, where a user can choose between hundreds of pieces of clothing and accessories for their avatar. Now, I would like to use Mixamo to animate my character, but Mixamo needs a fully boned rig to download the animations. Now that's a problem: I need Blender to bone the rig, but each rig will be different since the user is creating his own character, and if I had all the rigs pre-made, there would be literally millions of combinations of characters!
The alternative, I'm thinking, is to use Tween.js, but that's a really bad way since it'll take a ton of work and time just to get a single animation, and it still won't be as good as Mixamo.
At this point, I'm sure you have no idea what I'm talking about, so here's an image to describe my issue:
I hope the diagram made my problem more clear. Below I've listed some of the possibilities that could potentially solve this problem, but then again, not sure.
Maybe you can download an animation from Mixamo without a specified rig to it, so you can apply it to any character?
Maybe I just animate the base rig and then apply the textures for all the body parts (so instead of downloading all the rig possibilities, I just download all of the clothing textures)?
Does anyone know how to do this?
For anyone else who was wondering the same thing:
You should first download the desired animation from Mixamo on the base model (without the customizations). Once you load the animation into three.js, you should be able to see a group, which includes the components from which the model was made. You can then manually apply as many textures as you want to the desired parts of the rig. So, your model will move normally (like the animation), while having your character exactly how you or the user wants it.
I am making my first steps using JavaScript and playing with Three.js too.
I am learning how to export and load a Blender animation to Three.js and to make it I am using this example from the Three.js website: http://threejs.org/examples/#webgl_morphtargets_horse
I made a Blender animation (http://s000.tinyupload.com/?file_id=07429365581548704592) and when I export it an I load it to Three.js using the same code it doesn't run.
Do you know why I can't see the animation? I don't know if it is a limitation of the exporter or if it is a problem of my animation.
Thank you
Having spent many hours trying to get Blender animations working with the current release of three.js it is my conclusion that it is functionally if not completely impossible.
I posted a question here about this awhile back. I ended up having to answer my own question. I cover the convolutions you have to go through to get one of the examples (the simplest) working from the .blend file supplied with three.js itself.
The official examples and documentation recommend using ObjectLoader to load exports from Blender, but this doesn't work at all with the current three.js animation system. The new animation stuff uses skinned meshes, and if you look at the ObjectLoader source (src/loaders/ObjectLoader.js) you'll see it doesn't have any logic which uses THREE.SkinnedMesh. The new animation mixer, THREE.AnimationMixer, is not covered in the official three.js documentation.
Further, the Blender exporter is, depending on how you look at it, either very flaky or just plain broken. I go into greater detail about this in the question I linked above, but for example the exporter changes the state of the model: you have to go into pose mode, select all your bones, Alt-G and Alt-R to reset them to rest mode, then select the mesh and go into object mode before you do an export, and the export will transform all the bones back, so if you just export and then immediately export again, for example, you'll get inconsistent results.
From all of this I conclude that importing Blender animations into three.js is effectively if not completely broken, so if you're working on a project for immediate implementation you need to either change your pipeline to not use Blender or change the render end to not use three.js.
I'm trying to animate a mesh via it's skeleton on a webpage using a BVH. Here's the overall process of what I'm trying to do:
Make a character using MakeHuman and export (mhx format? seems to work best).
Import the character into Blender.
Retarget to a BVH using the MakeWalk plugin for Blender.
Export the character to json using the Three.js exporter.
Export the BVH (not sure if this is necessary, but I figured I might have better luck getting the BVH to match up with the skeleton after retargeting)
Load the character into a web page using Three.js
Animate the character using a BVH.
The animation looks great in blender. I'm trying to use the JavaScript BVH viewer code from here modified to use the skeleton created by MakeHuman instead of it creating a skeleton from the BVH data. Whenever I try to animate the character, it gets very distorted.
Here's the desired result (more or less) rendered from Blender:
And this is what is happening on the webpage:
As you can see, it's getting totally messed up. I also had to zoom way out in order to see the whole image.
I've tried using different rigs, different file formats, resaving the BVH after retargeting, you name it. I also tried to follow the example here (scroll down to see the instructions), but it says to delete the armature modifiers and when I do that, no bones get exported and Three.js throws an error.
I am at a loss. Is there an up-to-date example somewhere that shows how to do what I'm trying to do?
The same thing happened to me when I exported from Blender to Three.js.
The solution that worked for me was (after step 3 in your list) to ensure in Blender that there were no object rotations still that hadnt been applied (ctrl-a). In other word the skeleton and the mesh must have no additional rotations or scaling.
I was able to export single object (box.json) and scene (box2.json) form Blender using io_three.I also managed to load single object (box.json) with textures using JSONLoader() (modelWithTexture.html).
My objective is to load whole scene with all textured objects, lights and camera to three.js.Till now I managed to load scene with objects and lights, but without textures using ObjectLoader() (scene_noTextures.html) and I'm stuck.
All files, to which I'm referring above, plus .blend file, that I'm using in this example you will find here:
https://drive.google.com/folderview?id=0B1kP1cNoYxYCfkszUUNBeloxaUY1NnlsbURuRi1ENFhwc1ZfVllIMFQ5SkcyRllZTC05TVU&usp=sharing
I found the answer to similar question here:
Is three.js ObjectLoader capable of loading textures?
but In github dev branch is vast amount of different files that I have no idea how to use.
Please help me improve my code so I could complete my objective.(it's not actually my code, I just copied and pasted pieces of code from tutorials, basing on what I've learnt so far)
Thank You.
Thank You all for attention.
I managed to solve this myself:
All I needed to do is change in "scene_noTextuers.html" setClearColorHex() to setClearColor() and switch my old three.min.js file with new, that I got from here:
https://github.com/mrdoob/three.js/tree/master/build
I came across many demos regarding skinning in Three.js however I cannot understand that does the model that we import, itself should be animating one like, it is already made animating in modeling software and you just import the dummy model and manipulate it ?
If you look at this exmaple: http://threejs.org/examples/webgl_morphnormals.html
Does the model here flamingo.js, already made animating and then exported to js format and the javascript is just playing through the frames?
Please can any one elaborate me the concept here, i am brand new to all this 3D world and WebGl stuffs I just can't figure out how can I animate any model that is imported in js format.
Basically you want your model animated before exporting. There is not really a wrong or a right way about doing this.
Probably the easiest way is through Morph Target Animation. The other method is called skinning, an example of which you can find here.
Most of the 3-D software supports exporting for both formats. If you are not sure that your model is properly exported just check the three js examples.
For instance here is what a morphs animated model looks like: animated horse.
In my personal example I've animated the model through pure javascript rotation and move effects.