« La Scène » : différence entre les versions

De OSWiki
Aller à la navigation Aller à la recherche
Ligne 22 : Ligne 22 :
[[Fichier:Pasted image.png]]
[[Fichier:Pasted image.png]]


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 [[renderer|renderers]] de  three.js qui va contenir l'image de la caméra.
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|renderer]] de  three.js qui va contenir l'image de la caméra.


==Code de base==
==Code de base==

Version du 5 février 2018 à 18:07

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éra (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, où la vue de la caméra commence,
  • le plan éloigné : c'est le plan le plus éloigné dans la vue, où la vue de la caméra se termine.

Pasted image.png

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

Relecture de l'affichage d'un cube

//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();
Spécial:IframePage/Cube