Objetos 3D con texturas usando HTML5 – BabylonJS parte de la serie 4 – GameDev Academia

Serie BabylonJS por David Catuhe (@DeltaKosh):

Tabla de contenidos

Aprender WebGL y Babylon.js a su propio ritmo

no dude en visitar nuestra línea de golf en 3D con WebGL Programación y Babylon.js para principiantes en Zenva Academia. El curso cubre el marco Babylon.js y explica todo lo que necesita para empezar con el uso de esta fantástica biblioteca en proyectos nuevos o existentes.

¿Qué se puede esperar

Ahora que se pueden crear diferentes mallas en todas partes de la escena, vamos a dar a esas mallas algunos materiales, para definir cómo una malla se parece.

Resultado final

¿Cómo puedo hacer esto?

En primer lugar, ya que ahora se utilizan para tres de nuestros tutoriales anteriores, creamos un nuevo escenario básico en los “scene_tuto.js” file:
función createSceneTuto (motor) {var = new escena BABYLON.Scene (motor); luz var = nuevo BABYLON.PointLight ( «Omni», nuevo BABYLON.Vector3 (0, 100, 100), escena); cámara var = new BABYLON.ArcRotateCamera ( «Cámara», 0, 0,8, 100, nuevo BABYLON.Vector3.Zero (), escena); // Creación de esferas var sphere1 = BABYLON.Mesh.CreateSphere ( «sphere1», 10.0, 6.0, escena); sphere2 var = BABYLON.Mesh.CreateSphere ( «Sphere2», 2.0, 7.0, escena); var = sphere3 BABYLON.Mesh.CreateSphere ( «Sphere3», 10.0, 8.0, escena); […] // Posicionamiento las mallas sphere1.position.x = -40; sphere2.position.x = -30; 12345678910111213functioncreateSceneTuto (motor) {varscene = newBABYLON.Scene (motor); varlight = newBABYLON.PointLight ( «Omni», newBABYLON.Vector3 (0.100.100), escena); varcamera = newBABYLON.ArcRotateCamera (» cámara», 0,0.8,100, newBABYLON.Vector3.Zero (), escena); // Creación de spheresvarsphere1 = BABYLON.Mesh.CreateSphere ( «sphere1», 10.0,6.0, escena); varsphere2 = BABYLON.Mesh.CreateSphere ( «Sphere2», 2.0,7.0, escena); varsphere3 = BABYLON.Mesh.CreateSphere ( «Sphere3», 10.0,8.0, escena); […] // Posicionamiento del meshessphere1.position.x = -40; sphere2.position .x = -30;

Por ahora, es suficiente con unas mallas de color gris iluminado. Para aplicar un material en él, usted tiene que crear un nuevo objeto material de la siguiente manera:
var = new materialSphere1 BABYLON.StandardMaterial ( «texture1», escena); 1varmaterialSphere1 = newBABYLON.StandardMaterial ( «texture1», escena);

y aplicar este material al objeto de su elección, por ejemplo:.
sphere1.material = materialSphere1; 1sphere1.material = materialSphere1;

O, en breve:
sphere1.material = new BABYLON.StandardMaterial ( «texture1», escena); 1sphere1.material = newBABYLON.StandardMaterial ( «texture1», escena);

“He probado mi escena, y … nada cambió …”? Exacta, ya que este material es el que viene por defecto, tiene que personalizar como quiera. Usted no va a cambiar la malla en sí, pero el material. Entonces, ¿cómo puedo formar mi material para dar la apariencia perfecta a mi objeto?

• Transparencia (canal alfa)
  
  

  Para aplicar un poco de alfa a un material, escrito en porcentaje (%):
  materialSphere1.alpha = 0,5; 1materialSphere1.alpha = 0,5;

  Una de las características más importante de materiales es texturizado. Se puede aplicar una textura en todos los materiales, dando una ruta de la imagen.
  materialSphere1.diffuseTexture = new BABYLON.Texture ( «grass.png», escena); 1materialSphere1.diffuseTexture = newBABYLON.Texture ( «grass.png», escena);

  No se olvidó de comprobar el camino correcto de la imagen (relativa o ruta absoluta). Acerca de la compatibilidad de formato de imagen, puede ser JPG, PNG, JPEG, BMP, … (todos los formatos de imagen disponible en su navegador). Si desea traducir su textura en la malla, puede utilizar “uOffset” y “voffset”. Y si desea repetir un patrón de imagen (por ejemplo, textura de la hierba), puede utilizar “uScale” y “VSCALE”:
  materialSphere1.diffuseTexture.uScale = 5,0; materialSphere1.diffuseTexture.vScale = 5,0; 12materialSphere1.diffuseTexture.uScale = 5,0; materialSphere1.diffuseTexture.vScale = 5,0;

  
  

  Y si su textura tienen algún alfa, basta con especificar que:
  materialSphere1.diffuseTexture.hasAlpha = true; 1materialSphere1.diffuseTexture.hasAlpha = true;

  “Back-cara sacrificio” determina si un polígono de un objeto gráfico es visible o no. En resumen, si está activo, el motor de Babilonia no se mostrarán la cara oculta de este material. Es cierto por defecto, pero se puede cambiar a falso si es necesario.
  

  En este ejemplo, una textura tienen algún alfa, y de vuelta cara sacrificio necesidad de girarse a falso para ver la cara interior:
  

  
  

  Se puede ver que el objeto en Wireframe escribiendo:
  materialSphere1.wireframe = true; 1materialSphere1.wireframe = true;

  Mensajes relacionados