-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
152 lines (137 loc) · 6.62 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
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sistema Solar</title>
<!-- Babylon.js -->
<script src="https://preview.babylonjs.com/babylon.js"></script>
<style>
html, body {
overflow: hidden;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#renderCanvas {
width: 100%;
height: 100%;
touch-action: none;
}
</style>
</head>
<body>
<canvas id="renderCanvas"></canvas>
<script>
// Obtenemos el canvas para la escena.
var canvas = document.querySelector("#renderCanvas");
var engine = null;
var scene = null;
var sceneToRender = null;
// Custom Engine para usar -es posible agregar mas parametros-
var createDefaultEngine = function() { return new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true, disableWebGL2Support: true}); };
//Funcion crear la escena.
const crearScene = () => {
// Creamos una escena por medio del engine.
const scene = new BABYLON.Scene(engine);
// Color de fondo para la escena.
scene.clearColor = new BABYLON.Color3.Black;
// Add a camera to the scene and attach it to the canvas
// Parameters : name, position, scene
const camera = new BABYLON.UniversalCamera("UniversalCamera", new BABYLON.Vector3(0, 0, -10), scene);
//const camera = new BABYLON.ArcRotateCamera("camera", -Math.PI / 2, Math.PI / 2.5, 25, new BABYLON.Vector3(0, 0, 0), scene);
// Targets the camera to a particular position. In this case the scene origin
camera.setTarget(BABYLON.Vector3.Zero());
// Camera <==> canvas
camera.attachControl(canvas, true);
// Add a light
var light = new BABYLON.PointLight("pointLight", new BABYLON.Vector3(0,0,-0.5), scene);
// Want to dim or bighten the light?
light.intensity = 3;
// Cantidad de lineas para la esfera
const SphereSegments = 1;
// Primitivas o geometrias para los planetas.
//var solGeometry = BABYLON.MeshBuilder.CreateDisc("disc", {tessellation: 6,sideOrientation: -1});
var solGeometry = BABYLON.MeshBuilder.CreateSphere("sphere", {segments: SphereSegments ,diameter: 2});
var tierraGeometry = BABYLON.MeshBuilder.CreateSphere("sphere", {segments: SphereSegments ,diameter: 1});
var lunaGeometry = BABYLON.MeshBuilder.CreateSphere("sphere", {segments: SphereSegments ,diameter: 0.5});
var saturnoGeometry = BABYLON.MeshBuilder.CreateSphere("sphere", {segments: SphereSegments ,diameter: 1});
var saturnoGeometryDisc = BABYLON.MeshBuilder.CreateDisc("disc", {radius:0.8,tessellation: 50,sideOrientation: -1});
//var cometaGeometry = BABYLON.MeshBuilder.CreateSphere("sphere", {segments: widthSegments ,diameter: 0.5});
var cometaGeometry = BABYLON.Mesh.CreatePolyhedron("shape" , {type: 1, size: 0.2}, scene);
// Texturas de los planetas
material(solGeometry,"./images/sun.jpg");
material(tierraGeometry,"./images/earth.jpg");
material(lunaGeometry,"./images/moon.jpg");
material(saturnoGeometry,"./images/saturn.jpg");
material(cometaGeometry,"./images/neptune.jpg");
// Por donde rotar -eje-
var rotarZ = new BABYLON.Vector3(0, 0, 1);
// Angulo
var angle = 0.01;
// utilizado para la orbita del cometa.
var phi = 0;
// Ubicamos en z=1 al sol.
solGeometry.position.z = 1;
// Parent and Child -mesh-
solGeometry.addChild(tierraGeometry);
tierraGeometry.position.x = 4;
tierraGeometry.addChild(lunaGeometry); // La Luna tiene como pivote a la tierra.
lunaGeometry.position.x = 1;
solGeometry.addChild(saturnoGeometry);
saturnoGeometry.position.x = 8;
solGeometry.addChild(saturnoGeometryDisc);
saturnoGeometryDisc.position.x = 8; // Misma orbita como si fuera
saturnoGeometry.position.y= -8;
saturnoGeometryDisc.position.y = -8;
// Si comento esto se convierte en elipsoide
//solGeometry.addChild(cometaGeometry);
//Registrar antes de renderizar
scene.registerBeforeRender(function() {
// Mesh Transformations
// Los marcos de referencia, en 3D, están formados por un origen y tres ejes perpendiculares entre sí a través del origen.
//Cuando se crean en Babylon.js, los objetos se colocan usando un marco de referencia en World Space
//donde hay dos ejes horizontales, xyz, y un eje y vertical en un sistema para zurdos.
solGeometry.rotate(rotarZ, angle, BABYLON.Space.WORLD);
tierraGeometry.rotate(rotarZ,angle+0.08, BABYLON.Space.WORLD);
lunaGeometry.rotate(rotarZ, angle+0.1, BABYLON.Space.WORLD);
saturnoGeometry.rotate(rotarZ, angle+0.04, BABYLON.Space.WORLD);
cometaGeometry.rotate(rotarZ, angle+0.1, BABYLON.Space.WORLD);
cometaGeometry.position = new BABYLON.Vector3(7 * Math.cos(phi), 25 * Math.sin(phi), 1);
phi +=0.01;
})
return scene;
}
// Funcion para cargar la textura dependiendo de la geometria.
function material(geometry, textura){
var Material = new BABYLON.StandardMaterial("ground", scene);
Material.diffuseTexture = new BABYLON.Texture(textura, scene);
Material.diffuseTexture.vScale = -1;
geometry.material = Material;
}
window.initFunction = async function() {
var asyncEngineCreation = async function() {
try {
return createDefaultEngine();
} catch(e) {
console.log("the available createEngine function failed. Creating the default engine instead");
return createDefaultEngine();
}
}
window.engine = await asyncEngineCreation();
if (!engine) throw 'engine should not be null.';
window.scene = crearScene();};
initFunction().then(() => {sceneToRender = scene
engine.runRenderLoop(function () {
if (sceneToRender && sceneToRender.activeCamera) {
sceneToRender.render();
}
});
});
// Resize
window.addEventListener("resize", function () {
engine.resize();
});
</script>
</body>
</html>