diff --git a/ceres/ceres.html b/ceres/ceres.html
new file mode 100644
index 0000000..d8ae24f
--- /dev/null
+++ b/ceres/ceres.html
@@ -0,0 +1,23 @@
+
+
+
+
+
+
+
+
+ Ceres
+
+
+
+
+
+
+
+
diff --git a/ceres/script.js b/ceres/script.js
new file mode 100644
index 0000000..140521a
--- /dev/null
+++ b/ceres/script.js
@@ -0,0 +1,57 @@
+const scene = new THREE.Scene();
+const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+const renderer = new THREE.WebGLRenderer({ antialias: true });
+renderer.setSize(window.innerWidth, window.innerHeight);
+document.body.appendChild(renderer.domElement);
+
+const controls = new THREE.OrbitControls(camera, renderer.domElement);
+controls.enableDamping = true;
+controls.dampingFactor = 0.25;
+controls.enableZoom = true;
+
+const textureLoader = new THREE.TextureLoader();
+const backgroundTexture = textureLoader.load('../textures/bg.jpg');
+const backgroundGeometry = new THREE.SphereGeometry(500, 64, 64);
+const backgroundMaterial = new THREE.MeshBasicMaterial({
+ map: backgroundTexture,
+ side: THREE.BackSide
+});
+const backgroundMesh = new THREE.Mesh(backgroundGeometry, backgroundMaterial);
+scene.add(backgroundMesh);
+
+const ceresTexture = textureLoader.load('../textures/ceres.jpg');
+
+function createTexturedPlanet(size, texture, position) {
+ const geometry = new THREE.SphereGeometry(size, 32, 32);
+ const material = new THREE.MeshStandardMaterial({ map: texture });
+ const planet = new THREE.Mesh(geometry, material);
+ planet.position.set(position, 0, 0);
+ return planet;
+}
+
+const ceres = createTexturedPlanet(3, ceresTexture, 0);
+scene.add(ceres);
+
+const pointLight = new THREE.PointLight(0xffffff, 2, 100);
+pointLight.position.set(0, 0, 0);
+scene.add(pointLight);
+
+const ambientLight = new THREE.AmbientLight(0x404040);
+scene.add(ambientLight);
+
+camera.position.set(10, 0, 0);
+camera.lookAt(0, 0, 0);
+
+function animate() {
+ requestAnimationFrame(animate);
+ controls.update();
+ renderer.render(scene, camera);
+}
+
+animate();
+
+window.addEventListener('resize', () => {
+ camera.aspect = window.innerWidth / window.innerHeight;
+ camera.updateProjectionMatrix();
+ renderer.setSize(window.innerWidth, window.innerHeight);
+});
diff --git a/ceres/styles.css b/ceres/styles.css
new file mode 100644
index 0000000..a9a02cc
--- /dev/null
+++ b/ceres/styles.css
@@ -0,0 +1,25 @@
+body {
+ margin: 0;
+ overflow: hidden;
+}
+
+canvas {
+ display: block;
+}
+
+.back-button {
+ position: absolute;
+ top: 20px;
+ left: 20px;
+ background-color: rgba(0, 0, 0, 0.7);
+ color: white;
+ border: none;
+ cursor: pointer;
+ padding: 10px;
+ font-size: 24px;
+ z-index: 10;
+}
+
+.back-button:hover {
+ background-color: rgba(0, 0, 0, 0.9);
+}
diff --git a/eris/eris.html b/eris/eris.html
new file mode 100644
index 0000000..f3b08da
--- /dev/null
+++ b/eris/eris.html
@@ -0,0 +1,23 @@
+
+
+
+
+
+
+
+
+ Eris
+
+
+
+
+
+
+
+
diff --git a/eris/script.js b/eris/script.js
new file mode 100644
index 0000000..bfcab1d
--- /dev/null
+++ b/eris/script.js
@@ -0,0 +1,57 @@
+const scene = new THREE.Scene();
+const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+const renderer = new THREE.WebGLRenderer({ antialias: true });
+renderer.setSize(window.innerWidth, window.innerHeight);
+document.body.appendChild(renderer.domElement);
+
+const controls = new THREE.OrbitControls(camera, renderer.domElement);
+controls.enableDamping = true;
+controls.dampingFactor = 0.25;
+controls.enableZoom = true;
+
+const textureLoader = new THREE.TextureLoader();
+const backgroundTexture = textureLoader.load('../textures/bg.jpg');
+const backgroundGeometry = new THREE.SphereGeometry(500, 64, 64);
+const backgroundMaterial = new THREE.MeshBasicMaterial({
+ map: backgroundTexture,
+ side: THREE.BackSide
+});
+const backgroundMesh = new THREE.Mesh(backgroundGeometry, backgroundMaterial);
+scene.add(backgroundMesh);
+
+const erisTexture = textureLoader.load('../textures/eris.jpg');
+
+function createTexturedPlanet(size, texture, position) {
+ const geometry = new THREE.SphereGeometry(size, 32, 32);
+ const material = new THREE.MeshStandardMaterial({ map: texture });
+ const planet = new THREE.Mesh(geometry, material);
+ planet.position.set(position, 0, 0);
+ return planet;
+}
+
+const eris = createTexturedPlanet(3, erisTexture, 0);
+scene.add(eris);
+
+const pointLight = new THREE.PointLight(0xffffff, 2, 100);
+pointLight.position.set(0, 0, 0);
+scene.add(pointLight);
+
+const ambientLight = new THREE.AmbientLight(0x404040);
+scene.add(ambientLight);
+
+camera.position.set(10, 0, 0);
+camera.lookAt(0, 0, 0);
+
+function animate() {
+ requestAnimationFrame(animate);
+ controls.update();
+ renderer.render(scene, camera);
+}
+
+animate();
+
+window.addEventListener('resize', () => {
+ camera.aspect = window.innerWidth / window.innerHeight;
+ camera.updateProjectionMatrix();
+ renderer.setSize(window.innerWidth, window.innerHeight);
+});
diff --git a/eris/styles.css b/eris/styles.css
new file mode 100644
index 0000000..a9a02cc
--- /dev/null
+++ b/eris/styles.css
@@ -0,0 +1,25 @@
+body {
+ margin: 0;
+ overflow: hidden;
+}
+
+canvas {
+ display: block;
+}
+
+.back-button {
+ position: absolute;
+ top: 20px;
+ left: 20px;
+ background-color: rgba(0, 0, 0, 0.7);
+ color: white;
+ border: none;
+ cursor: pointer;
+ padding: 10px;
+ font-size: 24px;
+ z-index: 10;
+}
+
+.back-button:hover {
+ background-color: rgba(0, 0, 0, 0.9);
+}
diff --git a/haumea/haumea.html b/haumea/haumea.html
new file mode 100644
index 0000000..bec7757
--- /dev/null
+++ b/haumea/haumea.html
@@ -0,0 +1,23 @@
+
+
+
+
+
+
+
+
+ Haumea
+
+
+
+
+
+
+
+
diff --git a/haumea/script.js b/haumea/script.js
new file mode 100644
index 0000000..dfa93cf
--- /dev/null
+++ b/haumea/script.js
@@ -0,0 +1,59 @@
+const scene = new THREE.Scene();
+const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+const renderer = new THREE.WebGLRenderer({ antialias: true });
+renderer.setSize(window.innerWidth, window.innerHeight);
+document.body.appendChild(renderer.domElement);
+
+const controls = new THREE.OrbitControls(camera, renderer.domElement);
+controls.enableDamping = true;
+controls.dampingFactor = 0.25;
+controls.enableZoom = true;
+
+const textureLoader = new THREE.TextureLoader();
+const backgroundTexture = textureLoader.load('../textures/bg.jpg');
+const backgroundGeometry = new THREE.SphereGeometry(500, 64, 64);
+const backgroundMaterial = new THREE.MeshBasicMaterial({
+ map: backgroundTexture,
+ side: THREE.BackSide
+});
+const backgroundMesh = new THREE.Mesh(backgroundGeometry, backgroundMaterial);
+scene.add(backgroundMesh);
+
+const haumeaTexture = textureLoader.load('../textures/haumea.jpg');
+
+function createEllipsoidPlanet(sizeX, sizeY, sizeZ, texture, position) {
+ const geometry = new THREE.SphereGeometry(1, 32, 32);
+ geometry.scale(sizeX, sizeY, sizeZ);
+ const material = new THREE.MeshStandardMaterial({ map: texture });
+ const planet = new THREE.Mesh(geometry, material);
+ planet.position.set(position, 0, 0);
+ return planet;
+}
+
+const haumea = createEllipsoidPlanet(3, 1.5, 1.5, haumeaTexture, 0);
+haumea.rotation.y = Math.PI / 2;
+scene.add(haumea);
+
+const pointLight = new THREE.PointLight(0xffffff, 2, 100);
+pointLight.position.set(0, 0, 0);
+scene.add(pointLight);
+
+const ambientLight = new THREE.AmbientLight(0x404040);
+scene.add(ambientLight);
+
+camera.position.set(10, 0, 0);
+camera.lookAt(0, 0, 0);
+
+function animate() {
+ requestAnimationFrame(animate);
+ controls.update();
+ renderer.render(scene, camera);
+}
+
+animate();
+
+window.addEventListener('resize', () => {
+ camera.aspect = window.innerWidth / window.innerHeight;
+ camera.updateProjectionMatrix();
+ renderer.setSize(window.innerWidth, window.innerHeight);
+});
\ No newline at end of file
diff --git a/haumea/styles.css b/haumea/styles.css
new file mode 100644
index 0000000..a9a02cc
--- /dev/null
+++ b/haumea/styles.css
@@ -0,0 +1,25 @@
+body {
+ margin: 0;
+ overflow: hidden;
+}
+
+canvas {
+ display: block;
+}
+
+.back-button {
+ position: absolute;
+ top: 20px;
+ left: 20px;
+ background-color: rgba(0, 0, 0, 0.7);
+ color: white;
+ border: none;
+ cursor: pointer;
+ padding: 10px;
+ font-size: 24px;
+ z-index: 10;
+}
+
+.back-button:hover {
+ background-color: rgba(0, 0, 0, 0.9);
+}
diff --git a/makemake/makemake.html b/makemake/makemake.html
new file mode 100644
index 0000000..2e0a2b9
--- /dev/null
+++ b/makemake/makemake.html
@@ -0,0 +1,23 @@
+
+
+
+
+
+
+
+
+ Makemake
+
+
+
+
+
+
+
+
diff --git a/makemake/script.js b/makemake/script.js
new file mode 100644
index 0000000..19c1ed8
--- /dev/null
+++ b/makemake/script.js
@@ -0,0 +1,57 @@
+const scene = new THREE.Scene();
+const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+const renderer = new THREE.WebGLRenderer({ antialias: true });
+renderer.setSize(window.innerWidth, window.innerHeight);
+document.body.appendChild(renderer.domElement);
+
+const controls = new THREE.OrbitControls(camera, renderer.domElement);
+controls.enableDamping = true;
+controls.dampingFactor = 0.25;
+controls.enableZoom = true;
+
+const textureLoader = new THREE.TextureLoader();
+const backgroundTexture = textureLoader.load('../textures/bg.jpg');
+const backgroundGeometry = new THREE.SphereGeometry(500, 64, 64);
+const backgroundMaterial = new THREE.MeshBasicMaterial({
+ map: backgroundTexture,
+ side: THREE.BackSide
+});
+const backgroundMesh = new THREE.Mesh(backgroundGeometry, backgroundMaterial);
+scene.add(backgroundMesh);
+
+const makemakeTexture = textureLoader.load('../textures/makemake.jpg');
+
+function createTexturedPlanet(size, texture, position) {
+ const geometry = new THREE.SphereGeometry(size, 32, 32);
+ const material = new THREE.MeshStandardMaterial({ map: texture });
+ const planet = new THREE.Mesh(geometry, material);
+ planet.position.set(position, 0, 0);
+ return planet;
+}
+
+const makemake = createTexturedPlanet(3, makemakeTexture, 0);
+scene.add(makemake);
+
+const pointLight = new THREE.PointLight(0xffffff, 2, 100);
+pointLight.position.set(0, 0, 0);
+scene.add(pointLight);
+
+const ambientLight = new THREE.AmbientLight(0x404040);
+scene.add(ambientLight);
+
+camera.position.set(10, 0, 0);
+camera.lookAt(0, 0, 0);
+
+function animate() {
+ requestAnimationFrame(animate);
+ controls.update();
+ renderer.render(scene, camera);
+}
+
+animate();
+
+window.addEventListener('resize', () => {
+ camera.aspect = window.innerWidth / window.innerHeight;
+ camera.updateProjectionMatrix();
+ renderer.setSize(window.innerWidth, window.innerHeight);
+});
diff --git a/makemake/styles.css b/makemake/styles.css
new file mode 100644
index 0000000..a9a02cc
--- /dev/null
+++ b/makemake/styles.css
@@ -0,0 +1,25 @@
+body {
+ margin: 0;
+ overflow: hidden;
+}
+
+canvas {
+ display: block;
+}
+
+.back-button {
+ position: absolute;
+ top: 20px;
+ left: 20px;
+ background-color: rgba(0, 0, 0, 0.7);
+ color: white;
+ border: none;
+ cursor: pointer;
+ padding: 10px;
+ font-size: 24px;
+ z-index: 10;
+}
+
+.back-button:hover {
+ background-color: rgba(0, 0, 0, 0.9);
+}
diff --git a/pluto/pluto.html b/pluto/pluto.html
new file mode 100644
index 0000000..9a27431
--- /dev/null
+++ b/pluto/pluto.html
@@ -0,0 +1,23 @@
+
+
+
+
+
+
+
+
+ Pluto
+
+
+
+
+
+
+
+
diff --git a/pluto/script.js b/pluto/script.js
new file mode 100644
index 0000000..4ed86cf
--- /dev/null
+++ b/pluto/script.js
@@ -0,0 +1,57 @@
+const scene = new THREE.Scene();
+const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+const renderer = new THREE.WebGLRenderer({ antialias: true });
+renderer.setSize(window.innerWidth, window.innerHeight);
+document.body.appendChild(renderer.domElement);
+
+const controls = new THREE.OrbitControls(camera, renderer.domElement);
+controls.enableDamping = true;
+controls.dampingFactor = 0.25;
+controls.enableZoom = true;
+
+const textureLoader = new THREE.TextureLoader();
+const backgroundTexture = textureLoader.load('../textures/bg.jpg');
+const backgroundGeometry = new THREE.SphereGeometry(500, 64, 64);
+const backgroundMaterial = new THREE.MeshBasicMaterial({
+ map: backgroundTexture,
+ side: THREE.BackSide
+});
+const backgroundMesh = new THREE.Mesh(backgroundGeometry, backgroundMaterial);
+scene.add(backgroundMesh);
+
+const plutoTexture = textureLoader.load('../textures/pluto.jpg');
+
+function createTexturedPlanet(size, texture, position) {
+ const geometry = new THREE.SphereGeometry(size, 32, 32);
+ const material = new THREE.MeshStandardMaterial({ map: texture });
+ const planet = new THREE.Mesh(geometry, material);
+ planet.position.set(position, 0, 0);
+ return planet;
+}
+
+const pluto = createTexturedPlanet(3, plutoTexture, 0);
+scene.add(pluto);
+
+const pointLight = new THREE.PointLight(0xffffff, 2, 100);
+pointLight.position.set(0, 0, 0);
+scene.add(pointLight);
+
+const ambientLight = new THREE.AmbientLight(0x404040);
+scene.add(ambientLight);
+
+camera.position.set(10, 0, 0);
+camera.lookAt(0, 0, 0);
+
+function animate() {
+ requestAnimationFrame(animate);
+ controls.update();
+ renderer.render(scene, camera);
+}
+
+animate();
+
+window.addEventListener('resize', () => {
+ camera.aspect = window.innerWidth / window.innerHeight;
+ camera.updateProjectionMatrix();
+ renderer.setSize(window.innerWidth, window.innerHeight);
+});
diff --git a/pluto/styles.css b/pluto/styles.css
new file mode 100644
index 0000000..a9a02cc
--- /dev/null
+++ b/pluto/styles.css
@@ -0,0 +1,25 @@
+body {
+ margin: 0;
+ overflow: hidden;
+}
+
+canvas {
+ display: block;
+}
+
+.back-button {
+ position: absolute;
+ top: 20px;
+ left: 20px;
+ background-color: rgba(0, 0, 0, 0.7);
+ color: white;
+ border: none;
+ cursor: pointer;
+ padding: 10px;
+ font-size: 24px;
+ z-index: 10;
+}
+
+.back-button:hover {
+ background-color: rgba(0, 0, 0, 0.9);
+}