Explorer la représentation 3D (WebGL) en rêve — L'époque où nous nous y sommes lancés

Autrefois, en parcourant différents sites Web, j'étais fasciné par les objets en rotation au-dessus de la ligne de flottaison et les animations avec profondeur. À l'époque, j'ai pensé « Je veux créer quelque chose comme ça ! » et j'ai commencé à explorer Three.js et Blender.

Après être entré chez Liberogic avec cette aspiration, le résultat en est que… dernièrement, je passe mes journées sur des implémentations bien plus pragmatiques, comme les applications métier et la construction de headless CMS (rires). Ce n'est pas une critique, loin de là !

Maintenant que je suis en quatrième année, en repensant à cette aspiration du « Web en mouvement » d'autrefois, j'aimerais revoir brièvement les bases autour de WebGL.

Qu'est-ce que WebGL ?

WebGL est une technologie permettant d'afficher des graphiques 3D sur les sites Web et fonctionne sur tous les principaux navigateurs, notamment Chrome, Firefox et Safari.

Autrefois, les plugins comme Flash Player dominaient, mais ils présentaient le problème de ne pas fonctionner facilement sur les smartphones.

À cet égard, WebGL bénéficiant d'une prise en charge native, on pourrait aussi dire que c'est la technologie qui a ouvert la voie à la représentation 3D à l'ère mobile qui a suivi.

Mise en pratique

Afficher la 3D dans le navigateur avec Three.js

Three.js est une bibliothèque librement utilisable qui permet de créer facilement du contenu 3D en utilisant JavaScript.

D'abord, en tant que concept WebGL, vous avez besoin d'un Renderer, d'une Scene et d'une Camera.

Le Renderer est l'objet principal de Three.js. Lorsque vous transmettez Scene et Camera au Renderer, la partie de la Scene 3D qui se trouve dans le frustum de la caméra est rendue (dessinée) sous forme d'image 2D sur le canvas.

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);

Ensuite, le cube 3D est créé à l'aide d'un objet d'affichage appelé Mesh. Pour créer un Mesh, vous devez préparer une Geometry (forme) et un Material (matériau).

//ジオメトリ（立方体）
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, ajoutez une animation.

L'implémentation des particules environnantes n'est pas traitée cette fois-ci!

function animate() {
  requestAnimationFrame(animate);

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

animate()

Lorsque vous rendez la scene contenant la camera, la geometry, le material et la light configurés, elle s'affiche dans le navigateur.

Créer une modélisation 3D avec Blender

Blender est un logiciel intégré open source gratuit qui couvre l'ensemble du processus de production 3D, du modelage 3D, l'animation, le rendu, le développement de jeux jusqu'à l'édition vidéo. Blender seul ne peut pas créer de sites WebGL.

Tout comme Three.js, Blender utilise le même concept : les objets maillage créent les formes, les matériaux ajoutent les couleurs et les textures. Ensuite, vous ajustez l'éclairage et les ombres avec les lumières, puis effectuez un rendu en ajustant la position et la direction de la caméra.

En combinant les nœuds, vous pouvez créer des textures réalistes : dégradés, effets métalliques, émission de lumière, etc.

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

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

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

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

OrbitControls est un utilitaire de contrôle de la caméra à la souris, tandis que GLTFLoader et DRACOLoader sont des utilitaires respectivement pour charger les modèles 3D au format GLTF et DRACO (une version compressée du format GLTF).

J'ai affiché une pomme modélisée dans le navigateur !

Cependant, lorsque j'affiche un modèle créé dans Blender avec Three.js dans le navigateur, les différences d'environnement de rendu et la compatibilité des matériaux font que les couleurs et les textures apparaissent différentes de ce que j'imaginais. Il faut un peu d'ajustement pour obtenir l'apparence souhaitée.

Au quotidien, mes projets consistent essentiellement en intégration de headless CMS et conception / développement frontend d'applications métier, donc j'ai rarement l'occasion de travailler avec des rendus 3D dans mes tâches.

Mais en expérimentant ainsi, je réalise « c'est vraiment amusant, finalement ».

Peut-être que la fascination d'autrefois pour le Web interactif m'a naturellement menée vers les technologies modernes.

Allons-y, c'est Next et Nuxt aujourd'hui !

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