three.js => Texturas y materiales

Introducción

Una buena introducción al material y las texturas.

Texturas difusas, rugosas, especulares y transparentes.

Parámetros

Parámetro	Detalles
color	Valor numérico del componente RGB del color.
intensidad	Valor numérico de la intensidad / intensidad de la luz.
fov	Cámara vertical de campo de visión vertical.
aspecto	Relación de aspecto cámara frustum.
cerca	Cámara frustum cerca de avión.
lejos	Cámara frustum plano lejano.
radio	radio de la esfera. El valor predeterminado es 50.
anchoSegmentos	Número de segmentos horizontales. El valor mínimo es 3, y el valor predeterminado es 8.
AlturaSegmentos	Número de segmentos verticales. El valor mínimo es 2, y el valor predeterminado es 6.
phiStart	Especifique el ángulo de inicio horizontal. El valor predeterminado es 0.
phiLength	Especifique el tamaño del ángulo de barrido horizontal. El valor predeterminado es Math.PI * 2.
thetaStart	especificar el ángulo de inicio vertical. El valor predeterminado es 0.
thetaLength	Especifique el tamaño del ángulo de barrido vertical. El valor predeterminado es Math.PI.

Observaciones

Enlace de demostración

Creando una Tierra Modelo

Las texturas para este ejemplo están disponibles en: http://planetpixelemporium.com/planets.html

Instalación o configuración

Puedes instalar tres via npm

npm install three

O agregarlo como un script a su página HTML

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r85/three.min.js" />

HTML:

<html>
<head>
    <meta charset=utf-8>
    <title>Earth Model</title>
    <style>
        body { margin: 0; }
        canvas { width: 100%; height: 100% }
    </style>
</head>
<body>
   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r83/three.js" />
    <script>
        // Our Javascript will go here.
    </script>
</body>
</html>

Creando la escena

Para poder mostrar cualquier cosa con three.js, necesitamos tres cosas: una escena, una cámara y un renderizador. Vamos a hacer la escena con la cámara.

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

Creando la esfera

Crear geometría para la esfera.
Crear un material phong.
Crea un objeto 3D
Añádelo a la escena.

var geometry = new THREE.SphereGeometry(1, 32, 32);
var material = new THREE.MeshPhongMaterial();
var earthmesh = new THREE.Mesh(geometry, material);

Añadir una textura difusa

La textura difusa establece el color principal de la superficie. Cuando lo aplicamos a una esfera, obtenemos la siguiente imagen.

material.map    = THREE.ImageUtils.loadTexture('images/earthmap1k.jpg');

Agregar una textura de mapa de relieve

Cada uno de sus píxeles actúa como una altura en la superficie.
Las montañas aparecen más claramente gracias a su sombra.
Es posible cambiar cuánto afecta el mapa a la iluminación con el parámetro bumpScale.
No se crean ni se necesitan vértices adicionales para usar un mapa de relieve (a diferencia de un mapa de desplazamiento)

material.bumpMap   = THREE.ImageUtils.loadTexture('images/earthbump1k.jpg');     
material.bumpScale = 0.05;

Añadiendo una textura especular

Cambia el 'brillo' de un objeto con una textura.
Cada píxel determina la intensidad de la especularidad.
En este caso, solo el mar es especular porque el agua refleja la luz más que la tierra.
Puedes controlar el color especular con el parámetro especular.

material.specularMap = THREE.ImageUtils.loadTexture('images/earthspec1k.jpg')
material.specular  = new THREE.Color('grey')

Añadiendo una capa de nubes

Creamos canvasCloud con un lienzo y lo usamos como textura.
Hacemos esto porque jpg no maneja un canal alfa. (Sin embargo, una imagen PNG hace)
Necesitamos hacer el código para construir la textura basada en las siguientes imágenes.

var geometry   = new THREE.SphereGeometry(0.51, 32, 32)
var material  = new THREE.MeshPhongMaterial({
  map         : new THREE.Texture(canvasCloud),
  side        : THREE.DoubleSide,
  opacity     : 0.8,
  transparent : true,
  depthWrite  : false,
});
var cloudMesh = new THREE.Mesh(geometry, material)
earthMesh.add(cloudMesh)

Adjuntamos cloudMesh a earthMesh para que se muevan juntos.
Deshabilitamos depthWrite y configuramos transparent: true para decirle a three.js que cloudmesh es transparente.
Establecemos los lados en THREE.DoubleSide para que ambos lados sean visibles.
- Esto evita la creación de artefactos en el borde de la tierra.
Finalmente, configuramos la opacity: 0.8 para hacer que las nubes sean más translúcidas.

Añadiendo Movimiento Rotacional

En su bucle de render, simplemente aumenta la rotación

Como toque final, animaremos la capa de la nube para que se vea más realista.

updateFcts.push(function(delta, now) {
    cloudMesh.rotation.y += 1 / 8 * delta;
    earthMesh.rotation.y += 1 / 16 * delta;
  })

Modified text is an extract of the original Stack Overflow Documentation

Licenciado bajo CC BY-SA 3.0

No afiliado a Stack Overflow

three.js
Texturas y materiales

Buscar..

Introducción

Parámetros

Observaciones

Creando una Tierra Modelo