Préface
L'éditeur a déjà publié sur des formes et des matériaux géométriques. Je crois qu'après avoir lu et appris, nous pouvons les utiliser pour créer des objets. L'objet le plus couramment utilisé est un maillage, qui est un objet composé de sommets, de bords, de visages, etc.; D'autres objets incluent des segments de ligne, des os, des systèmes de particules, etc. Pour créer un objet, vous devez spécifier la forme et le matériau géométriques. Parmi eux, la forme géométrique détermine la position du sommet de l'objet et d'autres informations, et le matériau détermine la couleur, la texture et d'autres informations de l'objet.
1. Créez une grille
Dans les articles précédents, nous avons appris à créer des formes et des matériaux géométriques, et créer un maillage est très simple, il suffit de passer les formes et les matériaux géométriques dans son constructeur. L'objet le plus couramment utilisé est un maillage, qui représente une géométrie contenant des points, des lignes et des surfaces. Son constructeur est:
Mesh (géométrie, matériau)
Ici, apprenons à créer une grille avec un exemple spécifique:
Var Material = new Three.MeshlambertMaterial ({couleur: 0xffff00}); var géométrie = new Three.cubegeometry (1, 2, 3); var Mesh = new Three.Mesh (Geometry, Material); Scene.Add (Mesh);Si le matériel et la géométrie ne sont pas réutilisés par la suite, ils peuvent également être écrits ensemble comme:
var mesh = new Three.Mesh (new Three.CubeGeometry (1, 2, 3), new Three.MeshlambertMaterial ({Color: 0xffff00})); scene.Add (Mesh);Après avoir ajouté l'éclairage, le résultat est:
Si le matériau n'est pas spécifié, un matériau avec un vrai wireframe sera attribué au hasard à chaque fois. La couleur après rafraîchir la page est différente. Un effet possible est:
Code source:
<! Doctype html> <html> <éadf> <meta charset = "utf-8"> <itle> 3.js Test 9.1 </title> </ head> <body onload = "init ()"> <canvas id = "MainCanvas"> </ Canvas> </body> <script type = "text / javascript" src = "js / trois.min.js"> </ script> <script type = "text / javaScript"> function init () {var renderer = new Three.webglRenderer ({canvas: document.getElementById ('MainCanvas')}); renderer.setClearColor (0x0000000); var scene = new Three.Scene (); // caméra var caméra = new Three.othographicaMamera (-2,5, 2,5, 1,875, -1,875, 0,1, 100); caméra.position.set (5, 5, 20); caméra.lookat (new Three.Vector3 (0, 0, 0)); scene.add (caméra); var Material = new Three.MeshlambertMaterial ({couleur: 0xffff00}); // var Material = new Three.MeshBasicMaterial ({// Color: 0xffff00, // wireframe: true //}); Var Géométrie = nouveau trois.cubegeométrie (1, 2, 3); var mesh = new Three.Mesh (géométrie, matériel); Scene.Add (Mesh); var Light = new Three.DirectionAllight (0xffffff); Light.Position.set (20, 10, 5); scene.add (lumière); // Render renderer.render (scène, appareil photo); } </ script> </html>2. Modifier les propriétés
2.1 Modifier le matériau
En plus de spécifier le matériau dans le constructeur, le matériau peut également être modifié après la création du maillage:
Var Material = new Three.MeshlambertMaterial ({couleur: 0xffff00}); var géométrie = new Three.Cubegeométrie (1, 2, 3); var Mesh = new Three.Mesh (géométrie, matériau); Scene.Add (Mesh); Mesh.Material = new Three.MeshlambertMaterial ({Color: 0xFF0000});La couleur finale est rouge:
Code source:
<! Doctype html> <html> <éadf> <meta charset = "utf-8"> <tight> 3.js test9.2 </ title> </ head> <body onload = "init ()"> <canvas id = "MainCanvas"> </ Canvas> </ / body> <script = "text / javascript" src = "js / trois. <script type = "text / javascript"> function init () {var renderer = new Three.WebglRenderer ({canvas: document.getElementById ('MainCanvas')}); renderer.setClearColor (0x0000000); var scene = new Three.Scene (); // caméra var caméra = new Three.othographicaMamera (-2,5, 2,5, 1,875, -1,875, 0,1, 100); caméra.position.set (5, 5, 20); caméra.lookat (new Three.Vector3 (0, 0, 0)); scene.add (caméra); var Material = new Three.MeshlambertMaterial ({couleur: 0xffff00}); Var Géométrie = nouveau trois.cubegeométrie (1, 2, 3); var mesh = new Three.Mesh (géométrie, matériel); Scene.Add (Mesh); Mesh.Material = new Three.MeshlambertMaterial ({Color: 0xFF0000}); var Light = new Three.DirectionAllight (0xffffff); Light.Position.set (20, 10, 5); scene.add (lumière); // Render Renderer Renderer.Render (scène, appareil photo); } </ script> </html>2.2 Position, zoom, rotation
La position, la mise à l'échelle et la rotation sont trois propriétés communes des objets. Puisque trois.Mesh est basé sur trois.Object3d, il contient trois attributs: échelle, rotation et position. Ce sont toutes les trois instances Vector3, donc la méthode de modification de leurs valeurs est la même, prenant ici la position comme exemple.
Three.Vector3 a trois attributs: x, y et z. Si vous ne définissez que l'un des attributs, vous pouvez utiliser la méthode suivante:
Mesh.Position.z = 1;
Si vous devez définir plusieurs propriétés en même temps, vous pouvez utiliser les deux méthodes suivantes:
Mesh.Position.set (1.5, -0,5, 0);
ou:
Mesh.Position = new Three.Vector3 (1.5, -0,5, 0);
L'attribut correspondant de l'échelle est l'échelle et l'attribut correspondant de la rotation est la rotation. La méthode spécifique est la même que l'exemple ci-dessus, qui indique respectivement la mise à l'échelle ou la rotation le long des trois axes x, y et z.
Code source:
<! Doctype html> <html> <éadf> <meta charset = "utf-8"> <itle> 3.js test9.3 </ title> </ head> <body onload = "init ()"> <canvas id = "MainCanvas"> </ Canvas> <script type = "text / javascript"> function init () {var renderer = new Three.WebglRenderer ({canvas: document.getElementById ('MainCanvas')}); renderer.setClearColor (0x0000000); var scene = new Three.Scene (); // caméra var caméra = new Three.othographicaMamera (-2,5, 2,5, 1,875, -1,875, 0,1, 100); caméra.position.set (5, 5, 20); caméra.lookat (new Three.Vector3 (0, 0, 0)); scene.add (caméra); var Material = new Three.MeshlambertMaterial ({couleur: 0xffff00}); Var Géométrie = nouveau trois.cubegeométrie (1, 2, 3); var mesh = new Three.Mesh (géométrie, matériel); Scene.Add (Mesh); Mesh.Position.set (1.5, -0,5, 0); Mesh.Position = new Three.Vector3 (1.5, -0,5, 0); Mesh.Position.z = 1; var Light = new Three.DirectionAllight (0xffffff); Light.Position.set (20, 10, 5); scene.add (lumière); Drawaxes (scène); // Render renderer.render (scène, appareil photo); } fonction Drawaxes (scène) {// x-axe var xgeo = new Three.Geometry (); xgeo.vertices.push (new Three.Vector3 (0, 0, 0)); xgeo.vertices.push (new Three.Vector3 (1, 0, 0)); var xmat = new Three.LineBasicMaterial ({couleur: 0xff0000}); var xaxis = new Three.line (xgeo, xmat); scene.add (xaxis); // Y-axis var ygeo = new Three.Geometry (); ygeo.vertices.push (new Three.Vector3 (0, 0, 0)); ygeo.vertices.push (new Three.Vector3 (0, 1, 0)); var ymat = new Three.LineBasicMaterial ({couleur: 0x00ff00}); var yaxis = new Three.line (ygeo, ymat); scene.add (yaxis); // Z-axe var zgeo = new Three.Geometry (); zgeo.vertices.push (new Three.Vector3 (0, 0, 0)); zgeo.vertices.push (new Three.vector3 (0, 0, 1)); var zmat = new Three.LineBasicMaterial ({couleur: 0x00ccff}); var zaxis = new Three.line (zgeo, zmat); scene.add (zaxis); } </ script> </html>Le contenu de cet article se termine ici. L'article présente la grille en trois.js à travers des exemples et des images détaillés. J'espère que cet article sera utile à tout le monde d'en apprendre trois.js.