Applying the Morph Target Human example to Animated Collada files

This morph target human example is quite interesting.

I created a 3d dance experience a few months back and to add an obesity slider would be quite fun/bizarre.

Does anyone know how one may approach such challenge? dddance party is using animated collada files. I just started 3d/threejs in Nov, so I am quite new to all this…

Thanks x100

You have to prepare the morph targets in a content creation tool like Blender for each model. The problem is that ColladaLoader does not support loading morph targets. I suggest you switch to glTF and GLTFLoader which will also reduce the startup time of your app. glTF produces smaller files than Collada and is way faster to parse. More information about glTF usage in three.js right here.

https://threejs.org/docs/#manual/introduction/Loading-3D-models

BTW: How have you implemented the bounding box of your skinned meshes? Is it a real visualized AABB?

Thanks! Sounds like I need to look into glTF. Are there any examples with animated glTF files that are also doing morphing?

“How have you implemented the bounding box of your skinned meshes?” << Created a boxhelped on the skeletonhelper and updated size manually every frame -_-

AFAIK, not in the three.js repository. But the Blender exporter should be able to export both morph target and skeleton animations.

Are you updating the size based on the current dimensions of the model? That means you perform the vertex transformations based on the skeleton/bones in JavaScript per frame and then calculate the current AABB. If so, it would be great if you can share your code as a live example or PR. Some users lately asked for such a functionality. Read the following topic for more informations.

Added a response in that thread

1 Like

Thanks for sharing your code! :+1: