HTML5의 관절 형 3D 인간

Question

오픈 수화 제스처 작성기를 개발 중입니다. Vcom3D의 제스처 빌더와 매우 유사합니다. this page의 제품 데모를 참조하십시오.

주요 목표는 플러그인 또는 브라우저 부가 기능을 설치할 필요없이 모든 주요 브라우저에서이 앱을 작동시키는 것입니다. 내가 많이 봤 및 확인

:

난 그냥 Vcom3D의 제스처 빌더에서 아바타로, 제어 팔과 손가락을했을 관절 인간의 캐릭터를 만들 수있는 간단한 방법을 찾는 데 문제가 MakeHuman과 Blender와 같이 3D 모델을 개발하는 데 도움이 될 수있는 많은 3D 인간 모델 제작자/조작원이 있지만 HTML5 환경에서 어떻게 사용할 수 있는지 잘 모릅니다.

의견이 있으십니까? 나는 매우 감사 할 것입니다!

편집 : Chico3001은 Javascript 및 HTML5 요소를 사용하여 애니메이션을 구현하는 방법을 설명하는 정말 좋은 답변을 제공했습니다. 그러나, 내 진짜 문제는 어떻게 그런 애니메이션을 만드는 데 사용할 수있는 상대적으로 좋은 찾고 스프라이트를 만드는 것입니다?

Answer 1

같은 애니메이션을 만들기 위해 JQuery와 플러그인을 사용할 수 있습니다 그들에게

을 변경 : "당신은 우주선을 구축하려는 뜻을하지만, 자전거를 구축하는 방법을 모른다"

저는 스프라이트가 당신을 아주 멀리 도울 것이라고 생각하지 않습니다. 예제 스크린 샷은 객체를 회전시키고 음영 및 기타 멋진 추가 기능이 포함 된 3D 개념을 제공하고자한다고 나타냅니다. 누군가가 나에게 시간 (많은 시간을) 사서와 나는 3D 제스처 빌더를 구축 할 수있는 일이 있다면

, 나는 그런 것들에 내 모든 작업을 기반으로합니다 :

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

Answer 2

당신은 일부 작업

을

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); 
     } 
    }); 
}); 

이 예제로드 2 개의 이미지 수평 스프라이트를 가지고 있고 이미지 위로 움직이면 상반부에서 후반부로 바뀌고, 애플리케이션에서는 많은 스프라이트를로드해야하며 당신도 내가 코멘트 좋아 http://spritely.net/