Prefácio
O editor publicou sobre formas e materiais geométricos antes. Acredito que, depois de ler e aprender, podemos usá -los para criar objetos. O objeto mais usado é uma malha, que é um objeto composto de vértices, bordas, rostos, etc.; Outros objetos incluem segmentos de linha, ossos, sistemas de partículas etc. Para criar um objeto, você precisa especificar a forma e o material geométricos. Entre eles, a forma geométrica determina a posição do vértice e outras informações do objeto, e o material determina a cor, a textura e outras informações do objeto.
1. Crie uma grade
Nos artigos anteriores, aprendemos a criar formas e materiais geométricos, e a criação de uma malha é muito simples, basta passar as formas e materiais geométricos em seu construtor. O objeto mais usado é uma malha, que representa uma geometria contendo pontos, linhas e superfícies. Seu construtor é:
Malha (geometria, material)
Aqui, vamos aprender a criar uma grade com um exemplo específico:
var material = new Three.SeshlambertMaterial ({color: 0xffff00}); var geometria = new Three.cubegeometry (1, 2, 3); var mesh = new Three.mesh (geometria, material); cenário.add (msh);Se o material e a geometria não forem reutilizados depois, eles também podem ser escritos juntos como:
var mesh = new Three.mesh (novo Three.cubegeometry (1, 2, 3), novo Three.Seshlambertmaterial ({color: 0xffff00})); cenário.add (msh);Depois de adicionar iluminação, o resultado é:
Se o material não for especificado, um material com quadro de fio verdadeiro será atribuído aleatoriamente a cada vez. A cor após a atualização da página é diferente. Um efeito possível é:
Código -fonte:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <title> 3.js teste 9.1 </ititle> </ad Head> <corpo onload = "init ()"> <canvas id = "maincanvas"> </canvas> </body> <cript type = "text/javs" "" " src = "js/three.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 (); // câmera var câmera = new Three.tográficoCamera (-2,5, 2,5, 1.875, -1,875, 0,1, 100); câmera.Position.set (5, 5, 20); câmera.Lookat (new Three.Vector3 (0, 0, 0)); cena.add (câmera); var material = new Three.mashlambertmaterial ({color: 0xffff00}); // var material = new Three.MeshBasicMaterial ({// color: 0xffff00, // wireframe: true //}); var geometria = new Three.cubegeometria (1, 2, 3); var mesh = new Three.mesh (geometria, material); cena.add (malha); var luz = novo Three.DirectionAllight (0xffffff); luz.Position.set (20, 10, 5); cenário.Add (luz); // renderize renderer.render (cena, câmera); } </script> </html>2. Modifique as propriedades
2.1 Modificar o material
Além de especificar o material no construtor, o material também pode ser modificado após a criação da malha:
var material = new Three. Meshlambertmaterial ({color: 0xffff00}); var geometria = new Three.cubegeometry (1, 2, 3); var mesh = new Three.mesh (geometria, material); cenário.Add (malha); mesh.material = new Three.mashlambertmaterial ({color: 0xff0000});A cor final é vermelha:
Código -fonte:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <title> 3.js test9.2 </ititle> </head> <corpo onload = "init ()"> <canvas id = "maincanvas"> </canvas> </body> <cript type = "text/javs/javss" src = "js/three.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 (); // câmera var câmera = new Three.tográficoCamera (-2,5, 2,5, 1.875, -1,875, 0,1, 100); câmera.Position.set (5, 5, 20); câmera.Lookat (new Three.Vector3 (0, 0, 0)); cena.add (câmera); var material = new Three.SeshlambertMaterial ({color: 0xffff00}); var geometria = new Three.cubegeometria (1, 2, 3); var mesh = new Three.mesh (geometria, material); cena.add (malha); Mesh.material = new Three.mashlambertmaterial ({color: 0xff0000}); var luz = novo Three.DirectionAllight (0xffffff); luz.Position.set (20, 10, 5); cenário.Add (luz); // renderizador de renderizador Renderer.render (cena, câmera); } </script> </html>2.2 Posição, zoom, rotação
Posição, escala e rotação são três propriedades comuns de objetos. Como três.Mesh é baseado em três.Object3D, ele contém três atributos: escala, rotação e posição. Eles são todos três.
Três.Vector3 tem três atributos: x, y e z. Se você definir apenas um dos atributos, poderá usar o seguinte método:
mesh.position.z = 1;
Se você precisar definir várias propriedades ao mesmo tempo, poderá usar os dois métodos a seguir:
Mesh.Position.Set (1.5, -0,5, 0);
ou:
Mesh.Position = new Three.Vector3 (1,5, -0,5, 0);
O atributo correspondente da escala é a escala e o atributo correspondente da rotação é a rotação. O método específico é o mesmo que o exemplo acima, que indica escala ou rotação ao longo dos três eixos x, y e z, respectivamente.
Código -fonte:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <title> 3.js test9.3 </ititle> </head> <corpo onload = "init ()"> <canvas id = "maincanvas"> </canvas> </body> <cript type = "text/javs/javas src = "js/three.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 (); // câmera var câmera = new Three.tográficoCamera (-2,5, 2,5, 1.875, -1,875, 0,1, 100); câmera.Position.set (5, 5, 20); câmera.Lookat (new Three.Vector3 (0, 0, 0)); cena.add (câmera); var material = new Three.SeshlambertMaterial ({color: 0xffff00}); var geometria = new Three.cubegeometria (1, 2, 3); var mesh = new Three.mesh (geometria, material); cena.add (malha); Mesh.Position.Set (1.5, -0,5, 0); Mesh.Position = new Three.Vector3 (1,5, -0,5, 0); mesh.position.z = 1; var luz = novo Three.DirectionAllight (0xffffff); luz.Position.set (20, 10, 5); cenário.Add (luz); drawaxes (cena); // renderize renderer.render (cena, câmera); } função drawaxes (cenário) {// x-axis 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 ({color: 0xff0000}); var xaxis = new Three.line (xgeo, xmat); cenário.add (xaxis); // y-axis var ygeo = new Three.geometry (); ygeo.vertices.push (novo três.Vector3 (0, 0, 0)); ygeo.vertices.push (novo três.Vector3 (0, 1, 0)); var ymat = new Three.LineBasicMaterial ({color: 0x00FF00}); var yaxis = new Three.Line (ygeo, ymat); cenário.add (yaxis); // z-axis var zgeo = new Three.geometry (); zgeo.vertices.push (novo três.Vector3 (0, 0, 0)); zgeo.vertices.push (new Three.Vector3 (0, 0, 1)); var zmat = new Three.LineBasicMaterial ({color: 0x00ccff}); var zaxis = new Three.line (zgeo, zmat); cena.add (Zaxis); } </script> </html>O conteúdo deste artigo termina aqui. O artigo apresenta a grade em três.js por meio de exemplos e imagens detalhados. Espero que este artigo seja útil para todos aprenderem três.js.