« Modèle:Utiliser des géométries » : différence entre les versions
Aucun résumé des modifications |
|||
Ligne 227 : | Ligne 227 : | ||
*L'isocaèdre déformé | *L'isocaèdre déformé | ||
Il est créé comme l'isocaèdre. | Il est créé comme l'isocaèdre. | ||
On déplace les | |||
On déplace les sommets 2 et 8 dans le tableau des sommets, sur l'axe des x et des y. | |||
<source lang = 'javascript'> | <source lang = 'javascript'> | ||
var geometry = new THREE.IcosahedronGeometry(15,0); | var geometry = new THREE.IcosahedronGeometry(15,0); |
Version du 14 février 2018 à 12:48
Ce code affiche et fait tourner plusieurs types de Geometry.
Organisation des dossiers et fichiers
Fichiers Index.html et style.css
index.html
<!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>
style.css
body {
margin: 0;
overflow: hidden;
}
Analyse du code javascript
script.js
La scèneOn commence par créer un nouvel objet Scene var scene = new THREE.Scene();
La caméraUtilisation d'une PerspectiveCamera
La caméra est avancée : on ajoute 120 unités sur l'axe des z (profondeur). var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.z = 120;
|
Spécial:IframePage/Geometrie |
Le moteur de rendu
Création de l'objet moteur de rendu à partir de la classe WebGLRenderer:
var renderer = new THREE.WebGLRenderer();
Définition de la taille du renderer
renderer.setSize( window.innerWidth, window.innerHeight );
Le Canvas est ajouté au document, dans le body de la page HTML via la propriété .domElement du moteur de rendu.
document.body.appendChild( renderer.domElement );
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.
var geometry = new THREE.BoxGeometry(20, 20, 20);
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
var cube = forme(geometry,-80,50);
- L'icosaèdre
Il est créé à partir de la classe IcosahedronGeometry.
- 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);
- Le disque
Il est créé à partir de la classe CircleGeometry
- rayon =15,
- nombre de segments radiaux : 32
var geometry = new THREE.CircleGeometry(15,32);
var cercle = forme(geometry,0,50);
- Le cône
Il est créé à partir de la classe ConeGeometry.
- rayon = 15,
- hauteur = 20,
- nombre de segments radiaux : 32
var geometry = new THREE.ConeGeometry( 15, 20, 32 );
var cone = forme(geometry,40,50);
- 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
var geometry = new THREE.CylinderGeometry( 15, 15, 20, 32 );
var cylindre = forme(geometry,80,50);
- Le dodécaèdre
Il est créé à partir de la classe DodecahedronGeometry
- 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);
- L'octaèdre
Il est créé à partir de la classe OctahedronGeometry
- 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);
- Le plan
Il est créé à partir de la classe PlaneGeometry
- 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);
- 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
var geometry = new THREE.RingGeometry( 5, 20, 32 );
var ring = forme(geometry,40,10);
- La sphère
Elle est créé à partir de la classe SphereGeometry
- rayon = 15
- segments radiaux =12 12
- segments en hauteur = 12
var geometry = new THREE.SphereGeometry( 15, 12, 12 );
var sphere = forme(geometry,80,10);
- Le tétraèdre
Il est créé à partir de la classe TetrahedronGeometry
- 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);
- Le torus
Il est créé à partir de la classe TorusGeometry
- rayon = 10
- diamètre du tube = 3
- segments radiaux = 16
- segments du tube = 100
var geometry = new THREE.TorusGeometry( 10, 3, 16, 100 );
var torus = forme(geometry,-40,-30);
- 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
var geometry = new THREE.TorusKnotGeometry( 10, 3, 100, 16 );
var knot = forme(geometry,0,-30);
- 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.
var geometry = new THREE.BoxGeometry(20, 20, 20);
geometry.vertices[2].x += -10;
geometry.vertices[2].y += -5;
var tordu = forme(geometry,40,-30);
- L'isocaèdre déformé
Il est créé comme l'isocaèdre.
On déplace les sommets 2 et 8 dans le tableau des sommets, sur l'axe des x et des y.
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 de la scène
var light = new THREE.PointLight(0xFF0000);
light.position.set(10, 0, 25);
scene.add(light);
Fonction forme de création des meshes
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
/*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 );
}
Lancement de la boucle
//Appel de la fonction animate
animate();
Le code javascript brute
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.z = 100;
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var geometry = new THREE.BoxGeometry(20, 20, 20);
var cube = forme(geometry,-80,50);
var geometry = new THREE.IcosahedronGeometry(15,0);
var icosaedre = forme(geometry,-40,50);
var geometry = new THREE.CircleGeometry(15,32);
var cercle = forme(geometry,0,50);
var geometry = new THREE.ConeGeometry( 15, 20, 32 );
var cone = forme(geometry,40,50);
var geometry = new THREE.CylinderGeometry( 15, 15, 20, 32 );
var cylindre = forme(geometry,80,50);
var geometry = new THREE.DodecahedronGeometry(15,0);
var dodeca = forme(geometry,-80,10);
var geometry = new THREE.OctahedronGeometry(15,0);
var octo = forme(geometry,-40,10);
var geometry = new THREE.PlaneGeometry( 25, 25, 32 );
var plan = forme(geometry,0,10);
var geometry = new THREE.RingGeometry( 5, 20, 32 );
var ring = forme(geometry,40,10);
var geometry = new THREE.SphereGeometry( 15, 12, 12 );
var sphere = forme(geometry,80,10);
var geometry = new THREE.TetrahedronGeometry(15,0);
var tetra = forme(geometry,-80,-30);
var geometry = new THREE.TorusGeometry( 10, 3, 16, 100 );
var torus = forme(geometry,-40,-30);
var geometry = new THREE.TorusKnotGeometry( 10, 3, 100, 16 );
var knot = forme(geometry,0,-30);
var geometry = new THREE.BoxGeometry(20, 20, 20);
geometry.vertices[2].x += -10;
geometry.vertices[2].y += -5;
var tordu = forme(geometry,40,-30);
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);
var light = new THREE.PointLight(0xFF0000);
light.position.set(10, 0, 25);
scene.add(light);
function forme(geo,posX,posY)
{
var material = new THREE.MeshNormalMaterial();
var obj = new THREE.Mesh(geo, material);
obj.position.x = posX;
obj.position.y = posY;
scene.add(obj);
return obj;
}
function animate() {
requestAnimationFrame( animate );
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;
renderer.render( scene, camera );
}
animate();