Présentation de WebGL 3D en HTML5 (Partie 2) – Introduction au développement de bibliothèques de classes et aux compétences du didacticiel framework_html5

Nous avons vu plus haut à quel point il est fatigant de développer en utilisant l'API WebGL native. De ce fait, un grand nombre de frameworks WebGL ont été développés. Grâce à ces frameworks, vous pouvez créer rapidement les scènes 3D dont vous avez besoin. Ces frameworks encapsulent divers éléments permettant de créer des 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, de sorte qu'il vous suffit de vous concentrer. plus sur la logique.

Actuellement, il n'y a aucun avantage qui puisse submerger les autres frameworks. Le type de framework à choisir dépend des préférences personnelles. Cependant, lors du choix d'un framework, je pense personnellement qu'il est préférable de regarder l'heure de la dernière mise à jour. le framework et choisissez Un framework stable et mis à jour vous permet de toujours utiliser les dernières fonctionnalités, rendant votre programme plus stable.

L'exemple suivant est développé à l'aide du framework Three.js.
Three.js est un framework open source relativement complet qui encapsule bien divers éléments des scènes 3D. Vous pouvez l'utiliser pour créer facilement des caméras, des modèles, des lumières, des matériaux et bien plus encore. Vous pouvez également choisir différents moteurs de rendu. Three.js propose une variété de méthodes de rendu. Vous pouvez choisir d'utiliser Canvas pour le rendu, ou vous pouvez utiliser WebGL ou SVG pour le rendu.

De plus, Three.js peut charger des fichiers 3D dans de nombreux formats. Vos fichiers de modèles peuvent provenir de Blender, Maya, Chinema4D, 3DMax, etc. Et il contient des éléments relativement basiques intégrés : (sphères) sphères, (avions) avions, (cubes) cubes, (cylindres) cylindres. Three.js facilite la création de ces objets.

D'accord, plus de bêtises, il suffit de regarder le code :

var caméra, scène, rendu;
var mesh;
init();
animate();

function init(){
scène = nouveau TROIS. Scene();
camera = new THREE.PerspectiveCamera(70,window.innerWidth / window.innerHeight,1,1000);
camera.position.z = 400;
scene.add(camera);
géométrie = new THREE.CubeGeometry(200,200,200);
materials = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } );
mesh = new THREE.Mesh(geometry,material);
scene.add (mesh);
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth,window.innerHeight);
document.body.appendChild(renderer.domElement) ;
}
function animate() {
requestAnimationFrame( animate );
mesh.rotation.x = 0.05;
mesh.rotation.y = 0.05;
renderer.render( scène, caméra );
}



C'est tout le code. Par rapport au code précédent utilisant l'API WebGL, c'est tout simplement trop simple.
Le code est très intuitif, quelques étapes seulement :
1. Créez une scène.
2. Créez une caméra.
3. Créer/charger la géométrie du modèle.
4. Chargez le matériel.
5. Rendu le maillage d'objet du modèle (composé de géométrie et de matériau).
6. Activer l'animation.

Il s'agit d'une fonction fournie par chaque framework. En utilisant différents frameworks, ces étapes sont fondamentalement les mêmes sauf que les noms des fonctions peuvent être différents. Il existe de nombreux documents d'apprentissage-cadre répertoriés dans la référence ci-dessous. Vous pouvez en choisir plusieurs à apprendre.

Concernant les données du modèle, je voudrais également dire que parce que JSON est court et concis, il est plus adapté à la transmission réseau. À l'avenir, il pourrait devenir le format de données de modèle le plus approprié pour WebGL, c'est pourquoi de nombreux frameworks ont commencé à prendre en charge les données de 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 de haute qualité : http://webglplayground.net/
Tutoriels de base sur divers frameworks : http://www.html5china.com/HTML5features/WebGL/
Tutoriel chinois WebGL : http://www.hiwebgl.com/?p=42
Tutoriel chinois Oak3D : http://www.hiwebgl.com/ ?cat =57
Site officiel de CubecVR3D : http://www.cubicvr.org/
Bibliothèque graphique Three.js : https://github.com/ mrdoob/trois .js
Messages de collection de divers frameworks : http://www.appcrews.com/2011/07/129.html