Nous avons vu à quel point il est fatigué d'utiliser le développement de l'API WebGL indigène. Pour cette raison, un grand nombre de cadres WebGL ont été développés. Avec ces frameworks, vous pouvez rapidement créer les scènes 3D requises. Ces cadres encapsulent divers éléments de création de scènes 3D à des degrés divers, tels que des scènes, des caméras, des modèles, des éclairages, des matériaux, etc.; En utilisant ces objets encapsulés, vous pouvez facilement créer les scènes 3D requises, afin que vous n'ayez besoin que de concentrer plus d'énergie sur la logique.
À l'heure actuelle, personne n'a l'avantage d'écraser d'autres cadres. Le type de cadre à choisir dépend de vos préférences personnelles. Cependant, lors du choix d'un cadre, je pense personnellement qu'il est préférable d'examiner la dernière heure de mise à jour du cadre. Le choix d'un framework mis à jour stable peut toujours utiliser les dernières fonctionnalités et rendre votre programme plus stable.
L'exemple suivant utilise le cadre Three.js pour le développement.
Three.js est un cadre open source relativement complet, qui est bien encapsulé avec divers éléments de scènes 3D. Vous pouvez l'utiliser pour créer facilement des caméras, des modèles, un éclairage, des matériaux et plus encore. Vous pouvez également choisir différents rendus. Three.js fournit une variété de méthodes de rendu. Vous pouvez choisir d'utiliser Canvas pour rendre ou utiliser WebGL ou SVG pour rendre.
De plus, Three.js peut charger des fichiers 3D dans de nombreux formats, et vos fichiers de modèle peuvent provenir de Blender, Maya, Chinema4d, 3Dmax, etc. et il a des choses relativement basiques intégrées: (sphères) Sphheres, (avions) Planes, (cubes) Cubes, (cylindres) Cylindres. Three.js crée ces objets très facilement.
Ok, ne parlez pas de bêtises, regardez simplement le code:
<! Doctype html>
<html>
<adal>
<Title> ThreeJsdemo </Title>
<meta charset = "utf-8">
<style>
Corps
{
marge: 0px;
Color d'arrière-plan: # B0B0B0;
surcharge: cachée;
}
</ style>
</ head>
<body>
<script src = "trois.js"> </ script>
<cript>
Caméra var, scène, rendu;
Var Mesh;
init ();
animer();
fonction init () {
Scène = new Three.Scene ();
caméra = new Three.PerspectiveCamera (70, Window.InnerWidth /Window.innerHeight,1,1000);
caméra.position.z = 400;
scene.add (caméra);
Géométrie = nouveau trois.cubegeométrie (200 200,200);
matériel = new Three.MeshBasicMaterial ({couleur: 0xff0000, wireframe: true});
Mesh = new Three.Mesh (géométrie, matériel);
Scene.Add (Mesh);
Renderer = new Three.WebglRenderer ();
Renderer.SetSize (Window.InnerWidth, Window.InnerHeight);
Document.Body.ApendChild (renderer.DomElement);
}
fonction animate () {
requestanimationframe (animate);
Mesh.rotation.x + = 0,05;
Mesh.rotation.y + = 0,05;
renderer.render (scène, appareil photo);
}
</cript>
</docy>
</html>
C'est tout le code, par rapport au code précédent à l'aide de l'API WebGL, c'est tout simplement trop simple.
Le code est très intuitif, juste quelques étapes:
1. Créer une scène de scène.
2. Créez une caméra.
3. Géométrie du modèle de création / charge.
4. Chargez le matériau du matériau.
5. Rendez le modèle d'objet modèle (composé de géométrie et de matériel).
6. Activer l'animation.
Il s'agit d'une fonctionnalité fournie par chaque cadre. L'utilisation de différents frameworks est essentiellement la même, sauf que les noms de fonction peuvent être différents. La référence suivante répertorie de nombreux documents d'apprentissage du framework, vous pouvez choisir plusieurs façons d'apprendre.
En ce qui concerne les données du modèle, je voudrais dire une chose, car JSON est courte et concise, elle convient plus à la transmission du réseau. À l'avenir, il peut devenir le format de données de modèle le plus approprié pour WebGL, de sorte que de nombreux cadres ont commencé à prendre en charge les données du modèle au format JSON.
Référence pratique:Centre de développement: https://developer.mozilla.org/en/webgl
Outils de développement en ligne premium: http://webglplayground.net/
Tutoriels de base pour divers frameworks: http: //www.html5/ "> html5china.com/html5features/webgl/
Tutoriel chinois Webgl: http://www.hiwebgl.com/?p=42
Tutoriel chinois Oak3d: http://www.hiwebgl.com/?cat=57
CUBICVR3D Site Web officiel: http://www.cubicvr.org/
Three.js Bibliothèque graphique: https://github.com/mrdoob/tthree.js
Collecte de publications pour divers cadres: http://www.appcrews.com/2011/07/129.html