« Modèle:Premier cube » : différence entre les versions

De OSWiki
Aller à la navigation Aller à la recherche
 
(38 versions intermédiaires par le même utilisateur non affichées)
Ligne 2 : Ligne 2 :
{{#tree:minExpandLevel=2 |
{{#tree:minExpandLevel=2 |
*Racine web
*Racine web
**css
***style.css
**js
**js
***script.js
***[[#script.js|script.js]]
***[https://raw.githubusercontent.com/mrdoob/three.js/dev/build/three.js three.js]
***[https://raw.githubusercontent.com/mrdoob/three.js/dev/build/three.js three.js]
**index.html
**[[#index.html|index.html]]
}}
}}


Ligne 13 : Ligne 15 :
* Le '''style CSS''' ou le lien vers la  feuille de style .css,
* Le '''style CSS''' ou le lien vers la  feuille de style .css,
* Les liens vers les fichiers '''javascript''' qui sont placés tout deux dans un sous dossier js/ à la racine du site. On peut organiser le site différemment, conserver la fichier three.js dans l'archive Three.js pour simplifier les mises à jours avec git.   
* Les liens vers les fichiers '''javascript''' qui sont placés tout deux dans un sous dossier js/ à la racine du site. On peut organiser le site différemment, conserver la fichier three.js dans l'archive Three.js pour simplifier les mises à jours avec git.   
**Le fichier '''three.js''' de la bibliothèque  Three.js,
**Le fichier '''[https://raw.githubusercontent.com/mrdoob/three.js/dev/build/three.js three.js]''' de la bibliothèque  Three.js,
**Le fichier '''script.js''' où on va écrire le code javascript pour afficher le cube.
**Le fichier '''script.js''' où on va écrire le code javascript pour afficher le cube.


===index.html===
Exemple de code HTML de base pour afficher un cube avec Three.js :
Exemple de code HTML de base pour afficher un cube avec Three.js :
<source lang='html5'>
<syntaxhighlight lang='html5'>
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<html>
<head>
<head>
<meta charset=utf-8>
<meta charset=utf-8>
<title>Ma première application Three.js</title>
                <link rel="stylesheet" href="css/style.css">
<style>
        <title>Ma première application Three.js</title>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
</head>
</head>
<body>
<body>
Ligne 33 : Ligne 33 :
</body>
</body>
</html>
</html>
</source>
</syntaxhighlight>


==Code javascript==
==Code javascript==
===Le code===
===script.js===
{|
{|
|style="width: 50%;"|<source lang = 'javascript'>
|style="width: 50%;"|<syntaxhighlight lang = 'javascript'>
//Création de la Scène
//Créer une Scène
var scene = new THREE.Scene();
var scene = new THREE.Scene();


//Création de la caméra
//Créer une caméra
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );


//Création du renderer
//Créer un renderer
var renderer = new THREE.WebGLRenderer();
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
document.body.appendChild( renderer.domElement );


//Création du cube
//Créer le cube et le placer dans la scène
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
Ligne 59 : Ligne 59 :
camera.position.z = 5;
camera.position.z = 5;


//Fonction pour animer la scène
//Fonction : boucle d'animation
function animate()  
function animate()  
{
{
Ligne 70 : Ligne 70 :
animate();
animate();


</source>
</syntaxhighlight>
| style="width: 50%; "|{{Spécial:IframePage/Cube}}
| style="width: 40%; min-height:100%;"|<iframe key="webgl" path="/cogito/OSWiki/resources/3D/tests_exemples/webgl001/index.php" />
|}
|}


===Analyse du code javascript===
===Analyse du code javascript===
====Scène caméra et renderer====
====Scène caméra et renderer====
* Nous avons déjà vu [[Debuter_avec_three.js#Trois objets pour tout affichage utilisant Three.js|ici]] le code de la '''Scène''', de la '''caméra''' et du '''renderer'''.
* Nous avons déjà vu [[Debuter_avec_three.js#Trois objets pour tout affichage utilisant Three.js|ici]] le code de la '''[[Scenes|Scène]]''', de la '''[[Cameras|caméra]]''' et du '''[[Renderers|renderer]]'''.
* On avance la caméra de 5 unités avec le code :
* On avance la caméra de 5 unités avec le code :
<source lang ='javascript'>
<syntaxhighlight lang ='javascript'>
camera.position.z = 5;
camera.position.z = 5;
</source>
</syntaxhighlight>


====Créer le cube====
====Créer le cube====
* Pour créer un cube on utilise BoxGeometry, c'est un objet qui contient tous les vertices et les faces du cube.  
* Pour créer un cube on utilise [[BoxGeometry]], c'est un objet qui contient tous les vertices et les faces du cube.  
* On a aussi besoin d'un matériel pour colorier le cube. Three.js propose plusieurs matériaux. Pour l'instant on va utiliser MeshBasicMaterial. On attribue une couleur à ce matériel. La couleur marche comme pour le CSS.  
* On a aussi besoin d'un matériel pour colorier le cube. Three.js propose plusieurs [[Materials|matériaux]]. Pour l'instant on va utiliser [[MeshBasicMaterial]]. On attribue une couleur à ce matériel. La couleur marche comme pour le CSS.  
* Le mesh est un objet qui prend une geometrie et qui lui applique un matériel. On ajoute le mesh à la scène.
* Le [[Mesh]] est un objet qui prend une [[Geometries|geometrie]] et qui lui applique un [[Materials|matériel]]. On ajoute le mesh à la [[Scenes|scène]].
* Quand on ajouter simplement un mesh avec scene.add() le mesh et la caméra sont l'un sur l'autre. On déplace légèrement la caméra.
* Quand on ajouter simplement un Mesh avec [[Documentation_Javascript_associée#add()|scene.add()]] le Mesh et la [[Cameras|caméra]] sont l'un sur l'autre. On déplace légèrement la caméra.


====Faire un rendu de la scène====
====Faire un rendu de la scène====
À ce point, si on essaie d'afficher page HTML dans le navigateur, on ne verra rien, parce que rien n'est rendu.  
À ce point, si on essaie d'afficher la page HTML dans le navigateur, on ne verra rien, parce que rien n'est rendu.  


Pour faire cela il faut appeler un render ou une boucle d'animation (une animate loop).  
Pour faire cela il faut appeler un [[WebGLRenderer#render|render]]() ou une boucle d'animation (une animate loop).  
<source lang ='javascript'>
<syntaxhighlight lang ='javascript'>
function animate() {
function animate() {
requestAnimationFrame( animate );
requestAnimationFrame( animate );
Ligne 98 : Ligne 98 :
}
}
animate();
animate();
</source>
</syntaxhighlight>


Cela créer une boucle qui fait que le renderer est dessiné chaque fois que l'écran est rafraîchi (normalement 60 fois par seconde).
Cela créer une boucle qui fait que le renderer est dessiné chaque fois que l'écran est rafraîchi (normalement 60 fois par seconde).


====Animer le cube====
====Animer le cube====
On ajoute ces lignes juste avant renderer.render dans la fonction animate.
On ajoute ces lignes juste avant renderer.render '''dans la fonction animate''' pour définir les [[Définitions#Rotation|rotations]] .
<source lang='javascript'>
<syntaxhighlight lang='javascript'>
cube.rotation.x += 0.1;
cube.rotation.x += 0.1;
cube.rotation.y += 0.1;
cube.rotation.y += 0.1;
</source>
</syntaxhighlight>


Ces lignes seront exécutée 60 fois par seconde pour donner une rotation du cube.  
Ces lignes seront exécutées 60 fois par seconde pour donner une rotation du cube.  


Tout ce qui se déplace dans la scène doit être généré dans la boucle. On peut ajouter des appels de fonction dans la fonction animate pour réduire le nombre de lignes.
Tout ce qui se déplace dans la scène doit être généré dans la boucle. '''On peut ajouter des appels de fonction dans la fonction animate''' pour réduire le nombre de lignes.

Dernière version du 25 mars 2022 à 13:24

Organisation des dossiers et fichiers

Fichier Index.html

C'est le fichier qui sera affiché dans le navigateur. Il contient :

  • Le code HTML de la page,
  • Le style CSS ou le lien vers la feuille de style .css,
  • Les liens vers les fichiers javascript qui sont placés tout deux dans un sous dossier js/ à la racine du site. On peut organiser le site différemment, conserver la fichier three.js dans l'archive Three.js pour simplifier les mises à jours avec git.
    • Le fichier three.js de la bibliothèque Three.js,
    • Le fichier script.js où on va écrire le code javascript pour afficher le cube.

index.html

Exemple de code HTML de base pour afficher un cube avec Three.js : <syntaxhighlight lang='html5'> <!DOCTYPE html> <html> <head> <meta charset=utf-8> 

               <link rel="stylesheet" href="css/style.css">

<title>Ma première application Three.js</title> </head> <body> <script src="js/three.js"></script> <script src="js/script.js"></script> </body> </html> </syntaxhighlight>

Code javascript

script.js

<syntaxhighlight lang = 'javascript'>

//Créer une Scène var scene = new THREE.Scene();

//Créer une caméra var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

//Créer un renderer var renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement );

//Créer le cube et le placer dans la scène var geometry = new THREE.BoxGeometry( 1, 1, 1 ); var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } ); var cube = new THREE.Mesh( geometry, material ); scene.add( cube );

//Positionnement de la caméra camera.position.z = 5;

//Fonction : boucle d'animation function animate() { 

 requestAnimationFrame( animate );
 cube.rotation.x += 0.01;
 cube.rotation.y += 0.01;
 renderer.render( scene, camera );

} //Lancement de l'animation animate();

</syntaxhighlight>

Analyse du code javascript

Scène caméra et renderer

  • Nous avons déjà vu ici le code de la Scène, de la caméra et du renderer.
  • On avance la caméra de 5 unités avec le code :

<syntaxhighlight lang ='javascript'> camera.position.z = 5; </syntaxhighlight>

Créer le cube

  • Pour créer un cube on utilise BoxGeometry, c'est un objet qui contient tous les vertices et les faces du cube.
  • On a aussi besoin d'un matériel pour colorier le cube. Three.js propose plusieurs matériaux. Pour l'instant on va utiliser MeshBasicMaterial. On attribue une couleur à ce matériel. La couleur marche comme pour le CSS.
  • Le Mesh est un objet qui prend une geometrie et qui lui applique un matériel. On ajoute le mesh à la scène.
  • Quand on ajouter simplement un Mesh avec scene.add() le Mesh et la caméra sont l'un sur l'autre. On déplace légèrement la caméra.

Faire un rendu de la scène

À ce point, si on essaie d'afficher la page HTML dans le navigateur, on ne verra rien, parce que rien n'est rendu.

Pour faire cela il faut appeler un render() ou une boucle d'animation (une animate loop). <syntaxhighlight lang ='javascript'> function animate() { requestAnimationFrame( animate ); renderer.render( scene, camera ); } animate(); </syntaxhighlight>

Cela créer une boucle qui fait que le renderer est dessiné chaque fois que l'écran est rafraîchi (normalement 60 fois par seconde).

Animer le cube

On ajoute ces lignes juste avant renderer.render dans la fonction animate pour définir les rotations . <syntaxhighlight lang='javascript'> cube.rotation.x += 0.1; cube.rotation.y += 0.1; </syntaxhighlight>

Ces lignes seront exécutées 60 fois par seconde pour donner une rotation du cube.

Tout ce qui se déplace dans la scène doit être généré dans la boucle. On peut ajouter des appels de fonction dans la fonction animate pour réduire le nombre de lignes.

Récupérée de « https://cogito.no-ip.info/cogito/OSWiki/index.php?title=Modèle:Premier_cube&oldid=4919 »