-
Notifications
You must be signed in to change notification settings - Fork 5
/
Babylon_105_animated_earth.html
64 lines (57 loc) · 2.57 KB
/
Babylon_105_animated_earth.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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Babylon.js - Animated Earth - 2019/10/18 by T. Fujita</title>
<script src="https://code.jquery.com/pep/0.4.0/pep.min.js"></script>
<script src="https://preview.babylonjs.com/babylon.js"></script>
<script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.js"></script>
<style>
html,body,canvas {
margin: 0; padding: 0; width: 100%; height: 100%; font-size: 0;
}
</style>
</head>
<body>
<canvas id = "renderCanvas"></canvas>
<script type = "text/javascript">
var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
var createScene = function() {
var scene = new BABYLON.Scene(engine);
var camera = new BABYLON.ArcRotateCamera("Camera", -90/180*Math.PI, 45/180*Math.PI, Math.PI, new BABYLON.Vector3(0, 0, 0), scene);
var light0 = new BABYLON.HemisphericLight("light0", new BABYLON.Vector3(1, 1, 0), scene);
var object = BABYLON.Mesh.CreateSphere("object", 20, 1.0, scene);
// var object = BABYLON.MeshBuilder.CreateSphere("object", {}, scene);
// Skybox
var skybox = BABYLON.Mesh.CreateBox("skyBox", 1000.0, scene);
var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene);
skyboxMaterial.backFaceCulling = false;
skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("./textures/nebula/nebula", scene);
skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);
skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
skyboxMaterial.disableLighting = true;
skybox.material = skyboxMaterial;
// Create materials
var earthMaterial = new BABYLON.StandardMaterial("ground", scene);
earthMaterial.diffuseTexture = new BABYLON.Texture("./textures/earth.jpg", scene);
earthMaterial.diffuseTexture.uScale = -1;
earthMaterial.diffuseTexture.vScale = -1;
object.material = earthMaterial;
// Create animation
var earthAxis = new BABYLON.Vector3(Math.sin(23.4/180 * Math.PI), Math.cos(23.4/180 * Math.PI), 0);
var angle = 0.003;
scene.registerBeforeRender(function() {
object.rotate(earthAxis, angle, BABYLON.Space.WORLD);
})
camera.attachControl(canvas);
return scene;
};
var scene = createScene();
engine.runRenderLoop(function() {
scene.render();
});
</script>
</body>
</html>