whyitworks0415 · whyitworks0415 · Aug 13, 2025
diff --git a/index.html b/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+  <meta charset="UTF-8" />
+  <title>Orbit Simulation</title>
+  <style>
+    body { margin:0; overflow:hidden; font-family:sans-serif; }
+    #ui { position:absolute; top:0; left:0; width:260px; height:100vh; background:rgba(0,0,0,0.7); color:white; padding:10px; box-sizing:border-box; transition:transform 0.3s; }
+    #ui.collapsed { transform:translateX(-240px); }
+    #toggle { position:absolute; top:10px; left:240px; width:20px; height:20px; background:#333; color:#fff; text-align:center; line-height:20px; cursor:pointer; }
+    label, button, select, input { display:block; width:100%; margin-bottom:8px; }
+  </style>
+</head>
+<body>
+  <div id="ui" class="collapsed">
+    <div id="toggle">»</div>
+    <h2>Simulation Control</h2>
+    <button id="reset">Reset</button>
+    <h3>Create Satellite</h3>
+    <label>Type
+      <select id="satType">
+        <option value="basic">일반 위성</option>
+        <option value="surface">지상 발사 위성</option>
+        <option value="external">외부 발사 위성</option>
+        <option value="static-basic">고정 궤도 일반 위성</option>
+        <option value="static-surface">고정 궤도 지상 발사 위성</option>
+      </select>
+    </label>
+    <label>Altitude <input type="number" id="altitude" value="5" /></label>
+    <label>Speed <input type="number" id="speed" value="1" /></label>
+    <button id="spawn">Spawn</button>
+  </div>
+  <canvas id="canvas"></canvas>
+  <script type="module" src="./src/main.js"></script>
+</body>
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,13 @@
+{
+  "name": "orbit-simulation",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"No tests\""
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "type": "module"
+}
diff --git a/src/main.js b/src/main.js
@@ -0,0 +1,114 @@
+import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.153.0/build/three.module.js';
+import { OrbitControls } from 'https://cdn.jsdelivr.net/npm/three@0.153.0/examples/jsm/controls/OrbitControls.js';
+
+const canvas = document.getElementById('canvas');
+const renderer = new THREE.WebGLRenderer({ canvas });
+renderer.setSize(window.innerWidth, window.innerHeight);
+
+const scene = new THREE.Scene();
+scene.background = new THREE.Color(0x000000);
+const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
+camera.position.set(0, 10, 20);
+
+const controls = new OrbitControls(camera, renderer.domElement);
+controls.enableDamping = true;
+
+scene.add(new THREE.AmbientLight(0xffffff, 0.4));
+const light = new THREE.DirectionalLight(0xffffff, 1);
+light.position.set(10, 10, 10);
+scene.add(light);
+
+const planetRadius = 3;
+const planet = new THREE.Mesh(
+  new THREE.SphereGeometry(planetRadius, 32, 32),
+  new THREE.MeshStandardMaterial({ color: 0x2266dd })
+);
+scene.add(planet);
+
+const satellites = [];
+
+class Satellite {
+  constructor(type, altitude, speed) {
+    this.type = type;
+    this.altitude = altitude;
+    this.speed = speed;
+    const geom = new THREE.SphereGeometry(0.1, 8, 8);
+    const mat = new THREE.MeshStandardMaterial({ color: 0xffaa00 });
+    this.mesh = new THREE.Mesh(geom, mat);
+    scene.add(this.mesh);
+    this.phase = 'orbit';
+    const r = planetRadius + altitude;
+    if (type.includes('surface')) {
+      this.phase = 'launch';
+      this.mesh.position.set(planetRadius, 0, 0);
+      this.velocity = new THREE.Vector3(0, speed, 0);
+    } else {
+      this.mesh.position.set(r, 0, 0);
+      this.velocity = new THREE.Vector3(0, 0, speed);
+    }
+  }
+  update(dt) {
+    if (this.type.includes('static')) {
+      const r = planetRadius + this.altitude;
+      const angle = performance.now() / 1000 * this.speed;
+      this.mesh.position.set(Math.cos(angle) * r, 0, Math.sin(angle) * r);
+      return;
+    }
+    if (this.type.includes('surface') && this.phase === 'launch') {
+      this.mesh.position.add(this.velocity.clone().multiplyScalar(dt));
+      const radial = this.mesh.position.length();
+      if (radial >= planetRadius + this.altitude) {
+        this.phase = 'orbit';
+        this.mesh.position.set(planetRadius + this.altitude, 0, 0);
+        this.velocity.set(0, 0, this.speed);
+      }
+      return;
+    }
+    // basic gravity based on inverse square law
+    const G = 1;
+    const dir = this.mesh.position.clone().multiplyScalar(-1);
+    const r2 = dir.lengthSq();
+    const acc = dir.normalize().multiplyScalar(G * (planetRadius * planetRadius) / r2);
+    this.velocity.add(acc.multiplyScalar(dt));
+    this.mesh.position.add(this.velocity.clone().multiplyScalar(dt));
+  }
+}
+
+function spawnSatellite() {
+  const type = document.getElementById('satType').value;
+  const altitude = parseFloat(document.getElementById('altitude').value);
+  const speed = parseFloat(document.getElementById('speed').value);
+  const sat = new Satellite(type, altitude, speed);
+  satellites.push(sat);
+}
+
+document.getElementById('spawn').addEventListener('click', spawnSatellite);
+document.getElementById('reset').addEventListener('click', () => {
+  satellites.forEach((s) => scene.remove(s.mesh));
+  satellites.length = 0;
+});
+
+const ui = document.getElementById('ui');
+const toggle = document.getElementById('toggle');
+toggle.addEventListener('click', () => {
+  ui.classList.toggle('collapsed');
+});
+
+function onResize() {
+  camera.aspect = window.innerWidth / window.innerHeight;
+  camera.updateProjectionMatrix();
+  renderer.setSize(window.innerWidth, window.innerHeight);
+}
+window.addEventListener('resize', onResize);
+
+let last = performance.now();
+function animate() {
+  requestAnimationFrame(animate);
+  const now = performance.now();
+  const dt = (now - last) / 1000;
+  last = now;
+  satellites.forEach((s) => s.update(dt));
+  controls.update();
+  renderer.render(scene, camera);
+}
+animate();