Three.js est une bibliothèque JavaScript utilisée pour créer et afficher des graphiques 3D dans un navigateur web. Elle simplifie grandement le processus de développement d’applications et d’animations 3D en fournissant une abstraction sur WebGL, la technologie sous-jacente qui permet de manipuler le rendu graphique en 3D dans les navigateurs.
Premièrement pour utiliser Three.js il est nécessaire d’ajouter dans votre projet cette ligne de code :
<script src= »https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js »></script>
- Pour débuter il faut créer un fichier .js qui contiendra tout ce contenue, Et maintenant il faut créer la scène, la caméra et le rendu. Voici un exemple pour les créer :
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.z = 5;
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
- Ensuite il suffit de créer le cube et de réaliser son animation :
var geometry = new THREE.BoxGeometry();
var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
La fonction pour l’animation du cube :
var animate = function () {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
};
animate();
Exemple d'utilisation
<!DOCTYPE html>
<html lang= »fr »>
<head>
<meta charset= »UTF-8″>
<meta name= »viewport » content= »width=device-width, initial-scale=1.0″>
<title>Exemple de projet</title>
<script src= »https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js »></script>
</head>
<body>
<script src= »votre-fichier-js.js »></script>
</body>
</html>
- Contenue du fichier.js :
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var geometry = new THREE.BoxGeometry();
var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
var animate = function () {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
};
animate();
Alternatives à Three.js
Voici les alternatives à celui-ci chacune à ces points forts et points faibles donc veillez à vous documentez avant de choisir :
Babylon.js :
- Une bibliothèque JavaScript puissante pour le développement de jeux, simulations, visualisations et applications 3D interactives.
- Offre une API simple et complète, ainsi que de nombreux exemples et tutoriels.
A-Frame :
- Un framework pour la création d’expériences en réalité virtuelle (VR) basé sur Three.js.
- Facile à utiliser pour les développeurs web, particulièrement ceux familiarisés avec HTML.
GLTF/GLB :
- Un format de fichier 3D qui peut être utilisé avec différentes bibliothèques et frameworks, y compris Three.js.
- Il est conçu pour être compact, efficace et adapté au streaming.
PixiJS :
- Une bibliothèque 2D rapide et légère qui peut également être utilisée pour des éléments 3D.
- Principalement axée sur les graphiques 2D, mais offre des fonctionnalités 3D de base.
