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
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
canvasCloudmit 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
cloudMeshanearthMeshdamit sie sich zusammen bewegen. - Wir deaktivieren
depthWriteund setzentransparent: true, um three.js mitzuteilen, dass Cloudmesh transparent ist. - Wir setzen Seiten auf
THREE.DoubleSidesodass 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;
})
