three.js => Textures et Matériaux

Introduction

Une belle introduction à la matière et aux textures.

Textures diffuses, bump, spéculaires et transparentes.

Paramètres

Paramètre	Détails
Couleur	Valeur numérique de la composante RVB de la couleur.
intensité	Valeur numérique de l'intensité / intensité de la lumière.
fov	Champ de vision vertical de la caméra
aspect	Rapport d'aspect du caméscope
près	Caméra frustum près de l'avion.
loin	Avion lointain de l'appareil photo.
rayon	rayon de la sphère. La valeur par défaut est 50
widthSegments	nombre de segments horizontaux. La valeur minimale est 3 et la valeur par défaut est 8.
heightSegments	nombre de segments verticaux. La valeur minimale est 2 et la valeur par défaut est 6.
phiStart	spécifier l'angle de départ horizontal. La valeur par défaut est 0.
longueur de phi	spécifiez la taille de l'angle de balayage horizontal. La valeur par défaut est Math.PI * 2.
thetaStart	spécifier l'angle de départ vertical. La valeur par défaut est 0.
thetaLength	spécifiez la taille de l'angle de balayage vertical. La valeur par défaut est Math.PI.

Remarques

Lien de démonstration

Créer une Terre Modèle

Les textures de cet exemple sont disponibles sur: http://planetpixelemporium.com/planets.html

Installation ou configuration

Vous pouvez installer trois via npm

npm install three

Ou ajoutez-le en tant que script à votre page 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>

Créer la scène

Pour pouvoir afficher quelque chose avec three.js, nous avons besoin de trois choses: une scène, une caméra et un rendu. Nous allons rendre la scène avec la caméra.

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

Créer la sphère

Créer une géométrie pour la sphère
Créer un matériau phong
Créer un objet 3D
Ajoutez-le à la scène

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

Ajouter une texture diffuse

La texture diffuse définit la couleur principale de la surface. Lorsque nous l'appliquons à une sphère, nous obtenons l'image suivante.

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

Ajout d'une texture de carte de relief

Chacun de ses pixels agit comme une hauteur sur la surface.
Les montagnes apparaissent plus clairement grâce à leur ombre.
Il est possible de changer le degré d’effet de la carte sur l’éclairage avec le paramètre bumpScale.
Aucun sommet supplémentaire n'est créé ou nécessaire pour utiliser une carte de relief (contrairement à une carte de déplacement)

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

Ajouter une texture spéculaire

Change la «brillance» d'un objet avec une texture.
Chaque pixel détermine l'intensité de la spécularité.
Dans ce cas, seule la mer est spéculaire car l’eau reflète la lumière plus que la terre.
Vous pouvez contrôler la couleur spéculaire avec le paramètre spéculaire.

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

Ajouter une couche Cloud

Nous créons canvasCloud avec un canevas et l'utilisons comme texture.
Nous faisons cela parce que jpg ne gère pas un canal alpha. (Cependant, une image PNG fait)
Nous devons créer le code pour créer la texture en fonction des images suivantes.

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)

Nous attachons le cloudMesh à earthMesh afin qu'ils se déplacent ensemble.
Nous désactivons depthWrite et définissons transparent: true pour dire three.js le cloudmesh est transparent.
Nous définissons les côtés à THREE.DoubleSide . THREE.DoubleSide afin que les deux côtés soient visibles.
- Cela évite de créer des artefacts sur le bord de la terre.
Enfin, nous définissons l' opacity: 0.8 pour rendre les nuages plus translucides

Ajout d'un mouvement de rotation

Dans votre boucle de rendu, vous augmentez simplement la rotation

Pour finir, nous allons animer la couche nuage afin de la rendre plus réaliste.

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

Sous licence CC BY-SA 3.0

Non affilié à Stack Overflow

three.js
Textures et Matériaux

Recherche…

Introduction

Paramètres

Remarques

Créer une Terre Modèle