Prefacio
El editor ha publicado sobre formas y materiales geométricos antes. Creo que después de haber leído y aprendido, podemos usarlos para crear objetos. El objeto más utilizado es una malla, que es un objeto compuesto de vértices, bordes, caras, etc.; Otros objetos incluyen segmentos de línea, huesos, sistemas de partículas, etc. Para crear un objeto, debe especificar la forma geométrica y el material. Entre ellos, la forma geométrica determina la posición del vértice del objeto y otra información, y el material determina el color, la textura y otra información del objeto.
1. Crea una cuadrícula
En los artículos anteriores, aprendimos cómo crear formas y materiales geométricos, y crear una malla es muy simple, simplemente pase las formas y materiales geométricos a su constructor. El objeto más utilizado es una malla, que representa una geometría que contiene puntos, líneas y superficies. Su constructor es:
Malla (geometría, material)
Aquí, aprendamos cómo crear una cuadrícula con un ejemplo específico:
VAR MATERIAL = nuevo tres.MeshlambertMaterial ({color: 0xffff00}); var geometry = new tres.CubeGeometry (1, 2, 3); var mal = nuevo tres.mesh (geometría, material); escena.add (malla);Si el material y la geometría no se reutilizan después, también se pueden escribir juntos como:
var male = nuevo tres.mesh (nuevo tres.CubeGeometry (1, 2, 3), nuevo tres.MeshlambertMaterial ({color: 0xffff00})); escena.add (malla);Después de agregar iluminación, el resultado es:
Si no se especifica el material, un material con una estructura de alambre verdadera se asignará aleatoriamente cada vez. El color después de actualizar la página es diferente. Un posible efecto es:
Código fuente:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <title> 3.js test 9.1 </title> </head> <body onload = "init ()"> <canvas id = "maincanvas"> </ Canvas> </body> <script type = "text/javaScript" src = "js/tres.min.js"> </script> <script type = "text/javascript"> function init () {var renderer = new tres.webglrenderer ({canvas: document.getElementById ('MainCanvas')}); renderer.setClearColor (0x0000000); VAR Scene = new Three.scene (); // cámara var cámara = nueva tres.tográficacamera (-2.5, 2.5, 1.875, -1.875, 0.1, 100); Camera.Position.set (5, 5, 20); Camera.lookat (nuevo tres.vector3 (0, 0, 0)); escena.add (cámara); VAR Material = nuevo tres.MeshlambertMaterial ({color: 0xffff00}); // var material = nuevo tres.MeshBasicMaterial ({// color: 0xffff00, // wireframe: true //}); var geometry = new Three.CubeGeometry (1, 2, 3); Var malla = nueva tres.mesh (geometría, material); escena.add (malla); var light = new Three.DirectionAllight (0xffffff); Light.Position.set (20, 10, 5); escena.add (luz); // render renderer.render (escena, cámara); } </script> </html>2. Modificar propiedades
2.1 Modificar el material
Además de especificar el material en el constructor, el material también se puede modificar después de crear la malla:
VAR Material = nuevo tres.MeshlambertMaterial ({color: 0xffff00}); var geometry = new tres.CubeGeometry (1, 2, 3); var mal = nuevo tres.mesh (geometría, material); Scene.Add (Mesh); Mesh.Material = new Three.MeshlambertMaterial ({Color: 0xff0000});El color final es rojo:
Código fuente:
<! Doctype html> <html> <fead> <meta charset = "utf-8"> <title> 3.js test9.2 </title> </head> <body onload = "init ()"> <canvas id = "maincanvas"> </ Canvas> </body> <script type = "text/javaScript" src = "js/tres.js.js" </body " <script type = "text/javascript"> function init () {var renderer = new tres.webglrenderer ({Canvas: document.getElementById ('MainCanvas')}); renderer.setClearColor (0x0000000); VAR Scene = new Three.scene (); // cámara var cámara = nueva tres.tográficacamera (-2.5, 2.5, 1.875, -1.875, 0.1, 100); Camera.Position.set (5, 5, 20); Camera.lookat (nuevo tres.vector3 (0, 0, 0)); escena.add (cámara); Material var = nuevo tres.MeshlambertMaterial ({color: 0xffff00}); var geometry = new Three.CubeGeometry (1, 2, 3); Var malla = nueva tres.mesh (geometría, material); escena.add (malla); Mesh.Material = new Three.MeshlambertMaterial ({color: 0xff0000}); var light = new Three.DirectionAllight (0xffffff); Light.Position.set (20, 10, 5); escena.add (luz); // renderer renderer renderer.render (escena, cámara); } </script> </html>2.2 Posición, zoom, rotación
La posición, la escala y la rotación son tres propiedades comunes de los objetos. Dado que tres.mesh se basa en tres.object3d, contiene tres atributos: escala, rotación y posición. Son las tres instancias de tres.vector3, por lo que el método de modificar sus valores es el mismo, aquí toma la posición como ejemplo.
Tres.vector3 tiene tres atributos: x, y y z. Si solo establece uno de los atributos, puede usar el siguiente método:
mesh.position.z = 1;
Si necesita establecer múltiples propiedades al mismo tiempo, puede usar los siguientes dos métodos:
mesh.position.set (1.5, -0.5, 0);
o:
mesh.position = new Three.vector3 (1.5, -0.5, 0);
El atributo correspondiente de escala es la escala, y el atributo correspondiente de rotación es la rotación. El método específico es el mismo que el ejemplo anterior, que indica escala o rotación a lo largo de los tres ejes x, y y z respectivamente.
Código fuente:
<! Doctype html> <html> <fead> <meta charset = "utf-8"> <title> 3.js test9.3 </title> </head> <body onload = "init ()"> <canvas id = "maincanvas"> </ Canvas> </body> <script type = "text/javaScript" src = "js/tres.js.js" </body "<////script/javaScript" src = "js/tres.js.js" <////////javegumen <script type = "text/javascript"> function init () {var renderer = new tres.webglrenderer ({Canvas: document.getElementById ('MainCanvas')}); renderer.setClearColor (0x0000000); VAR Scene = new Three.scene (); // cámara var cámara = nueva tres.tográficacamera (-2.5, 2.5, 1.875, -1.875, 0.1, 100); Camera.Position.set (5, 5, 20); Camera.lookat (nuevo tres.vector3 (0, 0, 0)); escena.add (cámara); Material var = nuevo tres.MeshlambertMaterial ({color: 0xffff00}); var geometry = new Three.CubeGeometry (1, 2, 3); Var malla = nueva tres.mesh (geometría, material); escena.add (malla); 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); escena.add (luz); Drawaxes (escena); // render renderer.render (escena, cámara); } function drawAxes (escena) {// x-eje var xgeo = new tres.geometry (); xgeo.vertices.push (nuevo tres.vector3 (0, 0, 0)); xgeo.vertices.push (nuevo tres.vector3 (1, 0, 0)); var xmat = new Three.lineBasicMaterial ({color: 0xff0000}); var xaxis = nuevo tres.line (xgeo, xmat); escena.add (xaxis); // y-eje var ygeo = new Three.Geometry (); ygeo.vertices.push (nuevo tres.vector3 (0, 0, 0)); ygeo.vertices.push (nuevo tres.vector3 (0, 1, 0)); var ymat = nuevo tres.lineBasicMaterial ({color: 0x00ff00}); var yaxis = nuevo tres.line (ygeo, ymat); escena.add (yaxis); // z-eje var zgeo = new Three.Geometry (); zgeo.vertices.push (nuevo tres.vector3 (0, 0, 0)); zgeo.vertices.push (nuevo tres.vector3 (0, 0, 1)); var zmat = nuevo tres.lineBasicMaterial ({color: 0x00ccff}); var zaxis = nuevo tres.line (Zgeo, ZMAT); escena.add (zaxis); } </script> </html>El contenido de este artículo termina aquí. El artículo presenta la cuadrícula en tres.js a través de ejemplos e imágenes detallados. Espero que este artículo sea útil para que todos aprendan tres.js.