I'm using three js."three": "0.82.1" and I found that KeyFrameAnimation is not exist more.
I think that something changed in three.js specification.
Could anyone tell me how to handle collada keyframe animation in three js for now?
I've found that KeyFrameAnimation now isn't a part of three.js and in theirs examples they includes KeyFrameAnimation from separate scripts. So I just copied scripts from examples into my project.
Related
I've been trying to set up a decent workflow for Cinema 4D and Three JS. The problem is with animations. So while I do get the models to load in .obj and .dae, animations are not working. I understand there are some limitations to how Cinema exports the file and how Three understands them.
I've also tried to include Blender into the workflow, but it unfortunately distorts the animations, and for some reason does not output working .json when I've imported them from a Cinema project.
Anyone here who figured this one out? Many thanks.
So I managed to get simple PSR-animations working without having to touch Blender, using this Collada converter:
http://rmx.github.io/collada-converter/preview/examples/convert.html
You'll also have to modify the xml tags in the file:
https://superuser.com/questions/148024/how-to-import-mesh-animation-from-cinema4d-into-blender
Unfortunately it does not seem to handle morphs. For that I had to resort to Blender, where I created the model in C4D, imported it in Blender, baked it, then exported it as .json.
I would be very happy if this could be a little bit more simple! : )
You can try my Cinema 4D plugin:
https://github.com/BlackDice/Cinema4D-Threejs-Exporter
Iv'e tried every setting of so many exporters to get this to work, the blacktowers modified exporter for three.js, Inka3d, clara.io and online converters, and trying opening the FBX with animation into blender to no avil.
The FBX has animation and plays on websites such as clara.io and inside of Maya / 3DS Max, however when exporting the .json or .js it doesn't work inside the online editor or offline editors.
Is there any other way to get Animations with skinned bones / joints from Maya to .js / .json that will work inside of Three.Js?
The other answer is inaccurate. It is possible (and, indeed, common) to export animations and bones to three.js-friendly JSON files, from all the major 3d formats (FBX, DAE, etc.). The most robust and foolproof way seems to be through the JSON exporter in Blender - sometimes it still requires some fidgeting with, but the pipeline is mostly functional in 99% percent of the cases I've seen.
Currently (Jan '16) there is no need to use the blacktower exporter; the standard JSON exporter for Blender works just fine.
This is a good tutorial, although current practices (at least my own) differ slightly and you may have to play with various exporter options to make it work for you. If you're still running into problems, please post a clearer description of your specific issue and I'll try to help you get it working.
None of the JSON formats for ThreeJS support keyframe or bone data I understand. Right now I believe on Collada and possibly the MD* file types can be imported into ThreeJS directly with bone and keyframe data.
I'm trying to convert this model to the three.js model format:
http://tf3dm.com/3d-model/ninja-48864.html
Here's what i've tried so far:
I've imported the ms3d file in blender using the default addon. In blender, animations and mesh look correct; however, bones are only rendered as lines. Then I exported it to js using the three.js exporter. This results in a correct mesh, but the animation is not correctly exported. Only bone positions are exported (which are only rarely used in this specific model), NO rotations at all (except for a few identity quaternions).
It seems I have to modify the model in blender somehow, but since I'm a complete novice in 3d modelling, I'm kind of lost. I've also looked at other questions regarding blender+three.js but none of the tips (apply location/rotation/scale etc.) made a difference. It might also be a bug in the three.js exporter.
Can anybody help me do the conversion, one way or the other?
A nice Python utility is available for converting ms3d format to JSON format.
The link is: https://github.com/pyalot/parse-3d-files/blob/master/ms3d/convert.py
You can easily render this JSON model using THREE.JSONLoader() in three.js
Thanks.
I have some JSON files that define geometries, as required by r42 of Three.js's JSONLoader class. The files are version 2 of the format.
Is it feasible to manually update these files between versions?
The first obvious difference is that the file is no longer JavaScript, but actual JSON. This was easy to correct for. However the new format has a metadata section, and thirty minutes of experimentation with is isn't getting me anywhere.
I'm seeing problems because the Geometry object's material properties has an empty materials array. The resulting geometry has multiple parts with different materials, as seen in r42.
Does anyone know how I might manually tweak these .json files to work with r55?
I have no complete knowledge how the internals of the format have changed, but here's a couple of hints:
If you have the source object, the best way would be to re-export/convert. There should now also be more converters and exporters to use if your source format is obscure. If the source is unknown, some Googling might be worth it.
metadata section doesn't matter, it isn't used for anything in the loader.
There is no more Geometry.materials. Instead, JSONLoader's callback returns the loaded materials as a separate parameter to the callback. See Migration Guide (r52->r53) for more on that. In fact, the loader interface has changed also in r46.
git log of some example model files (searching for changes there could be your way forward if you really need to manually migrate) suggests that there might be e.g. UV flipping which would be difficult to fix manually but could be worked around in code. But first you'd need to get something to display on screen.
Try dragging the file into the editor, then do File/Export Geometry.
Here is a fix for drag and drop into the editor. Add this code before the drop event in index.html. I tested this in Chrome ( 24.0.1312.56 ), Safari and Firefox in OSX.
document.addEventListener("dragover", function(e) {
e.preventDefault();
});
#mrdoob's answer worked after a few patches to the editor (here and here.)
However it's worth noting that upgrading the files by hand in a text editor is possible, especially if you don't have any UV coords.
Earlier versions did not use JSON -- they were JavaScript files. The conversion is straightforward.
You can either ignore the metadata section, or else port it from the comments into an object.
If you do have UV coords, then they must be mapped differently (I believe an axis is flipped)
I'm trying to get my Maya animated walk cycle into three.js. I have exported the animation with the model into the .dae format, changed the path to my model in the example. My model is being loaded, but it doesn't do any animation. What could be the problem? My main goal is to create a character who walks with WASD as his walk cycle is being played.
Any suggestions where should I start?
If you are using collada loader, the animation should work without any problem. I have used the collada loader to animate one of my models using three.js, and it works like charm.
A better example to take a cue on how to make it work is webgl_loader_collada_keyframe.html .
Converting to the DAE format and then to JS is rife with problems, and it rarely works for animations. THREE.js comes with an exporter for Maya, but it only works for static models.
I have created an updated version that also supports exporting rigged and animated models. It doesn't require any intermediate steps: it just outputs straight to a .JS file. We have a pull request to integrate the updated exporter with the THREE trunk, but if you want to get the new and improved exporter immediately you can get it from this repository: https://github.com/BlackTowerEntertainment/three.js/tree/maya_animation_exporter. The exporter files are in utils/exporters/maya.
Hope this helps.