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

De OSWiki
Aller à la navigation Aller à la recherche
Aucun résumé des modifications
Ligne 37 : Ligne 37 :
</source>
</source>


==Code javascript==
==Analyse du code javascript==
===script.js===
===script.js===
{|
{|

Version du 14 février 2018 à 11:43

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>

Analyse du code javascript

script.js

La scène

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

La caméra

Utilisation d'une PerspectiveCamera

  • Fov : 75
  • Aspect ratio : window.innerWidth / window.innerHeight
  • Plan rapproché : 0.1
  • Plan éloigné : 1000

La caméra est avancée : on ajoute 120 unités sur l'axe des z (profondeur).

<source lang = 'javascript'> var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

camera.position.z = 120; </source>

Spécial:IframePage/Geometrie

Le moteur de rendu

Création de l'objet moteur de rendu à partir de la classe WebGLRenderer: <source lang = 'javascript'> var renderer = new THREE.WebGLRenderer(); </source>

Définition de la taille du renderer <source lang = 'javascript'> renderer.setSize( window.innerWidth, window.innerHeight ); </source> Le Canvas est ajouté au document, dans le body de la page HTML via la propriété .domElement du moteur de rendu. <source lang = 'javascript'> document.body.appendChild( renderer.domElement ); </source>

Création des géométries

  • Le cube

Le cube est créé à partir de la classe BoxGeometry.

Le Vector3 (20,20,20) définit ses dimensions dans le repère orthonormée x, y, z. <source lang = 'javascript'> var geometry = new THREE.BoxGeometry(20, 20, 20); </source>

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
  • positionner le mesh : ici le cube est placé à -80 unités sur l'axe des x (horizontal) et à 50 sur l'axe des y (vertical).
  • l'ajouter à la Scene

<source lang = 'javascript'> var cube = forme(geometry,-80,50); </source>

  • L'icosaèdre

Il est créé à partir de la classe IcosahedronGeometry.

  • rayon = 15,
  • pas plus de sommets que le volume par défaut

<source lang = 'javascript'> var geometry = new THREE.IcosahedronGeometry(15,0); var icosaedre = forme(geometry,-40,50); </source>

  • Le disque

Il est créé à partir de la classe CircleGeometry

  • rayon =15,
  • nombre de segments radiaux : 32

<source lang = 'javascript'> var geometry = new THREE.CircleGeometry(15,32); var cercle = forme(geometry,0,50); </source>

  • Le cône

Il est créé à partir de la classe ConeGeometry.

  • rayon = 15,
  • hauteur = 20,
  • nombre de segments radiaux : 32

<source lang = 'javascript'> var geometry = new THREE.ConeGeometry( 15, 20, 32 ); var cone = forme(geometry,40,50); </source>

  • Le cylindre

Il est créé à partir de la classe CylinderGeometry

  • rayon au sommet = 15
  • rayon à la base = 15
  • hauteur 20,
  • nombre de segments radiaux : 32

<source lang = 'javascript'> var geometry = new THREE.CylinderGeometry( 15, 15, 20, 32 ); var cylindre = forme(geometry,80,50); </source>

  • Le dodécaèdre

Il est créé à partir de la classe DodecahedronGeometry

  • rayon = 15
  • pas plus de sommets que le volume par défaut

<source lang = 'javascript'> var geometry = new THREE.DodecahedronGeometry(15,0); var dodeca = forme(geometry,-80,10); </source>

  • L'octaèdre

Il est créé à partir de la classe OctahedronGeometry

  • rayon = 15
  • pas plus de sommets que le volume par défaut

<source lang = 'javascript'> var geometry = new THREE.OctahedronGeometry(15,0); var octo = forme(geometry,-40,10); </source>

  • Le plan

Il est créé à partir de la classe PlaneGeometry

  • largeur = 25
  • hauteur = 25
  • nombre de segments sur la largeur = 32

<source lang = 'javascript'> var geometry = new THREE.PlaneGeometry( 25, 25, 32 ); var plan = forme(geometry,0,10); </source>

  • L'anneau

Il est créé à partir de la classe RingGeometry

  • rayon intérieur : 5
  • rayon extérieur : 20
  • nombre de segments sur le pourtour = 32

<source lang = 'javascript'> var geometry = new THREE.RingGeometry( 5, 20, 32 ); var ring = forme(geometry,40,10); </source>

  • La sphère

Elle est créé à partir de la classe SphereGeometry

  • rayon = 15
  • segments radiaux =12 12
  • segments en hauteur = 12

<source lang = 'javascript'> var geometry = new THREE.SphereGeometry( 15, 12, 12 ); var sphere = forme(geometry,80,10); </source>

  • Le tétraèdre

Il est créé à partir de la classe TetrahedronGeometry

  • rayon = 15
  • pas plus de sommets que le volume par défaut

<source lang = 'javascript'> var geometry = new THREE.TetrahedronGeometry(15,0); var tetra = forme(geometry,-80,-30); </source>

  • Le torus

Il est créé à partir de la classe TorusGeometry

  • rayon = 10
  • diamètre du tube = 3
  • segments radiaux = 16
  • segments du tube = 100

<source lang = 'javascript'> var geometry = new THREE.TorusGeometry( 10, 3, 16, 100 ); var torus = forme(geometry,-40,-30); </source>

  • Le torus knot

Il est créé à partir de la classe TorusKnotGeometry

  • rayon = 10
  • diamètre du tube = 3
  • segments radiaux = 16
  • segments du tube = 100

<source lang = 'javascript'> var geometry = new THREE.TorusKnotGeometry( 10, 3, 100, 16 ); var knot = forme(geometry,0,-30); </source>

  • Le cube déformé

Il est créé comme le 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. <source lang = 'javascript'> 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é

Il est créé comme l'isocaèdre. On déplace les sommet 2 et 8 dans le tableau des sommets, sur l'axe des x et des y. <source lang = 'javascript'> 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 forme 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=2418 »