# Applications > Dveloppement 2D, 3D et Jeux > Moteurs de jeux vido >  Blend4web la 3d via navigateur

## pierre.E

Tuto rapide pour utiliser  blend4web
Un rapide tuto pour utiliser le framework blend4web qui utilise le moteur de rendu 3d webgl
Intrt : crer une animation 3d visible sur le navigateur sans installer de plug in
http://blend4web.pagesperso-orange.fr/
Les moins : sur appareil mobile ca rame
Important : pour des raisons de same-origin policy  il faut utiliser firefox  pour tester votre animation sans utiliser le projectmanager et sans la mettre en ligne ( fonctionne pas avec chrome et ie si pas en ligne)
*1/installation*
a)installer blender et se familiariser avec blender( compter un mois pour un dbutant)
https://www.blender.org/
b) installer blend4web et son  plug in  dans blender
https://www.blend4web.com/en/services/doc/
Si vous avez russi cette tape dans blender vous devriez voir dans blender
Blend4web dans onglet engine en haut au milieu

Un fast preview dans la fentre 3d ( le petit cube  gauche) qui est intressant car il permet de changer
 en live matriel et dautres paramtres et voir les diffrentes animations prsentes

Et dans file export  le choix  blend4web(.json) ou blend4web(.html)

c) il existe un gestionnaire de projet quon peut lancer via  la fentre properties onglet render ( appareil photo)

*2/contenu dun projet*
Votre dossier va contenir  les fichiers suivant qu on trouve dans rpertoire de blend4web( petit jeux froid chaud  je vous laisse les chercher)) cest cette arborescence qu il faudra mettre sur votre serveur web
*uranium.js*
*uranium.js.mem*  uranium gre le moteur physique donc optionnel si pas utilisation moteur physique
*b4w.min.js* le moteur webgl  de b4w
la page* index.html* qui ne contient qu un iframe
<div id="container" style="width: 560px; height: 300px;background-color:powderblue ;margin:auto">
<iframe allowfullscreen src="webplayer.html?load=assets/mascene.json&show_fps&no_social" width="100%" height="100%">
</iframe> 

Pour les options voir tutoblend4web

*webplayer.html* (la page qui contient div canvas 3d et div boutons)(ps rien ne vous interdit de rajouter canvas 2d pour superposer un canvas 2d au 3d)
*webplayer.css* (ou le et webplayer.min.css  si vous souhaitez rien modifier)

*webplayer.js* (il y a le webplayer.min.js mais bon pas utilisable si on fait modification)

un dossier *assets*  qui contiendra
Dossier *textures*
Dossier *sons*
et les 2 fichiers 
*mascene.json* et *mascene.bin* obtenus en exportant depuis blender
un dossier  *blender*  qui contiendra *mascene.blend* qui nest pas  mettre en ligne donc ne pas l uploader  sur le serveur web.
*3/utilisation du project manager*  qui est un serveur web
On le lance  partir de blender via  la fentre properties onglet render ( appareil photo)
on cre un nouveau projet   qui va crer un dossier assets blender et build dans lesquels vous copiez  les fichiers dcris ci-dessus
on peut via le projectmanager editer fichier b4w.project


```

```

et les autres
et quand on a fini on peut lancer un deploy  qui cre un .zip mais il faut le dezipper et rajouter  fichier pour avoir arborescense du 2/
il ne vous reste plus qu a uploader sur votre serveurweb
*3/animation via javascripts*( un langage pour les gouverner tous ::P: )
Pour animer votre scne vous avez le choix dutiliser les  logic node  ou animations  de blender  soit  en javascripts  et utiliser les api mis  disposition par blend4web
https://www.blend4web.com/api_doc/index.html
mon script est crit   la suite dans le  webplayer.js


```

```

Et appeler  la fin de 


```

```

*
4/une fois votre animation fini* il ne vous reste plus qua l uploader sur votre serveur web en conservant larborescence via ftpzilla ou autre.
Ps : pour tester sans utiliser le project manager  et  sans mettre en ligne  jutilise firefox car il y a une histoire de crosssite  policie et a ne marche pas avec chrome ou ie, vous aurez droit 

*5/le rsultat :*
http://blend4web.pagesperso-orange.fr/
*En conclusion*
Pour un dbutant il faut compter un mois pour apprendre  utiliser blender et  1 mois  pour sen sortir avec les api blend4web ( attention exporter en webgl apporte des limitations par rapport  blender donc toujours tester votre scne).jai personnellement assez galr avec les animations et le nla editor.
*Annexe : quelques bons tutos*
http://blenderlounge.fr/blend4web-2-...-avec-blender/
https://www.youtube.com/channel/UCvQ..._Z1uewYQkYrzlA

difficults rencontres:
pour les animations et les baked vertices animations  car b4w produit deux animations et pour avoir les noms  pour les appeler via le script il faut utiliser le fastviewer

intrt par rapport a unity3d: ben je sais pas car j utilise pas unity pour le moment  ::mrgreen::

----------


## pierre.E

http://blend4web.pagesperso-orange.f...&amp;no_social

----------


## pierre.E

ps explication pour le 4/
due to browsers' same origin policy security restrictions, loading from a file system will fail with a security exception. 
How_to_run_things_locally

----------


## pierre.E

bon maintenant j'utilise verge3d
verge3d a t cre par des programmeurs de blende4web qui ont quitt blende4web (demandez pas  je sais pas pourquoi  ::mrgreen:: )
je suis pass  verge3d car a fonctionne avec blender 2.8 alors que pour le moment blende4web prend pas en charge blender 2.8.
verge3d et le verge3d.js est bas sur threejs et utilise webgl donc pas besoin plug in dans navigateur. le learning curve(temps d'apprentissage) est rapide ( enfin il faut comprendre que certains trucs de blender marche pas dans verge3d : eg  specular ,follow curve.....)
sinon le principe est le mme de blender on lance un serveur web  et ont crer une nouvelle application un peu comme blende4web avec en bonus on peut publier dans le cloud ( mais uniquement 30 jours  pour version gratuite) et pour l'interface c'est du html css adoss  du javascript.
ci joint le systme solaire modlis dans blender 2.8



https://cdn.soft8soft.com/AROAJSY2GO...ire_final.html

----------


## Piraaate

> URL="https://cdn.soft8soft.com/AROAJSY2GOEHMOFUVPIOE:d33bbd217b/applications/systeme_solaire_final/systeme_solaire_final.html"]https://cdn.soft8soft.com/AROAJSY2GOEHMOFUVPIOE:d33bbd217b/applications/systeme_solaire_final/systeme_solaire_final.html[/URL]


Perso l'crou tourne jusqu' 100%, puis continue de tourner mais rien d'autre ne se passe  ::?: 
Je suis sous Chrome 73, Windows 10

EDIT: la page http://blend4web.pagesperso-orange.fr marche

----------


## LittleWhite

J'ai charg la page... y a des objets dans le soleil  ::D: 
Sinon, c'est sympa, le systme solaire  ::):

----------


## pierre.E

> Perso l'crou tourne jusqu' 100%, puis continue de tourner mais rien d'autre ne se passe 
> Je suis sous Chrome 73, Windows 10


Bonjour effectivement sous chrome a bloc  100% il y a du rouge dans la console je vais signaler le probleme aux dveloppeurs 
(pour moi ca fonctionne tres bien dans firefox et edge)

bon ca provenait d'un "baking" de "curve" qui s'etait mal pass  le probleme  t corrig ::D:

----------


## pierre.E

::P: 

systeme_solaire.html
ah flute j'ai droit  erreur  ::?: 



> Blocage du chargement du contenu mixte actif (mixed active content)  http://vo.imcce.fr/webservices/miria...lane=2&-teph=1


bon la  1er vue ca marche
http://blend4web.pagesperso-orange.f...e_solaire.html
si quelqu un peut m expliquer pourquoi ca marche  dans un lien  et pas dans l'autre je suis preneur
quand j'integre dans un iframe ca marche plus non plus ::(: 
(pour l iframe ca doit venir de https://developer.mozilla.org/fr/docs/Web/HTTP/CORS



> v3d.js:1 DOMException: Blocked a frame with origin "http://blend4web.pagesperso-orange.fr" from accessing a cross-origin frame.
>     at init (http://blend4web.pagesperso-orange.f...aire.js:224:36)
>     at runCode (http://blend4web.pagesperso-orange.f...olaire.js:24:9)
>     at http://blend4web.pagesperso-orange.f...olaire.js:19:9
>     at i.renderer._resizeCb (http://blend4web.pagesperso-orange.f...d.js:1:1003007)
>     at http://blend4web.pagesperso-orange.f...3d.js:1:955278
>     at http://blend4web.pagesperso-orange.f...3d.js:1:968248

----------


## pierre.E

bon j'ai rsolu le probleme pour l'iframe ::P: 
 en crant une page systeme_solaire_iframe dans laquelle j'ai juste rajout
document.domaine = 'http://monsiteouestliframe.io';

par contre apres j'ai du supprimer le parent dans appel variable parent.mavariable  donc mavariable

pour le Blocage du chargement du contenu mixte actif (mixed active content)  http://vo.imcce.fr/webservices/miria...lane=2&-teph=1 
cela provient que le site n est pas https


> non-secure protocol, which conflicts with HTTPS-enabled Verge3D Network.

----------


## pierre.E

systeme_solaire.html ::P:

----------

