Accessing and use Collada animation data in three,js

Questions
,
1

Hello,

  1. I created a textured and animated test model in Cinema 4D. ( A basic cube rotating for 1 second - 25 frames).
  2. Successfully imported the DAE file into three.js.
  3. Model geometry renders perfectly.
  4. Baked textures render perfectly.
  5. Animation… stuck.

I’ve researched multiple resources in an attempt to access and use the animation but was unsuccessful. I’ve found it difficult trying to work off of the three.js docs too. I need help to code the animation part in three.js.
I have the HTML file and the Collada file available for perusal but not sure whether to post here in this window or send files directly somehow, any suggestion?

2

Please share the Collada file in this thread.

4

cubeTest copy.dae.zip (2.2 KB)

5

And my HTML code so thus far:

1-FirstScene copy.html.zip (2.0 KB)

6

Pure keyframe animations are not supported by ColladaLoader. Try to convert your file to glTF and load it with GLTFLoader instead. You can use the following tool for the conversion.

7

COLLADA2GLTF isn’t working for me on this one (I get an error — worth filing a bug, I suspect) but loading the DAE into Blender, setting playback range to 0-20, and exporting does give working animation.

Filed: https://github.com/KhronosGroup/COLLADA2GLTF/issues/188

8

The issue using COLLADA2GLTF’s online hosted version was due to a missing texture in the DAE file. Running COLLADA2GLTF locally should work fine.

9

Thanks guys I’m on Mac only at this stage and I notice glTF 2.2 Mac support is still in dev, so failing conversion of my original keyframe based Collada file to glTF, whats the next best option? I noticed Don mentioned the online converter and I did go to that site and spent a fair amount of time trying it, the model would upload and appear correctly in the screen but nothing else would happen, ie no glTF model was returned.
Unless I’ve missed something it may be easier to continue learning Blender and export straight from there for models requiring animation in three.js? Any suggestions?

10

Do you refer to COLLADA2GLTF? It’s a little bit unfortunate that there are no compiled binaries for Mac. When I try to build the project on macOS, make reports several build errors :frowning_face:

Working with Blender might give you more flexibility. You can use the following tool to export your assets from Blender to glTF.

11

Yes correct COLLADA2GLTF.
Yes I will do a Blender test. If people are getting working animations from the Blender export method it will be a viable solution to the animation problem.
Thank you for the Blender glTF tool suggestion.

12

The glTF Blender exporter or FBX2GLTF do support animation. COLLADA2GLTF MacOS support is being worked on.

13

Hi,

Correct me if i am wrong, but Blender export doesn’t support multiple animations … in 0 format.
neither collada, neither GLTF

I am a bit disappointed… how to work with character ? :frowning:

thx

14

@merf23 you can use this in-progress branch of the glTF Blender Exporter that supports multiple animations, or Facebook’s FBX2GLTF. I believe THREE.FBXLoader also supports multiple animations. COLLADA2GLTF currently does not.