forked from yuanqili/earth3d
/
index.html
executable file
·134 lines (119 loc) · 3.84 KB
/
index.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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!DOCTYPE html>
<html lang="en">
<head>
<title>这可能是地球上第二美的h5</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<script src="js/three.min.js"></script>
<script src="js/stats.min.js"></script>
<style>
body {
background-image: url("hires/bg.jpg");
background-position: center center;
overflow: hidden;
background-size: cover;
}
</style>
</head>
<body>
<audio controls autoplay hidden><source src="music/DayOne.mp3"></audio>
<script>
var camera, scene, renderer;
var earth, cloud;
var pointLight, ambientLight;
var mouseDown = false, mouseX = 0, mouseY = 0;
var stats;
init();
animate();
function init() {
// initialization
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.z = 160;
stats = new Stats();
stats.showPanel(0); // 0: fps, 1: ms, 2: mb, 3+: custom
document.body.appendChild( stats.dom );
// Earth terrain
var earth_texture = new THREE.TextureLoader().load("tx/earth.jpeg");
var earth_bump = new THREE.TextureLoader().load("tx/bump.jpeg");
var earth_specular = new THREE.TextureLoader().load("tx/spec.jpeg");
var earth_geometry = new THREE.SphereGeometry(30, 32, 32);
var earth_material = new THREE.MeshPhongMaterial({
shininess : 40,
bumpScale : 1,
map : earth_texture,
bumpMap : earth_bump,
specularMap : earth_specular
});
earth = new THREE.Mesh(earth_geometry, earth_material);
scene.add(earth);
// Earth cloud
var cloud_texture = new THREE.TextureLoader().load('tx/cloud.png');
var cloud_geometry = new THREE.SphereGeometry(31, 32, 32);
var cloud_material = new THREE.MeshBasicMaterial({
shininess : 10,
map : cloud_texture,
transparent : true,
opacity : 0.8
});
cloud = new THREE.Mesh(cloud_geometry, cloud_material);
scene.add(cloud);
// point light (upper left)
pointLight = new THREE.PointLight(0xffffff);
pointLight.position.set(-400, 100, 150);
scene.add (pointLight);
// ambient light
ambientLight = new THREE.AmbientLight(0x222222);
scene.add(ambientLight);
// renderer
renderer = new THREE.WebGLRenderer({alpha: true});
renderer.setClearColor(0xffffff, 0);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// event handler
window.addEventListener('resize', onWindowResize, false);
document.addEventListener('mousemove', function (e) {onMouseMove(e);}, false);
document.addEventListener('mousedown', function (e) {onMouseDown(e);}, false);
document.addEventListener('mouseup', function (e) {onMouseUp(e);}, false);
}
function animate() {
requestAnimationFrame(animate);
stats.begin();
earth.rotation.y += 0.001;
cloud.rotation.y += 0.001;
stats.end();
renderer.render(scene, camera);
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function onMouseMove(evt) {
if (!mouseDown) return;
evt.preventDefault();
var deltaX = evt.clientX - mouseX, deltaY = evt.clientY - mouseY;
mouseX = evt.clientX;
mouseY = evt.clientY;
rotateScene(deltaX, deltaY);
}
function onMouseDown(evt) {
evt.preventDefault();
mouseDown = true;
mouseX = evt.clientX;
mouseY = evt.clientY;
}
function onMouseUp(evt) {
evt.preventDefault();
mouseDown = false;
}
function rotateScene(deltaX, deltaY) {
earth.rotation.y += deltaX / 300;
earth.rotation.x += deltaY / 300;
cloud.rotation.y += deltaX / 300;
cloud.rotation.x += deltaY / 300;
}
</script>
</body>
</html>