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
<!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;
|
Le moteur de renduCré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 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 :
var cube = forme(geometry,-80,50);
Il est créé à partir de la classe IcosahedronGeometry.
var geometry = new THREE.IcosahedronGeometry(15,0);
var icosaedre = forme(geometry,-40,50);
Il est créé à partir de la classe CircleGeometry
var geometry = new THREE.CircleGeometry(15,32);
var cercle = forme(geometry,0,50);
Il est créé à partir de la classe ConeGeometry.
var geometry = new THREE.ConeGeometry( 15, 20, 32 );
var cone = forme(geometry,40,50);
Il est créé à partir de la classe CylinderGeometry
var geometry = new THREE.CylinderGeometry( 15, 15, 20, 32 );
var cylindre = forme(geometry,80,50);
Il est créé à partir de la classe DodecahedronGeometry
var geometry = new THREE.DodecahedronGeometry(15,0);
var dodeca = forme(geometry,-80,10);
Il est créé à partir de la classe OctahedronGeometry
var geometry = new THREE.OctahedronGeometry(15,0);
var octo = forme(geometry,-40,10);
Il est créé à partir de la classe PlaneGeometry
var geometry = new THREE.PlaneGeometry( 25, 25, 32 );
var plan = forme(geometry,0,10);
Il est créé à partir de la classe RingGeometry
var geometry = new THREE.RingGeometry( 5, 20, 32 );
var ring = forme(geometry,40,10);
Elle est créé à partir de la classe SphereGeometry
var geometry = new THREE.SphereGeometry( 15, 12, 12 );
var sphere = forme(geometry,80,10);
Il est créé à partir de la classe TetrahedronGeometry
var geometry = new THREE.TetrahedronGeometry(15,0);
var tetra = forme(geometry,-80,-30);
Il est créé à partir de la classe TorusGeometry
var geometry = new THREE.TorusGeometry( 10, 3, 16, 100 );
var torus = forme(geometry,-40,-30);
Il est créé à partir de la classe TorusKnotGeometry
var geometry = new THREE.TorusKnotGeometry( 10, 3, 100, 16 );
var knot = forme(geometry,0,-30);
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);
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ènevar light = new THREE.PointLight(0xFF0000);
light.position.set(10, 0, 25);
scene.add(light);
Fonction forme de création des meshesCette fonction va être utilisée pour créer tous les Meshes de la Scene.
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;
}
Boucle d'animationCette fonction implémente la boucle d'animation de la scène et intègre la rotation de chaque géométrie.
function animate() {
/*Boucle*/
requestAnimationFrame( animate );
/*Rotation*/
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 brutevar 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();
|