three.js => Trame e materiali

introduzione

Una bella introduzione al materiale e alle trame.

Trame diffuse, a rilievo, speculari e trasparenti.

Parametri

Parametro	Dettagli
colore	Valore numerico del componente RGB del colore.
intensità	Valore numerico della forza / intensità della luce.
fov	Campo visivo del frustum della macchina fotografica.
aspetto	Proporzioni della fotocamera.
vicino	Fotocamera frustum vicino aereo.
lontano	Camera frustum lontano piano.
raggio	raggio della sfera. Il valore predefinito è 50.
widthSegments	numero di segmenti orizzontali. Il valore minimo è 3 e il valore predefinito è 8.
heightSegments	numero di segmenti verticali. Il valore minimo è 2 e il valore predefinito è 6.
phiStart	specificare l'angolo iniziale orizzontale. L'impostazione predefinita è 0.
phiLength	specificare la dimensione dell'angolo di scansione orizzontale. L'impostazione predefinita è Math.PI * 2.
thetaStart	specificare l'angolo iniziale verticale. L'impostazione predefinita è 0.
thetaLength	specificare la dimensione dell'angolo di scansione verticale. L'impostazione predefinita è Math.PI.

Osservazioni

Collegamento demo

Creazione di un modello Terra

Le trame per questo esempio sono disponibili su: http://planetpixelemporium.com/planets.html

Installazione o configurazione

È possibile installare tre tramite npm

npm install three

Oppure aggiungilo come uno script alla tua pagina 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>

Creare la scena

Per essere effettivamente in grado di visualizzare qualsiasi cosa con three.js, abbiamo bisogno di tre cose: una scena, una macchina fotografica e un riproduttore. Renderizzeremo la scena con la fotocamera.

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 );

Creazione della sfera

Crea geometrie per la sfera
Crea un materiale phong
Crea un oggetto 3D
Aggiungilo alla scena

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

Aggiungi una trama diffusa

La trama diffusa imposta il colore principale della superficie. Quando lo applichiamo a una sfera, otteniamo l'immagine seguente.

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

Aggiunta di una texture di Bump Map

Ciascuno dei suoi pixel agisce come un'altezza sulla superficie.
Le montagne appaiono più chiaramente grazie alla loro ombra.
È possibile modificare la quantità di influenza della mappa sull'illuminazione con il parametro bumpScale.
Nessun vertice aggiuntivo viene creato o necessario per utilizzare una mappa di rilievo (a differenza di una mappa di spostamento)

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

Aggiunta di una trama speculare

Cambia la "lucentezza" di un oggetto con una trama.
Ogni pixel determina l'intensità della specularità.
In questo caso, solo il mare è speculare perché l'acqua riflette la luce più della terra.
È possibile controllare il colore speculare con il parametro speculare.

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

Aggiunta di un livello cloud

Creiamo canvasCloud con una tela e canvasCloud come trama.
Lo facciamo perché jpg non gestisce un canale alfa. (Tuttavia, un'immagine PNG fa)
Abbiamo bisogno di creare il codice per costruire la trama in base alle seguenti immagini.

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)

cloudMesh il cloudMesh a earthMesh modo che si muovano insieme.
Disabilitiamo depthWrite e set transparent: true per dire three.js il cloudmesh è trasparente.
Diamo il lato a THREE.DoubleSide modo che entrambe le parti siano visibili.
- Questo evita di creare artefatti sul bordo della terra.
Infine, impostiamo l' opacity: 0.8 per rendere le nuvole più traslucide

Aggiunta del movimento rotazionale

Nel tuo ciclo di rendering, semplicemente aumenti la rotazione

Come tocco finale, animeremo il livello cloud per renderlo più realistico.

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

Autorizzato sotto CC BY-SA 3.0

Non affiliato con Stack Overflow

three.js
Trame e materiali

Ricerca…

introduzione

Parametri

Osservazioni

Creazione di un modello Terra