three.js => Texturen und Materialien

Einführung

Eine schöne Einführung in Material und Texturen.

Diffuse, Bump, Specular und Transparente Strukturen

Parameter

Parameter	Einzelheiten
Farbe	Numerischer Wert der RGB-Komponente der Farbe.
Intensität	Numerischer Wert der Lichtstärke / Intensität.
fov	Kamerafustust vertikales Sichtfeld.
Aspekt	Frustum-Seitenverhältnis der Kamera.
nahe	Kamerastumpf in der Nähe von Flugzeug.
weit	Kamerastumpf weites Flugzeug.
Radius	Kugelradius. Standardeinstellung ist 50.
widthSegments	Anzahl horizontaler Segmente. Der Mindestwert ist 3 und der Standardwert ist 8.
heightSegments	Anzahl der vertikalen Segmente. Der Mindestwert ist 2 und der Standardwert ist 6.
phiStart	horizontalen Startwinkel angeben. Der Standardwert ist 0.
phiLength	Geben Sie den horizontalen Schwenkwinkel an. Standardeinstellung ist Math.PI * 2.
thetaStart	vertikalen Startwinkel angeben. Der Standardwert ist 0.
thetaLength	Geben Sie die Größe des vertikalen Schwenkwinkels an. Standardeinstellung ist Math.PI.

Bemerkungen

Demo-Link

Modell Erde erstellen

Texturen für dieses Beispiel finden Sie unter: http://planetpixelemporium.com/planets.html

Installation oder Setup

Sie können drei über npm installieren

npm install three

Oder fügen Sie es Ihrer HTML-Seite als Skript hinzu

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

Die Szene erstellen

Um tatsächlich mit three.js etwas anzeigen zu können, benötigen wir drei Dinge: eine Szene, eine Kamera und einen Renderer. Wir werden die Szene mit der Kamera rendern.

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

Die Kugel erstellen

Erstellen Sie Geometrie für die Kugel
Erstellen Sie ein Phong-Material
Erstellen Sie ein 3D-Objekt
Fügen Sie es der Szene hinzu

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

Fügen Sie eine diffuse Textur hinzu

Die diffuse Textur legt die Hauptfarbe der Oberfläche fest. Wenn wir es auf eine Kugel anwenden, erhalten wir das folgende Bild.

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

Hinzufügen einer Relief-Map-Textur

Jedes Pixel wirkt als Höhe auf der Oberfläche.
Die Berge erscheinen dank ihres Schattens deutlicher.
Mit dem Parameter bumpScale kann der Einfluss der Karte auf die Beleuchtung geändert werden.
Es werden keine zusätzlichen Scheitelpunkte erstellt oder benötigt, um eine Reliefkarte zu verwenden (im Gegensatz zu einer Verschiebungskarte)

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

Eine spiegelnde Textur hinzufügen

Ändert den Glanz eines Objekts mit einer Textur.
Jedes Pixel bestimmt die Intensität der Spiegelung.
In diesem Fall ist nur das Meer spiegelnd, weil Wasser mehr Licht reflektiert als die Erde.
Sie können die Spiegelfarbe mit dem Glanzparameter steuern.

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

Cloud-Layer hinzufügen

Wir erstellen canvasCloud mit einer Leinwand und verwenden sie als Textur.
Wir machen das, weil jpg keinen Alphakanal beherrscht. (Ein PNG-Bild jedoch nicht)
Wir müssen den Code erstellen, um die Textur basierend auf den folgenden Bildern zu erstellen.

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)

Wir befestigen das cloudMesh an earthMesh damit sie sich zusammen bewegen.
Wir deaktivieren depthWrite und setzen transparent: true , um three.js mitzuteilen, dass Cloudmesh transparent ist.
Wir setzen Seiten auf THREE.DoubleSide sodass beide Seiten sichtbar sind.
- Dies vermeidet die Entstehung von Artefakten am Rand der Erde.
Zum Schluss setzen wir opacity: 0.8 , um die Wolken transparenter zu machen

Rotationsbewegung hinzufügen

In Ihrer Render-Schleife erhöhen Sie einfach die Rotation

Zum Schluss animieren wir die Wolkenschicht, um sie realistischer zu gestalten.

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

Lizenziert unter CC BY-SA 3.0

Nicht angeschlossen an Stack Overflow

three.js
Texturen und Materialien

Suche…

Einführung

Parameter

Bemerkungen

Modell Erde erstellen