Skeletal animation using parsed data from COLLADA file in Three.js - animation

I have experimented with the example COLLADA parser colladaloader.js and imported a skeletal animated collada model "Seymour_anim2.dae" from http://collada.org/owl/browse.php?sess=0&parent=131&expand=0&order=name&curview=0 using mrdoob.github.com/three.js/examples/webgl_loader_collada.html and http://mrdoob.github.com/three.js/examples/webgl_animation_skinning.html as an example. The loader seems to parse and store the skeleton structure and some skeletal animation data either in collada.animations or collada.dae.animations. The problem is that I can't get the skeletal animation to work using the methods in the examples.
Now, I'm wondering is there something wrong with the COLLADA parser, or are there some other methods/tricks in Three.js that could be used to play the skeletal animation of my model? I'd love to hear if you have any ideas how this could be done neatly in Three.js or is this even possible yet.
Edit: I have now also tested the model with GLGE framework and it loads, renders and animates it correctly. However, it would be very good to have skeletal animation for COLLADA model in Three.js because developing with GLGE is too time consuming and troublesome and GLGE is quite inactive project compared to Three.js. Skeletal animations are important for increasing immersion in a virtual world.

I've myself given up on Collada and went on using the included OBJ loader.
But halfway through I've found one thing that might be worth testing out.
There seems to be an alternative Collada loader, here: github ColladaLoader2.coffee
Hopefully it works somewhat better. Please let me know :)

Related

ThreeJs and Blender model without texture

I'm new to both Blender and ThreeJs and searched a lot before asking. I created a model with Blender and esported it as .dae so I can load it in the html canvas. The problem is that only the model is loaded and not the textures. I'm doing something wrong or it's the loader that somehow causes the problem?
Here is the sample:
http://provasitimek.herobo.com/firstImport2.html
and the code:
https://github.com/MarcinKwiatkowski1988/learningThreeJs/tree/master/ThreeJs_and_blender
PS. the blender version is 2.70 (so maybe the problem lays here?)
PS2: So, after many attempts, these are my conclusions:
to get the color of the object, you have to choose the Blender renderer and not Cycles renderer
the export to the file .dae is not realy significant, should working with all options (or at least I didn't find any differences between files exported with different options)
if you use Blender renderer and any basic materials (Basic, Lambert, Phong) you get only the color on the object rendered in threeJs: so, for example, if you apply a trasparency to you object on blender, you will not see it on the rendered object on threeJs
with my current level (i just started to learn threeJs and blender 2 weeks ago) this is as far as I can help. Hope someone with higher skills like #mrdoob would figure out what the problem is
THREE.js does not pair models and textures until you actually make a mesh. Export The model and texture separately, load them separately and call
new THREE.Mesh(blenderGeometry,blenderTexure)

Three.js Skeletal Animation Export Issue

I've been working with an animator to help with my game. The animations all work fine using morph targets, but the file size just gets way too large. Skeletal animations are the answer. We've spent a week working to get the animations exported from blender correctly.
After reading many many articles we were able to get basic animations working correctly. I make sure to set the armature to rest pose and export on the first frame and all that, but the more complicated animations are off.
You can see in this example here (click to cycle animations):
http://www.titansoftime.com/beta/animation2.html
My animator said the problems are related to bone constraints using his controllers. He said his technique is called "Inverse Kinematics".
Anyone have any ideas?
I have found the answer. For one you can not scale the geometry in the json loader (however you can scale the mesh object once created).
The main thing is that my animator was using inverse kinematics, which apparently three.js does not play nice with.

3d models animation in webgl

I am new to webgl and am trying to animate objects, not simply rotating/moving them but complex motions. For example how can we make movements of hand/leg in a human model(as if the person is walking)?Right now I am using Three.js to import the OBJ model.
I used Blender 2.64 and Three.js exporter successfully to load animated model in the scene. Here is nice tutorial that explains everything from animation in Blender to exporting to Three.js (although it uses older version of exporter so the things you make won't work in their test application).
http://www.kadrmasconcepts.com/blog/2012/01/24/from-blender-to-threefab-exporting-three-js-morph-animations/

Animating Blender collada export in three.js

http://www.diviniaro.com/WGClient/js/three.js/examples/webgl_loader_collada_Gate.html
After trying several things we're just left at a loss to get the exported animation from blender to load. I have noticed a few differences from the example "monster.dae" file in the collada loader. No matter what we've tried the animation just never seems to start.
Other opinions and a second set of knowledgeable eyes would be appreciated. The animations play fine in blender. There are 31 keyframes. There are also no errors on the console.
EDIT:
I think that this issue pertains to these issues with the three.js collada loader.
https://github.com/mrdoob/three.js/issues/2963

Picking problems with collada loaded models in ThreeJS

I'm experiencing picking problems when loading a collada model in ThreeJS. The picking example for cubes works fine. Loading a collada model works as well.
However it seems that for picking collada object I need to pick well above the 3D object. As picking works for the cube I cannot figure out why it is not working for collada objects (export from SketchUp). Does anyone have a good example where it is possible to load a collada model and pick the individual objects? Thanks in advance.

Resources