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

De OSWiki
Aller à la navigation Aller à la recherche
(Création de la page La scène)
 
Aucun résumé des modifications
 
(18 versions intermédiaires par le même utilisateur non affichées)
Ligne 1 : Ligne 1 :
=La scèbe=
=La scène=
==Définition==
==Définition==
La '''[[Scenes|SCENE]]''' 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.
La '''[[Scenes|Scène]]''' est l'espace 3D dans lequel seront placés les objets, les [[Cameras|caméras]] et l'[[Lights|éclairage]]. Elle peut avoir n'importe quelles dimensions, tout dépend des besoins.


==Créer une nouvelle scène==
==Créer une nouvelle scène==
Code pour créer une nouvelle scène avec [[Définitions#Three.js|Three.js]]
Code pour créer une nouvelle scène avec [[Définitions#Three.js|Three.js]]


<source lang ='javascript'>
<syntaxhighlight lang ='javascript'>
   var scene = new THREE.Scene();
   var scene = new THREE.Scene();
</source>
</syntaxhighlight>


=La caméra et le renderer =
=La caméra et le renderer =
==Description==
==Description==
Une '''[[Cameras|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.  
Une '''[[Cameras|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 :
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''' ([https://fr.wikipedia.org/wiki/Champ_de_vue fov])  : il définit la distance verticale que la caméra peut capturer.
* '''un champs de vue vertical''' ([https://fr.wikipedia.org/wiki/Champ_de_vue 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,
* '''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 rapproché''' : c'est le plan le plus proche dans la vue, 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.
* '''le plan éloigné''' : c'est le plan le plus éloigné dans la vue, la vue de la caméra se termine.


[[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==
<source lang ='javascript'>
<syntaxhighlight lang ='javascript'>
//Ajouter une caméra -->  THREE.PerspectiveCamera(fov, aspect, near, far)
//Ajouter une caméra -->  THREE.PerspectiveCamera(fov, aspect, near, far)
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);
Ligne 38 : Ligne 40 :
//Ajouter l'élement renderer au DOM (dans la page)
//Ajouter l'élement renderer au DOM (dans la page)
document.body.appendChild( renderer.domElement );
document.body.appendChild( renderer.domElement );
</source>
</syntaxhighlight>


=L'éclairage de la scène=
=L'éclairage de la scène=
==Description==
==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 :
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'[[Lights|é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).
* '''[[DirectionalLight|é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 ,
* '''[[AmbientLight|é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,
* '''[[PointLight|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,
* '''[[SpotLight|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.
* '''[[HemisphereLight|lumière hémisphérique]]''' : lumière ambiante, non directionnelle,  qui vient du plafond et du sol de la scène.


==Code de base==
==Code de base==
<source lang ='javascript'>
<syntaxhighlight lang ='javascript'>
//Créer un cube avec un matériel et l'ajouter à la scène
//Créer un cube avec un matériel et l'ajouter à la scène
var geometry = new THREE.BoxGeometry(20, 20, 20);
var geometry = new THREE.BoxGeometry(20, 20, 20);
Ligne 65 : Ligne 67 :
//Ajouter la l'éclairage à la scène
//Ajouter la l'éclairage à la scène
scene.add(light);
scene.add(light);
</source>
</syntaxhighlight>
 
=Relecture du code de l'affichage d'un cube=
{|
|style="width: 50%;"|<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>
| style="width: 40%; min-height:100%;"|<iframe key="webgl" path="/cogito/OSWiki/resources/3D/tests_exemples/webgl001/index.php" />
|}

Version actuelle datée du 25 mars 2022 à 13:32

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 du code 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();