https://youtu.be/azWR6mpBs64 found this video but cant understand how it works. Perhaps i dont have enough knowlege for this but very insteresteed to understand. If someone could explain or show a code example it will be so nice
1 Like
The second shape is hilarious, since it looks like a sign you can do with your hand.
There are several ways to implement this, but i’d simply say it requires more knowledge before going into detals that might require just more explanation.
The easiest approach would create one geometry with enough faces for all shapes, since it’s only very few faces this could be even easily implement in JS. Having all prefabed shapes you would just tween the vertices positions from the last shape to the new, while faces wich aren’t required would scale down and or fade out. Same for the colors then.
1 Like
Here is an example of something I made a few years ago: http://games.clarklavery.com/meshMorpher/index.html
Move your cursor left/right over the page in order to make it work.
The 3d artist started with the same sphere for each model, and by only moving the vertices around, produced the four models. Then you load up the models and use linear interpolation for each vertex of the mesh to position in somewhere in between the first and second model. The example does a bit more complex math than just linear interpolation by adding some random offsets, but should work for any obj models with the same vertex/face counts.
6 Likes
You can skip through a youtube video frame by frame using the , . keys.
As far as I can see, all they are doing is using a bit of sleight of hand - they rotate quickly, shrink a bit, make the shape a bit transparent and then replace it with a different shape.
3 Likes
that’s cool. Can u please show me the code?
The code is available by viewing the source of the html:
http://games.clarklavery.com/meshMorpher/main.js
http://games.clarklavery.com/meshMorpher/morpher.js
2 Likes
@calrk This is a very cool example.
@CyrlyDog As I mentioned on SO (warning: Russian segment), we also have .morphTargets. Just a concept:
https://jsfiddle.net/prisoner849/1np2uc4v/
2 Likes
This is an ooga booga technique dude. LOL but I guess this is the simplest way to do this but if you want a more interactivity on the 3D model, I would use three js for this.
Example broke (everyone should always use version numbers, I need to find my old examples in the forums and fix them).
1 Like
@trusktr
It’s outdated and relies on Geometry, so, even if I restore it, it’s totally irrelevant for latest releases.
But, if somebody wants to see how it works, @hofk did great job, saved it on his website
morphTargetsTween (r93)
@prisoner849 Updated with version numbers (still old Three.js, but at least working, someone can get the idea and update to latest API):
1 Like