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
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
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
canvasCloud
mit einer Leinwand und verwenden sie als Textur. 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
an earthMesh
damit sie sich zusammen bewegen. depthWrite
und setzen transparent: true
, um three.js mitzuteilen, dass Cloudmesh transparent ist. THREE.DoubleSide
sodass beide Seiten sichtbar sind. 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;
})