La Scène

De OSWiki
Aller à la navigation Aller à la recherche

La scène

Définition

La Scène est l'espace 3D dans lequel seront placés les objets, les caméras et l'éclairage. Elle peut avoir n'importe quelles dimensions, tout dépend des besoins.

Créer une nouvelle scène

Code pour créer une nouvelle scène avec Three.js

<source lang ='javascript'> 

 var scene = new THREE.Scene();

</source>

La caméra et le renderer

Description

Une caméras (perspective) simule le comportement d'une caméra pour film dans la vie réelle. La position de la caméra et son orientation détermineront les parties de la scène qui seront rendues sur l'écran.

Quand vous configurez la caméra il faut définir 4 paramètres qui décrivent l'espace 3D qui sera capturé par la caméra :

  • un champs de vue vertical (fov)  : il définit la distance verticale que la caméra peut capturer.
  • l'aspect ratio : c'est l'aspect ratio utilisé pour créer le champs de vue horizontal basé sur la vertical,
  • le plan rapproché : c'est le plan le plus proche dans la vue, ou la vue de la caméra commence,
  • le plan éloigné : c'est le plan le plus éloigné dans la vue, ou la vue de la caméra se termine.

Les objets de l'espace 3D seront affichés sur l'écran comme ils apparaissent réellement. On parle de rendu. Il faut ajouter un objet renderers de three.js qui va contenir l'image de la caméra.

Code de base

<source lang ='javascript'> //Ajouter une caméra --> THREE.PerspectiveCamera(fov, aspect, near, far) var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000);

//Placer la caméra à z=100 camera.position.z = 100;

//Ajouter un renderer et définir de sa taille var renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight );

//Ajouter l'élement renderer au DOM (dans la page) document.body.appendChild( renderer.domElement ); </source>

L'éclairage de la scène

Description

On peut imaginer la scène comme une "chambre" avec une caméra et aucune lumière. Si on place un objet dans la chambre on ne peut pas le voir. Il faut éclairer l'objet pour le voir dans la vue de la caméra. Il existe plusieurs types d'éclairage qui ont différents effets :

  • éclairage directionnel : ce sont des éclairages assez larges qui viennent de loin et qui éclairent dans une seule direction (penser au soleil).
  • éclairage ambiant : moins qu'une source lumineuse et plus qu'une douce teinte colorée ,
  • point lumineux : penser à une ampoule, il brille dans toutes les directions et possède une limite de diffusion,
  • spot luminieux : fonctionne comme un spot dans la vraie vie,
  • lumière hémisphérique : lumière ambiante, non directionnelle, qui vient du plafond et du sol de la scène.

Code de base

<source lang ='javascript'> //Créer un cube avec un matériel et l'ajouter à la scène var geometry = new THREE.BoxGeometry(20, 20, 20); var material = new THREE.MeshLambertMaterial({color: 0xfd59d7}); var cube = new THREE.Mesh(geometry, material); scene.add(cube);

//Créer une lumière var light = new THREE.PointLight(0xFFFF00);

//Positionner la lumière light.position.set(10, 0, 25);

//Ajouter la l'éclairage à la scène scene.add(light); </source>

Relire le code de l'affichage d'un cube

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=La_Scène&oldid=2060 »