Du web, de la 3D, c’est THREE JS
THREE JS c’est une librairie JavaScript qui vous permet de faire très simplement de la 3D sur une page web et de l’animer.
Pour commencer ce tutoriel, il faut avoir des notions en JavaScript basique (variables, fonctions…), et aussi une petite notion de 3D (Camera, mesh, light…).
Introduction à la 3D sur navigateur
La scène 3D
Avant tout il faut savoir ce qu’est une scène 3D, une scène 3D basique se compose:
- La camera, c’est votre point de vue.
- Un mesh c’est un objet 3D, cela va du simple cube, au un personnage composer de milliers de polygones.
- Une light, ou lumière qui vous permet de voir le mesh et surtout de pouvoir agir sur les ombres ou l’ambiance.
la 3D dans le navigateur
Vous avez surement remarquez que sur les sites très orienté web design il y a de plus en plus de 3D, nous pouvons aussi jouer sur navigateur web à des 3D bluffant.
C’est grâce à une technologie déjà présente dans vous navigateur, c’est WEBGL.
WEBGL permet d’afficher et gérer des formes 3D en temps réel directement dans votre navigateur web.
Gardez cependant à l’esprit que c’est une technologie asses récente, et a moins d’avoir un PC de la nasa les calcules de l’espaces 3D risquent d’être très long si votre projet est complexe.
La mise en place de THREE JS
il vous faut avant tout télécharger cette librairie sur le site http://threejs.org/
Nous allons pour ce tutoriel une architecture Web classique avec un fichier index.html , un style.css, un script.js et un dossier librairie pour y mettre les 2 fichiers dons nous avons besoin pour ce tutoriel three.js et three.min.js (ces 2 fichiers se trouvent dans le dossier build de votre téléchargement).
Pour le fichier index.html nous utiliserons un code simple il ne faut juste pas oublier de lier les fichier style.css, threejs.min.js, et votre fichier script.js en bas du body.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>three.js</title>
<link rel="stylesheet" href="style.css" type="text/css">
<script src="librairie/three.min.js"></script>
</head>
<body>
<script src="script.js"></script>
</body>
</html>
Ceci ne demande pas beaucoup de temps et pareil pour le fichier style.css lui aussi très simple, tout à 100% sans marges, après c’est vous qui adapter suivant vos projets.
html, body, canvas{
width:100%;
height:100%;
margin:0;
padding:0;
overflow:hidden;
}
Mettre en place la Scène 3D
Pour mettre en place la scène 3D il faut le déclaré et placer sa camera. Ce sera le cas sur tout vos projets THREE JS.
Pour la camera nous allons utiliser la camera de perspective car c’est la représentation la plus courante de la 3D (en opposition à la camera orthogonale ) . la camera prend plusieurs paramètres :
- La « qualité ».
- La taille.
- La distance minimum et maximum de la vision.
Dans script.js nous allons noter.
//mise en place de la scene et la camera var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000); //center la camera au centre de la scene camera.lookAt(scene.position)
L’affichage d’une scène 3D s’appel un rendu (ou render ) il faut donc dire au navigateur qu’il faut utiliser WEBGL pour voir ce rendu.
//afficher le rendu et la taille du rendu, ainsi que sa place sur la page html var renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement);
Et nous allons donc crée une fonction qui vas nous permettre d’afficher ce rendu 3D sur la page.
Dans votre script.js positionner cette fonction en pied de page.
// fonction de l'affichage de la scène 3D
function render(){
// fait une boucle qui permet de calculer à chaque frame ou se trouve les objets
requestAnimationFrame(render);
renderer.render(scene, camera);
}
render();
Votre scène est prête, il n’y a plus qu’a positionner vos objets.
Le mesh et la lumière
Nous allons crée de simple forme géométrique pour ce tutoriel mais vous pouvez aussi y importer des modèle 3D plus complexe.
Pour crée un mesh
Avec TREE JS nous pouvons créer des formes géométrique basique tel que des cubes, des sphères des torus… grâce des fonctions prédéfinies par la librairie pour créer un cube. Il vous faut noter deux informations principales.
La géométrie de la forme (pour l’exemple le cube) qui prend en paramètre ses dimensions (longueur largeur et profondeur) .
La couleur et le shader. Pour ceux qui n’on jamais fais de 3D, le shader c’est la manière dont votre matériel réfléchi la lumière et prend en paramètre principal la couleur en hexadécimal.
Vous pouvez alors inclure le cube dans la scène avec un simple « .add ».
La fonction « scene.add » ça sert à choisir à quel élément le cube sera attaché, si vous voulez un nouveau cube tournant autour de celui ci vous pourrez utiliser un « cub.add() ».
//création d'un cube
var cubGeo = new THREE.BoxGeometry(5,5,5);
var cubMat = new THREE.MeshLambertMaterial({color: 0xff9923});
var cub = new THREE.Mesh(recGeo, recMat);
//inculre le cube dans la scene
scene.add(cub);
Que la lumière soit…
Pour que votre scène soit visible il vous faut l’éclairer.
Le système reste le même que pour la création d’objet,, vous avez accès à plusieurs modes d’éclairage qui peuvent être additionné, coloré comme vous le souhaitez.
Les 3 principales source des lumière sont:
- La lumière ambiante qui éclaire toute la scène .AmbientLight
- Le point de lumière qui éclaire à la manière d’une sphère lumineuse .PointLight
- Le Spot qui éclaire la scène en forme de cône .SpotLight
la déclaration et positionnement de la lumière ce fait de cette manière :
//afficher des sources de lumière var lightAmb = new THREE.AmbientLight (0xffffff); scene.add(lightAmb); var lightPoint = new THREE.PointLight (0xCCFFFF, 1, 100); //positionner la source lumineuse lightPoint.position.set(3,40,50); scene.add(lightPoint); var lightSpot = new THREE.SpotLight (0xFFFF66, 1, 100, Math.PI/4); //positionner la source lumineuse lightPoint.position.set(3,2,10); scene.add(lightSpot);
Positionner les éléments
Comme dans l’exemple précédant vous avez remarquer la fonction monObjet.position.set(x,y,z);
sert à positionner ses objets (lumière, mesh, camera).
Pour la rotation c’est aussi simple:
monObjet.rotation.set(x,y,z);
Pour s’aider à positionner ses objet vous pouvez faire apparaître un guide 3D bien utile pour se repérer.
//faire apparaitre les guide 3D var axisHelper = new THREE.AxisHelper(5); scene.add(axisHelper); //position du cube cub.position.set(5, 7, 0); //rotation du cube cub.rotation.x = -90 * Math.PI / 180;
A vous de jouer
Vous savez maintenant faire une scène 3D basique en THREE JS.
Pour animer il vous suffit t’utiliser « translate » et « rotation ».
Vous avez maintenant les bases, à vous, maintenant de vous exercer, il y a encore beaucoup de choses à expérimenter, importer un modèle 3D plus complexe, utiliser un système de particule, utiliser les événements clavier et souris …
josuao