« Modèle:Utiliser des géométries » : différence entre les versions

De OSWiki
Aller à la navigation Aller à la recherche
Ligne 40 : Ligne 40 :
===script.js===
===script.js===
{|
{|
|style="width: 50%;"|<source lang = 'javascript'>
|style="width: 50%;"|
/*SCENE*/
====La scène====
On commence à créer un nouvelle objet [[Scene]]
<source lang = 'javascript'>
var scene = new THREE.Scene();
var scene = new THREE.Scene();
/*CAMÉRA*/
</source>
====La caméra ====
<source lang = 'javascript'>
//Fov : 75 -- aspect ratio  -- plan rapproché -- plan éloigné
//Fov : 75 -- aspect ratio  -- plan rapproché -- plan éloigné
//Position avancée de 120 (profondeur)
//Position avancée de 120 (profondeur)
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 );
camera.position.z = 120;
camera.position.z = 120;
 
</source>
/*MOTEUR DE RENDU */
====Le moteur de rendu====
<source lang = 'javascript'>
//Définition de la taille du renderer
//Définition de la taille du renderer
//Ajouter le renderer au document  
//Ajouter le renderer au document  
Ligne 55 : Ligne 60 :
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
document.body.appendChild( renderer.domElement );
 
</source>
/*GEOMETRIES*/
| style="position: absolute; width:50%; min-height:100%; "|{{Spécial:IframePage/Geometrie}}
|}
====Création des géométries====
*Le cube
<source lang = 'javascript'>
/*
/*
Créer un cube de dimension 20x20x20 et le placer à -80 unité sur l'axe des x (horizontal) et à 50 sur l'axe des y (vertical)
Créer un cube de dimension 20x20x20 et le placer à -80 unité sur l'axe des x (horizontal) et à 50 sur l'axe des y (vertical)
Ligne 68 : Ligne 77 :
var cube = forme(geometry,-80,50);
var cube = forme(geometry,-80,50);
</source>
</source>
| style="position: absolute; width:50%; min-height:100%; "|{{Spécial:IframePage/Geometrie}}
*L'icosaèdre
|}
<source lang = 'javascript'>
<source lang="javascript">
//Créer un icosaèdre : Rayon 15, pas plus de sommets que le volume par défaut
//Créer un icosaèdre : Rayon 15, pas plus de sommets que le volume par défaut
var geometry =  new THREE.IcosahedronGeometry(15,0);
var geometry =  new THREE.IcosahedronGeometry(15,0);
var icosaedre = forme(geometry,-40,50);
var icosaedre = forme(geometry,-40,50);
 
</source>
*Le disque
<source lang = 'javascript'>
//Créer un disque : rayon 15, nombre de segments radiaux : 32  
//Créer un disque : rayon 15, nombre de segments radiaux : 32  
var geometry =  new THREE.CircleGeometry(15,32);
var geometry =  new THREE.CircleGeometry(15,32);
var cercle = forme(geometry,0,50);
var cercle = forme(geometry,0,50);
 
</source>
*Le cône
<source lang = 'javascript'>
//Créer un cône : rayon 15, hauteur 20, nombre de segments radiaux : 32
//Créer un cône : rayon 15, hauteur 20, nombre de segments radiaux : 32
var geometry =  new THREE.ConeGeometry( 15, 20, 32 );
var geometry =  new THREE.ConeGeometry( 15, 20, 32 );
var cone = forme(geometry,40,50);
var cone = forme(geometry,40,50);
 
</source>
*Le cylindre
<source lang = 'javascript'>
//Créer un cylindre : rayon du sommet : 15, rayon de la base : 15, hauteur 20, nombre de segments radiaux : 32
//Créer un cylindre : rayon du sommet : 15, rayon de la base : 15, hauteur 20, nombre de segments radiaux : 32
var geometry =  new THREE.CylinderGeometry( 15, 15, 20, 32 );
var geometry =  new THREE.CylinderGeometry( 15, 15, 20, 32 );
var cylindre = forme(geometry,80,50);
var cylindre = forme(geometry,80,50);
 
</source>
*Le dodécaèdre
<source lang = 'javascript'>
//Créer un dodécaèdre : rayon 15,  pas plus de sommets que le volume par défaut
//Créer un dodécaèdre : rayon 15,  pas plus de sommets que le volume par défaut
var geometry = new THREE.DodecahedronGeometry(15,0);
var geometry = new THREE.DodecahedronGeometry(15,0);
var dodeca = forme(geometry,-80,10);
var dodeca = forme(geometry,-80,10);
 
</source>
*L'octaèdre
<source lang = 'javascript'>
//Créer un octaèdre : rayon : 15 ,  pas plus de sommets que le volume par défaut
//Créer un octaèdre : rayon : 15 ,  pas plus de sommets que le volume par défaut
var geometry = new THREE.OctahedronGeometry(15,0);
var geometry = new THREE.OctahedronGeometry(15,0);
var octo = forme(geometry,-40,10);
var octo = forme(geometry,-40,10);
 
</source>
*Le plan
<source lang = 'javascript'>
//Créer un plan : largeur : 25, hauteur : 25, nombre de segments sur la largeur : 32
//Créer un plan : largeur : 25, hauteur : 25, nombre de segments sur la largeur : 32
var geometry =  new THREE.PlaneGeometry( 25, 25, 32 );
var geometry =  new THREE.PlaneGeometry( 25, 25, 32 );
var plan = forme(geometry,0,10);
var plan = forme(geometry,0,10);
 
</source>
*L'anneau
<source lang = 'javascript'>
//Créer un anneau : Rayon interieur : 5, rayon extérieur : 20, nombre de segments sur le pourtour : 32
//Créer un anneau : Rayon interieur : 5, rayon extérieur : 20, nombre de segments sur le pourtour : 32
var geometry = new THREE.RingGeometry( 5, 20, 32 );
var geometry = new THREE.RingGeometry( 5, 20, 32 );
var ring = forme(geometry,40,10);
var ring = forme(geometry,40,10);
 
</source>
*La sphère
<source lang = 'javascript'>
//Créer une sphère : rayon 15, segments radiaux : 12 , segments en hauteur : 12
//Créer une sphère : rayon 15, segments radiaux : 12 , segments en hauteur : 12
var geometry = new THREE.SphereGeometry( 15, 12, 12 );
var geometry = new THREE.SphereGeometry( 15, 12, 12 );
var sphere = forme(geometry,80,10);
var sphere = forme(geometry,80,10);
 
</source>
*Le tétraèdre
<source lang = 'javascript'>
//Créer un tétraèdre : rayon : 15, pas plus de sommets que le volume par défaut
//Créer un tétraèdre : rayon : 15, pas plus de sommets que le volume par défaut
var geometry = new THREE.TetrahedronGeometry(15,0);
var geometry = new THREE.TetrahedronGeometry(15,0);
var tetra = forme(geometry,-80,-30);
var tetra = forme(geometry,-80,-30);
 
</source>
*Le torus
<source lang = 'javascript'>
//Créer un torus : rayon : 10, diamètre du tube : 3, ségments radiaux : 16, ségments du tube:100
//Créer un torus : rayon : 10, diamètre du tube : 3, ségments radiaux : 16, ségments du tube:100
var geometry = new THREE.TorusGeometry( 10, 3, 16, 100 );
var geometry = new THREE.TorusGeometry( 10, 3, 16, 100 );
var torus = forme(geometry,-40,-30);
var torus = forme(geometry,-40,-30);
 
</source>
*Le torus knot
<source lang = 'javascript'>
//Créer un Torus knot : rayon : 10, diamètre du tube : 3, ségments du tube:100, ségments radiaux : 16
//Créer un Torus knot : rayon : 10, diamètre du tube : 3, ségments du tube:100, ségments radiaux : 16
var geometry = new THREE.TorusKnotGeometry( 10, 3, 100, 16 );
var geometry = new THREE.TorusKnotGeometry( 10, 3, 100, 16 );
var knot = forme(geometry,0,-30);
var knot = forme(geometry,0,-30);
 
</source>
*Le cube déformé
<source lang = 'javascript'>
// Créer une geometrie particulière sur la base d'un cube.  
// Créer une geometrie particulière sur la base d'un cube.  
//On déplace le sommet 2 dans le tableau des sommets de -10 sur l'axe des x et de -5 sur l'axe des y.
//On déplace le sommet 2 dans le tableau des sommets de -10 sur l'axe des x et de -5 sur l'axe des y.
Ligne 125 : Ligne 157 :
geometry.vertices[2].y += -5;
geometry.vertices[2].y += -5;
var tordu = forme(geometry,40,-30);
var tordu = forme(geometry,40,-30);
 
</source>
*L'isocaèdre déformé
<source lang = 'javascript'>
//Créer une géométrie particulière sur la base d'un isocaèdre.  
//Créer une géométrie particulière sur la base d'un isocaèdre.  
var geometry = new THREE.IcosahedronGeometry(15,0);
var geometry = new THREE.IcosahedronGeometry(15,0);
Ligne 133 : Ligne 167 :
geometry.vertices[8].y += -10;
geometry.vertices[8].y += -10;
var tordu2 = forme(geometry,80,-30);
var tordu2 = forme(geometry,80,-30);
 
</source>
/*ÉCLAIRAGE*/
====Éclairage de la scène====
<source lang = 'javascript'>
var light = new THREE.PointLight(0xFF0000);
var light = new THREE.PointLight(0xFF0000);
light.position.set(10, 0, 25);
light.position.set(10, 0, 25);
scene.add(light);
scene.add(light);
</source>


/*Fonction appliquéeà toutes les Geometries*/
====Fonction de création des meshes====
<source lang = 'javascript'>
function forme(geo,posX,posY)
function forme(geo,posX,posY)
{
{
Ligne 154 : Ligne 191 :
     return obj;
     return obj;
}
}
 
</source>
====Boucle d'animation====
<source lang = 'javascript'>
/*Boucle d'animation de la scène qui intègre les déplacements de chaque objet*/
/*Boucle d'animation de la scène qui intègre les déplacements de chaque objet*/
function animate() {
function animate() {
Ligne 199 : Ligne 238 :
renderer.render( scene, camera );
renderer.render( scene, camera );
}
}
 
</source>
====Lancement de la boucle====
<source lang = 'javascript'>
//Appel de la fonction animate
//Appel de la fonction animate
animate();
animate();
</source>
</source>

Version du 13 février 2018 à 17:47

Ce code affiche et fait tourner plusieurs types de Geometry.

Organisation des dossiers et fichiers

Fichiers Index.html et style.css

index.html

<source lang="html5"> <!DOCTYPE html> <html> <head> 

  <meta charset=utf-8>
  <title>Three.js : Geometry</title>
  <link rel="stylesheet" href="css/style.css">

</head> <body> 

  <script src="js/three.js"></script>
  <script src="js/script.js"></script>

</body> </html> </source>

style.css

<source lang ="css"> body { margin: 0; overflow: hidden; }

</source>

Code javascript

script.js

La scène

On commence à créer un nouvelle objet Scene <source lang = 'javascript'> var scene = new THREE.Scene(); </source>

La caméra

<source lang = 'javascript'> //Fov : 75 -- aspect ratio -- plan rapproché -- plan éloigné //Position avancée de 120 (profondeur) var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); camera.position.z = 120; </source>

Le moteur de rendu

<source lang = 'javascript'> //Définition de la taille du renderer //Ajouter le renderer au document var renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); </source>

Spécial:IframePage/Geometrie

Création des géométries

  • Le cube

<source lang = 'javascript'> /* Créer un cube de dimension 20x20x20 et le placer à -80 unité sur l'axe des x (horizontal) et à 50 sur l'axe des y (vertical) On utilisera la fonction 'forme' pour toutes les Geometries pour : - créer un matériel - créer un mesh avec le matériel et la geometry - placer le mesh - l'ajouter à la scene

  • /

var geometry = new THREE.BoxGeometry(20, 20, 20); var cube = forme(geometry,-80,50); </source>

  • L'icosaèdre

<source lang = 'javascript'> //Créer un icosaèdre : Rayon 15, pas plus de sommets que le volume par défaut var geometry = new THREE.IcosahedronGeometry(15,0); var icosaedre = forme(geometry,-40,50); </source>

  • Le disque

<source lang = 'javascript'> //Créer un disque : rayon 15, nombre de segments radiaux : 32 var geometry = new THREE.CircleGeometry(15,32); var cercle = forme(geometry,0,50); </source>

  • Le cône

<source lang = 'javascript'> //Créer un cône : rayon 15, hauteur 20, nombre de segments radiaux : 32 var geometry = new THREE.ConeGeometry( 15, 20, 32 ); var cone = forme(geometry,40,50); </source>

  • Le cylindre

<source lang = 'javascript'> //Créer un cylindre : rayon du sommet : 15, rayon de la base : 15, hauteur 20, nombre de segments radiaux : 32 var geometry = new THREE.CylinderGeometry( 15, 15, 20, 32 ); var cylindre = forme(geometry,80,50); </source>

  • Le dodécaèdre

<source lang = 'javascript'> //Créer un dodécaèdre : rayon 15, pas plus de sommets que le volume par défaut var geometry = new THREE.DodecahedronGeometry(15,0); var dodeca = forme(geometry,-80,10); </source>

  • L'octaèdre

<source lang = 'javascript'> //Créer un octaèdre : rayon : 15 , pas plus de sommets que le volume par défaut var geometry = new THREE.OctahedronGeometry(15,0); var octo = forme(geometry,-40,10); </source>

  • Le plan

<source lang = 'javascript'> //Créer un plan : largeur : 25, hauteur : 25, nombre de segments sur la largeur : 32 var geometry = new THREE.PlaneGeometry( 25, 25, 32 ); var plan = forme(geometry,0,10); </source>

  • L'anneau

<source lang = 'javascript'> //Créer un anneau : Rayon interieur : 5, rayon extérieur : 20, nombre de segments sur le pourtour : 32 var geometry = new THREE.RingGeometry( 5, 20, 32 ); var ring = forme(geometry,40,10); </source>

  • La sphère

<source lang = 'javascript'> //Créer une sphère : rayon 15, segments radiaux : 12 , segments en hauteur : 12 var geometry = new THREE.SphereGeometry( 15, 12, 12 ); var sphere = forme(geometry,80,10); </source>

  • Le tétraèdre

<source lang = 'javascript'> //Créer un tétraèdre : rayon : 15, pas plus de sommets que le volume par défaut var geometry = new THREE.TetrahedronGeometry(15,0); var tetra = forme(geometry,-80,-30); </source>

  • Le torus

<source lang = 'javascript'> //Créer un torus : rayon : 10, diamètre du tube : 3, ségments radiaux : 16, ségments du tube:100 var geometry = new THREE.TorusGeometry( 10, 3, 16, 100 ); var torus = forme(geometry,-40,-30); </source>

  • Le torus knot

<source lang = 'javascript'> //Créer un Torus knot : rayon : 10, diamètre du tube : 3, ségments du tube:100, ségments radiaux : 16 var geometry = new THREE.TorusKnotGeometry( 10, 3, 100, 16 ); var knot = forme(geometry,0,-30); </source>

  • Le cube déformé

<source lang = 'javascript'> // Créer une geometrie particulière sur la base d'un cube. //On déplace le sommet 2 dans le tableau des sommets de -10 sur l'axe des x et de -5 sur l'axe des y. var geometry = new THREE.BoxGeometry(20, 20, 20); geometry.vertices[2].x += -10; geometry.vertices[2].y += -5; var tordu = forme(geometry,40,-30); </source>

  • L'isocaèdre déformé

<source lang = 'javascript'> //Créer une géométrie particulière sur la base d'un isocaèdre. var geometry = new THREE.IcosahedronGeometry(15,0); geometry.vertices[2].x += -15; geometry.vertices[2].y += -10; geometry.vertices[8].x += -15; geometry.vertices[8].y += -10; var tordu2 = forme(geometry,80,-30); </source>

Éclairage de la scène

<source lang = 'javascript'> var light = new THREE.PointLight(0xFF0000); light.position.set(10, 0, 25); scene.add(light); </source>

Fonction de création des meshes

<source lang = 'javascript'> function forme(geo,posX,posY) { 

   //Création du matériel 
   var material = new THREE.MeshNormalMaterial();
   //Création du mesh  a partir de la Geometrie (premier paramètre de la fonction)
   var obj = new THREE.Mesh(geo, material);
   //Positionnement du mesh dans la scène : (deuxième et trosième paramètres de la fonction)
   obj.position.x = posX;
   obj.position.y = posY;
   //Ajouter le mesh à la scène
   scene.add(obj);    
   //Retourner le mesh 
   return obj;

} </source>

Boucle d'animation

<source lang = 'javascript'> /*Boucle d'animation de la scène qui intègre les déplacements de chaque objet*/ function animate() { //initiation de l'animation avec appelle de la fonction animate par elle même. requestAnimationFrame( animate );

/* Rotations des objets, par exemple le cube va tourner de 0.01 rad par frame (60 frame par seconde en général) sur l'horizontale et de 0.01 rad par frame sur la verticale

  • /

cube.rotation.x += 0.01; cube.rotation.y += 0.01; icosaedre.rotation.x += 0.01; icosaedre.rotation.y += -0.01; cercle.rotation.x += -0.01; cercle.rotation.y += 0.01; cone.rotation.x += 0.01; cone.rotation.y += 0.01; cylindre.rotation.x += 0.01; cylindre.rotation.y += -0.01; dodeca.rotation.x += -0.01; dodeca.rotation.y += 0.01; octo.rotation.x += 0.01; octo.rotation.y += 0.01; plan.rotation.x += -0.01; plan.rotation.y += -0.01; ring.rotation.x += 0.01; ring.rotation.y += 0.01; sphere.rotation.x += -0.01; sphere.rotation.y += 0.01; tetra.rotation.x += 0.01; tetra.rotation.y += -0.01; torus.rotation.x += -0.01; torus.rotation.y += 0.01; knot.rotation.x += -0.01; knot.rotation.y += -0.01; tordu.rotation.x += -0.01; tordu.rotation.y += 0.01; tordu2.rotation.x += -0.01; tordu2.rotation.y += 0.01;

//Rendu de la scène renderer.render( scene, camera ); } </source>

Lancement de la boucle

<source lang = 'javascript'> //Appel de la fonction animate animate(); </source>

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