Modèle:Utiliser des géométries
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
| <source lang = 'javascript'>
/*SCENE*/ var scene = new THREE.Scene(); /*CAMÉRA*/ //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; /*MOTEUR DE RENDU */ //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 ); /*GEOMETRIES*/ /* 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> |
Spécial:IframePage/Geometrie |
<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);
//Créer un disque : rayon 15, nombre de segments radiaux : 32 var geometry = new THREE.CircleGeometry(15,32); var cercle = forme(geometry,0,50);
//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);
//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);
//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);
//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);
//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);
//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);
//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);
//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);
//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);
//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);
// 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);
//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);
/*ÉCLAIRAGE*/ var light = new THREE.PointLight(0xFF0000); light.position.set(10, 0, 25); scene.add(light);
/*Fonction appliquéeà toutes les Geometries*/ 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;
}
/*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 ); }
//Appel de la fonction animate animate(); </source>