Looking for three.js Answers? Try Ask4KnowledgeBase
Looking for three.js Keywords? Try Ask4Keywords

three.js Modell Erde erstellen


Beispiel

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

Einfache Kugel

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.

Diffuse Textur

Ergebnis

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)

Bump-Textur

Ergebnis

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.

    Spiegelnde Textur

Ergebnis

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.

Cloud-Karte

Cloud Map Trans

Geben Sie hier die Bildbeschreibung ein

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