HTML5

Question

belgeseli bir 3D insan Vcom3D'nin Gesture Builder'ına çok benzer bir şekilde açık bir işaret dili oluşturucu geliştiricisi geliştiriyorum - this page'un altındaki ürün tanıtımına bakın. Temel amaç, bu uygulamanın bir eklentiyi veya tarayıcı eklentisini yüklemeye gerek kalmadan tüm önemli tarayıcılarda çalışmasını sağlamaktır. Ben bir sürü googled ve kontrol

:

Sadece Vcom3D en Hareketle Builder'dan avatar olarak, kontrol edilebilir kol ve parmaklarını olurdu bir eklemli insan karakterini oluşturmanın en basit yolu, bulmakta sorun yaşıyorum bir 3D modeli geliştirmeye yardımcı olabilecek MakeHuman ve Blender gibi birçok 3D insan modeli yaratıcısı/manipülatörü, ancak HTML5 ortamında nasıl kullanabileceğimi bilmiyorum.

Herhangi bir fikrin var mı? Çok minnettar olurum!

Düzenleme: Chico3001, Javascript ve HTML5 öğelerini kullanarak animasyonun nasıl uygulanacağını açıklayan gerçekten iyi bir yanıt verdi. Ancak, benim asıl sorunum, böyle animasyonlar oluşturmak için kullanabileceğim nispeten iyi görünümlü spritelar yaratmaktır.

Answer 1

gibi animasyonlar yapmak için jquery eklentileri kullanabilirsiniz onlara

değiştirin: "? Sen bir uzay gemisi inşa etmek istiyor tabii ama bir bisiklet inşa etmek nasıl bilmiyorum"

Sprite'ların size çok yardımcı olacağını düşünmüyorum. Örnek ekran görüntüsü, nesneleri döndürmek istediğinizi ve aynı zamanda, gölgelendirme ve diğer güzel ekstraları içeren bir 3D kavramı vermek istediğinizi gösterir. Biri bana zaman (zaman bir sürü) satın alırdım ve ben bir 3D jest oluşturucu inşa etmek görevi olsaydı

, ben böyle şeylere tüm işimi dayandırmak istiyorum:

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

bazı eylemleri

html tespit ederken daha sonra, animasyonlar oluşturmak için tuval öğelerini ve javascript kullanmak görüntüleri değiştirmeniz gerekir

:

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

Bu örnek yükler Bir 2 görüntü yatay hareketli ve görüntü üzerinde hareket ettirdiğinizde ilk yarısından ikinci yarısına kadar değişir, uygulamanız için birçok sprite ve o zaman da ben yorumu beğenmek http://spritely.net/