Topics

Auparavant, lorsque je consultais différents sites web, j'étais fasciné par les objets qui bougeaient au premier coup d'œil et par les animations qui donnaient une impression de profondeur, et je m'exclamais : « Waouh ! » À cette époque, je pensais : « Je veux faire quelque chose comme ça moi-même ! »Three.jsouBlenderIl fut un temps où j'ai essayé.

J'ai rejoint Liberogic avec une grande admiration, mais finalement… ces derniers temps, je me suis davantage consacré à des projets d'implémentation concrets, comme le développement d'applications métier et de CMS headless (rires). Je ne cherche absolument pas à les dénigrer !

Maintenant que nous sommes en quatrième année, je me souviens de mon désir ardent de disposer d'un « web dynamique » à l'époque.WebGLJe voudrais passer brièvement en revue les informations de base concernant les environs.

Qu'est-ce que WebGL ?

Qu'est-ce que WebGL ?Technologie d'affichage de graphiques 3D sur les sites webIl fonctionne sur tous les principaux navigateurs, notamment Chrome, Firefox et Safari.

Il y a longtemps, les plugins tels que Flash Player étaient la norme, mais ils présentaient le problème de la difficulté à fonctionner sur les smartphones.

À cet égard, WebGL est pris en charge nativement, donc la suiteUne technologie pionnière dans l'expression 3D à l'ère du mobileOn peut également dire que...

J'ai vraiment essayé

Affichage 3D dans le navigateur avec Three.js

Trois.jsUtilisation de JavaScriptUne bibliothèque sans marque déposée qui vous permet de créer facilement du contenu 3D.

Tout d'abord, en termes de concepts WebGL, vous avez besoin d'un moteur de rendu, d'une scène et d'une caméra.

Le Renderer est l'objet principal de Three.js.ScenedeCamera, le tronc de la caméraRenderer3D à l'intérieurSceneLa pièce sera rendue (dessinée) sous forme d'image 2D sur le canevas.

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

La pièce cubique 3D est créée à partir d'un objet d'affichage appelé maillage. Pour créer un maillage, il faut préparer la géométrie (forme) et le matériau (matériau).

// Géométrie (cube)

const geometry = new THREE.BoxGeometry(100, 100, 100)

/ Matériau (couleur)
const material = new THREE.MeshNormalMaterial
const box = new THREE.Mesh(geometry, material);

/ Ajouter à la scène
scene.add(box);

/ Lumière
const light = new THREE.DirectionalLight(0xffffff, 1);

light.position.set(1, 1, 1);

/ Ajouter à la scène
scene.add(light);

Enfin, ajoutez l'animation.

Je vais faire l'impasse sur l'implémentation des particules environnantes cette fois-ci !

function animate() {
  requestAnimationFrame(animate);

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

animate()

Lorsque vous effectuez le rendu d'une scène avec la caméra, la géométrie, le matériau et la lumière définis, elle sera affichée dans le navigateur.

Création de modèles 3D avec Blender

MixerLogiciel gratuit, open source et intégré couvrant l'ensemble du processus de production 3D, de la modélisation 3D à l'animation, au rendu, au développement de jeux et au montage vidéo.Blender ne peut pas, à lui seul, créer un site WebGL.

Blender utilise le même concept que Three.js : création de formes à l’aide d’objets maillés, ajout de couleur et de texture à l’aide de matériaux, ajustement de la façon dont la lumière frappe et projette des ombres grâce aux lumières, et ajustement de la position et de la direction de la caméra pour effectuer le rendu.

Vous pouvez créer des textures réalistes en combinant des nœuds, tels que des dégradés, des effets métalliques et des lueurs.

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

Affichage dans le navigateur de modèles 3D créés avec Blender grâce à Three.js

Exportez le modèle 3D créé dans Blender vers un fichier .glb et intégrez-le dans Three.js.

OrbitControls、GLTFLoader、DRACOLoaderImportez chaque fonction de la bibliothèque Three.js.

OrbitControlsest un utilitaire permettant de contrôler la caméra avec la souris,GLTFLoaderetDRACOLoadersont des utilitaires permettant de charger des modèles 3D au format GLTF et dans sa version compressée, le format DRACO.

La pomme modélisée s'affiche désormais dans le navigateur !

Cependant, lorsque j'affiche un modèle créé dans Blender dans un navigateur en utilisant Three.js,Différences dans les environnements de rendu et la compatibilité des matériauxLa couleur et la texture varieront en fonction du matériau ; vous devrez peut-être effectuer quelques ajustements pour obtenir l'aspect souhaité.

Mon travail quotidien consiste en l'intégration de systèmes de gestion de contenu (CMS) et la conception/construction de l'interface utilisateur d'applications métier, je n'ai donc pas beaucoup de contact avec l'expression 3D dans mon propre travail.

Mais quand je joue comme ça, je me rends compte une fois de plus que c'est vraiment amusant.

À cette époqueLa toile mobileC’est peut-être son admiration pour le passé qui l’a naturellement attiré vers la technologie moderne.

Eh bien, c'est de nouveau Next et Nuxt aujourd'hui !

Retour sur le site, sous une forme différenteLa toile mobileJe vais y arriver. 🚀