-
Notifications
You must be signed in to change notification settings - Fork 0
/
planetz.html
71 lines (58 loc) · 2.1 KB
/
planetz.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PLANETZ!</title>
<script src='js/perlin.js'></script>
<script src='js/utils.js'></script>
<script src='js/generation.js'></script>
<script src='js/texturing.js'></script>
<script src='js/planetz.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
</head>
<body>
<script>
planetz.generate_planet();
// initialize three.js canvas, renderer, scene and camera
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
camera.position.z = 1;
var light = new THREE.DirectionalLight( 0xffffff );
light.position.set(0, 1, 1);
// initialize the sphere, textures and bump map
let texture = new THREE.ImageUtils.loadTexture(planetz.texture_jpg);
let bump_map = new THREE.ImageUtils.loadTexture(planetz.heightmap_jpg);
var geometry = new THREE.SphereGeometry(0.5, 1000, 1000);
var material = new THREE.MeshStandardMaterial( { map: texture, bumpMap: bump_map, bumpScale: 0.01 });
var earthMesh = new THREE.Mesh(geometry, material);
scene.add(light);
scene.add(earthMesh);
// infinite animation function that gets called automatically by the browser
const animate = function () {
requestAnimationFrame( animate );
// rotate planet
earthMesh.rotation.y += 0.005;
earthMesh.rotation.x += 0.005;
renderer.render( scene, camera );
};
animate();
let draw_image = function(map, caption) {
if (caption !== undefined) {
let text = document.createElement('p');
text.innerText = caption;
document.body.append(text);
}
let img = document.createElement('img');
document.body.append(img);
img.src = utils.buffer_to_jpg(map);
img.style.height = map.length;
img.style.width = map[0].length;
}
draw_image(planetz.heightmap);
draw_image(planetz.texture);
</script>
</body>
</html>