« La Scène » : différence entre les versions
Aucun résumé des modifications |
|||
| Ligne 66 : | Ligne 66 : | ||
scene.add(light); | scene.add(light); | ||
</source> | </source> | ||
==Relire le code de l'affichage d'un cube== | |||
{{Modèle:Premier cube}} | |||
Version du 5 février 2018 à 18:51
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
var scene = new THREE.Scene();
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
//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 );
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
//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);
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 :
<!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>
Code javascript
script.js
//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();
|
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 :
camera.position.z = 5;
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).
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
}
animate();
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 .
cube.rotation.x += 0.1;
cube.rotation.y += 0.1;
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.