Nous avons des capacités dans nos navigateurs dont nous n’aurions jamais rêvé il ya 5 ou 10 ans. Des mondes de jeu 3D complets peuvent fonctionner dans le navigateur et les sites Web interactifs peuvent être des expériences plus immersives.
Avec une certaine société de réalité virtuelle achetée par une certaine société de médias sociaux, le moment est idéal pour commencer à travailler avec la 3D. Étonnamment, nous pouvons maintenant créer de la 3D avec du pur JavaScript, y compris des maillages et des matériaux.
Bien sûr, même si cela est possible, il nécessite énormément de code, et c'est là que Three.js entre en jeu, ce qui nous permet de créer des environnements 3D simplement et avec moins de code.
Malheureusement, parce que c'est nouveau, la 3D n'est pas prise en charge par tous les navigateurs. Nous sommes actuellement limités à Chrome, Safari et Firefox.
Au fil du temps, le support sur IE s'améliorera, mais pour le moment, vous aurez besoin d'une solution de rechange pour les adeptes de Microsoft.
La première chose à faire est de se diriger vers le site web de three.js et téléchargez la dernière version de la bibliothèque.
Ensuite, référencez-le dans la tête de votre document, comme vous le feriez pour tout autre fichier JavaScript, et nous sommes prêts à le faire.
La première chose à faire est de créer une scène, une caméra et un rendu. En commençant par une scène:
var scene = new THREE.Scene();Ensuite, nous avons besoin d'une caméra. Considérez ceci comme le point de vue de l'utilisateur. Three.js a beaucoup d'options ici, mais pour simplifier, nous allons utiliser une caméra en perspective:
var camera = new THREE.PerspectiveCamera(100, window.innerWidth / window.innerHeight, 0.1, 1000);Cette méthode prend quatre paramètres: le premier est le champ de vision, le second est le rapport hauteur / largeur (je recommande toujours de baser ceci sur la fenêtre de l'utilisateur), le plan de coupe proche et enfin le plan de délimitation. Ces deux derniers paramètres déterminent les limites du rendu, de sorte que les objets trop proches ou trop éloignés ne sont pas dessinés, ce qui gaspillerait des ressources.
Ensuite, nous devons configurer le moteur de rendu WebGL:
var renderer = new THREE.WebGLRenderer();renderer.setSize( window.innerWidth, window.innerHeight );document.body.appendChild( renderer.domElement );
Comme vous pouvez le voir, la première chose à faire est de créer une instance du moteur de rendu, puis de définir sa taille dans la fenêtre de l'utilisateur. Enfin, nous l'ajoutons à la page pour créer une toile vierge.
Jusqu'à présent, tout ce que nous avons fait est mis en place, maintenant nous allons créer notre premier objet 3D.
Pour ce tutoriel, ce sera un simple cylindre:
var geometry = new THREE.CylinderGeometry( 5, 5, 20, 32 );Cette méthode prend également 4 paramètres: le premier est le rayon du haut du cylindre, le second est le rayon du bas du cylindre, le troisième est la hauteur, le dernier est le nombre de segments de hauteur.
Nous avons mis au point les mathématiques de l'objet, maintenant nous devons l'envelopper dans un matériau afin qu'il ressemble réellement à quelque chose à l'écran:
var material = new THREE.MeshBasicMaterial( { color: 0x0000ff, wireframe: true} );Ce code ajoute un matériau simple à l'objet, dans ce cas une couleur bleue. Je mets true wireframe parce que cela va montrer l'objet plus clairement une fois que nous allons l'animer.
Enfin, nous devons ajouter notre cylindre à notre scène, comme ceci:
var cylinder = new THREE.Mesh( geometry, material );scene.add( cylinder );
La dernière chose à faire avant de rendre la scène est de définir la position de la caméra:
camera.position.z = 20;Comme vous pouvez le constater, le code JavaScript utilisé est extrêmement simple, car Three.js traite tous les problèmes complexes, nous n’avons donc pas besoin de le faire.
Si vous testez le fichier dans un navigateur, vous verrez que rien ne se passe. C'est parce que nous n'avons pas dit la scène à rendre. Pour rendre la scène, nous avons besoin du code suivant:
function render() {requestAnimationFrame(render);renderer.render(scene, camera);}render();Si vous regardez maintenant le fichier dans votre navigateur, vous verrez qu'il rend effectivement un cylindre, mais ce n'est pas très excitant.
Pour vraiment améliorer la valeur de la 3D, vous devez commencer à l'animer, ce que nous pouvons faire avec quelques petites modifications de notre fonction de rendu :
function render() {requestAnimationFrame(render);cylinder.rotation.z += 0.01;cylinder.rotation.y += 0.1;renderer.render(scene, camera);}render();Si vous testez dans votre navigateur, vous verrez maintenant un cylindre 3D correctement animé.
Si vous voulez voir une démo et jouer avec le code, vous pouvez faites-le ici.
Comme vous pouvez le constater, la création de cette scène (certes très simple) a pris moins de deux douzaines de lignes de code, et il y a très peu de mathématiques impliquées.
Si vous consultez le exemples Sur le site Web three.js, vous verrez un travail incroyable qui a été accompli.
Cette bibliothèque étonnante pour JavaScript a vraiment réduit le niveau d’entrée pour le codage 3D au point que toute personne capable d’écrire du JavaScript de base peut s’impliquer.