<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>天体公転シミュレーション</title>
<style>
body { margin: 0; overflow: hidden; }
canvas { display: block; }
</style>
</head>
<body>
<script type="module">
// CDNからThree.jsとGLTFLoaderを読み込む
import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.160.1/build/three.module.js';
import { GLTFLoader } from 'https://cdn.jsdelivr.net/npm/three@0.160.1/examples/jsm/loaders/GLTFLoader.js';
let scene, camera, renderer;
let bigSphere, smallSphere;
let rotationSpeed = 1.0;
// シーン設定
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 光源
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(5, 10, 5);
scene.add(light);
// GLB読み込み
const loader = new GLTFLoader();
loader.load('sun.glb', (gltf) => {
bigSphere = gltf.scene;
bigSphere.scale.set(3, 3, 3);
scene.add(bigSphere);
});
loader.load('earth.glb', (gltf) => {
smallSphere = gltf.scene;
smallSphere.scale.set(0.5, 0.5, 0.5);
scene.add(smallSphere);
});
camera.position.z = 12;
function animate() {
requestAnimationFrame(animate);
if (bigSphere && smallSphere) {
const time = Date.now() * 0.001;
const radius = 5;
smallSphere.position.x = Math.cos(time * rotationSpeed) * radius;
smallSphere.position.z = Math.sin(time * rotationSpeed) * radius;
}
renderer.render(scene, camera);
}
animate();
</script>
</body>
</html>
