Le temps où je rêvais de la 3D web (WebGL) - Essais avec Three.js et Blender

Autrefois, je passais beaucoup de temps à parcourir différents sites web, subjugué par les objets qui s'animaient dès la première vue et par les animations pleines de profondeur. « Waouh, c'est magnifique ! » Un jour, saisi par l'envie de créer moi-même ce genre de choses, je me suis lancé dans Three.js et Blender.

C'est avec cette admiration que j'ai rejoint Liberogic, mais, pour être honnête... ces derniers temps, mes journées se composent surtout de développements plus concrets, comme des applications métier ou la construction de headless CMS. Ce n'est pas que je critique, hein ! (rires)

Alors que j'entame désormais ma quatrième année, je repense à mon envie de « faire bouger le web » et je voudrais revenir brièvement sur les bases de WebGL.

Qu'est-ce que WebGL ?

WebGL est une technologie qui permet d'afficher des graphismes 3D directement dans un site web, et fonctionne sur l'ensemble des principaux navigateurs, dont Chrome, Firefox et Safari.

Autrefois, les plugins comme Flash Player étaient dominants, mais ils posaient problème sur smartphone.

WebGL, grâce à sa prise en charge native, peut en revanche être considéré comme la technologie qui a ouvert la voie à la représentation 3D à l'ère du mobile.

Essayons en pratique

Afficher de la 3D dans le navigateur avec Three.js

Three.js est une bibliothèque sous licence commerciale permettant de créer facilement du contenu 3D en utilisant JavaScript.

Tout d'abord, les concepts de WebGL reposent sur trois éléments : Renderer, Scene et Camera.

Renderer est l'objet principal de Three.js. En transmettant une Scene à une Camera, la partie de la Scene 3D située dans le volume de visualisation de la caméra est rendue sous forme d'image 2D sur le canevas par le Renderer.

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(
  1000, // 視野角
  window.innerWidth / window.innerHeight, // 側面
  75, // 近く
  1000 // 遠い
);
camera.position.set(0, 0, 400);

//マウスで制御
const controls = new OrbitControls(camera, document.body);

//html側の<canvas id="myCanvas"></canvas>を取得
const renderer = new THREE.WebGLRenderer({
  canvas: document.querySelector("#myCanvas"),
  antialias: true,
});

//setSize()メソッドでサイズを設定
renderer.setSize(window.innerWidth, window.innerHeight);
//背景色も変更可能
renderer.setClearColor("#000")

//htmlの<canvas id="myCanvas"></canvas>へ流し込み
document.body.appendChild(renderer.domElement);

Le cube 3D est ensuite créé à l'aide d'un objet d'affichage appelé mesh. Pour créer un mesh, il faut préparer une géométrie (forme) et un matériau (surface).

//ジオメトリ（立方体）
const geometry = new THREE.BoxGeometry(100, 100, 100)

//マテリアル（色）
const material = new THREE.MeshNormalMaterial
const box = new THREE.Mesh(geometry, material);
//Sceneに追加
scene.add(box);

//ライト
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(1, 1, 1);
//Sceneに追加
scene.add(light);

Enfin, ajoutons une animation.

Nous ne traiterons pas ici de l'implémentation des particules environnantes !

function animate() {
  requestAnimationFrame(animate);

  box.rotation.x += 0.005;
  box.rotation.y += 0.005;
  renderer.render(scene, camera);
}

animate()

Lorsque la scène contenant la caméra, la géométrie, le matériau et la lumière configurés est rendue, elle s'affiche dans le navigateur.

Créer une modélisation 3D avec Blender

Blender est un logiciel intégré et open source qui couvre gratuitement toutes les étapes de la création 3D, de la modélisation 3D à l'animation, au rendu, au développement de jeux et au montage vidéo. Blender seul ne permet pas de créer un site WebGL.

Blender fonctionne selon le même principe que Three.js : on crée une forme à l'aide d'un objet maillage, on lui applique une couleur et une texture avec un matériau, puis on règle l'éclairage avec les lumières, la direction des ombres, et enfin la position et l'orientation de la caméra avant de lancer le rendu.

En combinant les nœuds, on peut créer des dégradés, un aspect métallique ou une émission lumineuse, et obtenir ainsi des textures d'un réalisme saisissant.

Référence : https://www.youtube.com/watch?v=DsNZzUZPhw4

Afficher dans le navigateur un modèle 3D créé dans Blender avec Three.js

Exportez le modèle 3D créé dans Blender au format .glb, puis intégrez-le dans Three.js.

Importez les fonctionnalités OrbitControls, GLTFLoader et DRACOLoader depuis la bibliothèque Three.js.

OrbitControls est un utilitaire permettant de contrôler la caméra à la souris, tandis que GLTFLoader et DRACOLoader permettent de charger respectivement des modèles 3D au format GLTF et au format DRACO, sa version compressée.

Une pomme modélisée s'affiche dans le navigateur !

Cependant, lorsque le modèle créé dans Blender est affiché dans le navigateur avec Three.js, les différences d'environnement de rendu et la compatibilité des matériaux peuvent faire apparaître des couleurs et des textures différentes. Un certain ajustement est nécessaire pour obtenir le rendu souhaité.

Mes projets quotidiens portent surtout sur l'intégration de CMS et la conception / le développement frontend d'applications métier, et je travaille donc beaucoup moins sur les rendus 3D.

Pourtant, en m'amusant avec tout cela, je me redis : « C'est vraiment passionnant ! »

C'est sans doute cette envie de créer un Web vivant de l'époque qui m'a naturellement poussé vers les technologies modernes.

Allez, Next, Nuxt, c'est parti pour aujourd'hui !

De retour sur le terrain, je vais continuer à créer du Web vivant, sous d'autres formes. 🚀