Geek Answers Handbook

Articulated 3D Man in HTML5

I am developing an open-gesture gesture designer, in some ways very similar to the Vcom3D Gesture Builder - see the product demo at the bottom of this page .

The main goal is to make this application work in all major browsers without the need to install add-ons for the plugin or browsers.

I'm having trouble finding the easiest way to create an articulated human character that has controlled arms and fingers, just like the avatar from Vcom3D Gesture Builder:

enter image description here

I searched googled a lot and tested many creators / manipulators of 3D human models, such as MakeHuman and Blender, which may be useful for developing a 3D model, but I have no idea how I can use it in an HTML5 environment.

Do you have any ideas? I would be very grateful!

Edit: Chico3001 gave a really good answer explaining how to implement animations using Javascript and HTML5 elements. However, my real problem is how to create relatively beautiful sprites that I could use to create such animations?

+7
html5 animation 3d 3d-modeling avatar
source share
2 answers

I like the comment: "You mean, you want to build a spaceship, but don’t know how to build a bike?"

I don’t think sprites will help you very far. The screenshot of your example shows that you want to rotate objects, and also want to give it a 3D concept, which includes shading and other nice additions.

If someone buys me time (a lot of time), and I had the task of building a 3D gesture engine, I would base all my work on such things:

http://de.wikipedia.org/wiki/Scalable_Vector_Graphics

http://www.lutanho.net/svgvml3d/

http://www.svgopen.org/2010/papers/58-WebGL__SVG/

http://javascript.open-libraries.com/multimedia/3d/svg-vml-3d-javscript-libraries/

http://debeissat.nicolas.free.fr/svg3d.php

+3
source share

You need to use canvas and javascript elements to create animations, and then change the images when some actions are detected.

HTML:

 <canvas id="#test" data-url="...url..."></canvas>

JQuery

 $(document).ready(function(){ $('#test').each(function(index, element){ var obj = $(this); var canvas = $(this)[0]; var context = element.getContext('2d'); var img = new Image(); img.src = $(this).data('url'); img.onload = function () { context.drawImage(img, 0, 0); }; $(this).on({ "mouseover" : function() { canvas.width = canvas.width; context.drawImage(img, img.width / 2,0,img.width / 2,img.height,0,0,img.width / 2,img.height); }, "mouseout" : function() { canvas.width = canvas.width; context.drawImage(img, 0, 0); } }); });

In this example, a 2 horizontal sprite of the image is loaded, and when you move the image that it changes from the first half to the second half, for your application you need to download a lot of sprites, and then change them

you can also use jquery plugins to create animations like http://spritely.net/

+3
source share

More articles:


All Articles