Three.jsによるフォトリアリスティックな3D地球シミュレーション
フリーのプロンプト百科事典 Wikiprompt より
2025年7月10日
Three.jsによるフォトリアリスティックな3D地球シミュレーション インタラクティブな3D地球シミュレーションを生成するための詳細なプロンプト。昼夜のテクスチャ、雲、星空、そしてOrbitControlsを単一のHTMLファイル内に含む。
プロンプト内容保存
🌐
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>フォトリアリスティックな地球シミュレーション</title>
<style>
body {
margin: 0;
overflow: hidden;
background-color: black;
font-family: 'Arial', sans-serif;
}
#info {
position: absolute;
top: 20px;
left: 20px;
color: white;
background: rgba(0, 0, 0, 0.7);
padding: 10px 20px;
border-radius: 5px;
font-size: 14px;
pointer-events: none;
z-index: 100;
border: 1px solid rgba(255, 255, 255, 0.3);
}
#controls-hint {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
color: rgba(255, 255, 255, 0.8);
background: rgba(0, 0, 0, 0.5);
padding: 8px 16px;
border-radius: 20px;
font-size: 12px;
pointer-events: none;
z-index: 100;
border: 1px solid rgba(255, 255, 255, 0.2);
letter-spacing: 0.5px;
}
</style>
</head>
<body>
<div id="info">🌍 フォトリアリスティック地球シミュレーション</div>
<div id="controls-hint">🖱️ ドラッグ: 回転 | スクロール: ズーム | 右ドラッグ: パン</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.js"></script>
<script>
// シーン、カメラ、レンダラーの設定
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 5);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1.2;
document.body.appendChild(renderer.domElement);
// オービットコントロールの設定
const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.05;
controls.minDistance = 2;
controls.maxDistance = 15;
controls.autoRotate = false;
controls.enablePan = true;
// テクスチャローダー
const textureLoader = new THREE.TextureLoader();
// 地球のテクスチャを読み込む
const earthDayTexture = textureLoader.load('https://threejs.org/examples/textures/planets/earth_atmos_2048.jpg');
const earthNightTexture = textureLoader.load('https://threejs.org/examples/textures/planets/earth_lights_2048.png');
const earthSpecularTexture = textureLoader.load('https://threejs.org/examples/textures/planets/earth_specular_2048.jpg');
const earthNormalTexture = textureLoader.load('https://threejs.org/examples/textures/planets/earth_normal_2048.jpg');
const cloudTexture = textureLoader.load('https://threejs.org/examples/textures/planets/earth_clouds_1024.png');
const starTexture = textureLoader.load('https://threejs.org/examples/textures/planets/galaxy_starfield.png');
// 地球のマテリアル設定
const earthMaterial = new THREE.MeshPhongMaterial({
map: earthDayTexture,
specularMap: earthSpecularTexture,
specular: new THREE.Color(0x333333),
shininess: 25,
normalMap: earthNormalTexture,
normalScale: new THREE.Vector2(0.8, 0.8),
emissive: new THREE.Color(0x000000),
emissiveMap: earthNightTexture,
emissiveIntensity: 1.0
});
// 地球メッシュの作成
const earthGeometry = new THREE.SphereGeometry(1, 64, 64);
const earth = new THREE.Mesh(earthGeometry, earthMaterial);
earth.castShadow = true;
earth.receiveShadow = true;
scene.add(earth);
// 雲レイヤーの作成
const cloudMaterial = new THREE.MeshPhongMaterial({
map: cloudTexture,
transparent: true,
opacity: 0.4,
depthWrite: false,
blending: THREE.AdditiveBlending
});
const cloudGeometry = new THREE.SphereGeometry(1.01, 64, 64);
const clouds = new THREE.Mesh(cloudGeometry, cloudMaterial);
clouds.castShadow = false;
clouds.receiveShadow = false;
scene.add(clouds);
// 星背景の作成
const starGeometry = new THREE.SphereGeometry(50, 64, 64);
const starMaterial = new THREE.MeshBasicMaterial({
map: starTexture,
side: THREE.BackSide,
transparent: true,
opacity: 0.9
});
const stars = new THREE.Mesh(starGeometry, starMaterial);
scene.add(stars);
// 太陽光（ディレクショナルライト）
const sunLight = new THREE.DirectionalLight(0xffffff, 1.5);
sunLight.position.set(5, 3, 5);
sunLight.castShadow = true;
sunLight.shadow.mapSize.width = 2048;
sunLight.shadow.mapSize.height = 2048;
sunLight.shadow.camera.near = 0.5;
sunLight.shadow.camera.far = 20;
sunLight.shadow.camera.left = -3;
sunLight.shadow.camera.right = 3;
sunLight.shadow.camera.top = 3;
sunLight.shadow.camera.bottom = -3;
scene.add(sunLight);
// 環境光（暗い側の補助光）
const ambientLight = new THREE.AmbientLight(0x222222, 0.5);
scene.add(ambientLight);
// 補助的なポイントライト（夜側の都市の明かりを強調）
const fillLight = new THREE.PointLight(0x4466ff, 0.3, 10);
fillLight.position.set(-5, -2, -5);
scene.add(fillLight);
// アニメーションループ
function animate() {
requestAnimationFrame(animate);
// 地球の自転
earth.rotation.y += 0.001;
// 雲の独立した回転（地球より少し速く）
clouds.rotation.y += 0.0015;
clouds.rotation.x += 0.0002;
// 星のゆっくりとした回転
stars.rotation.y += 0.0001;
// コントロールの更新
controls.update();
renderer.render(scene, camera);
}
// ウィンドウリサイズ対応
window.addEventListener('resize', () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
// アニメーション開始
animate();
// 初期のカメラアングルを少し調整
camera.position.set(2, 1, 4);
controls.target.set(0, 0, 0);
controls.update();
</script>
</body>
</html>
ログインして完全なプロンプトを表示
次で続行:
ログインすると、次に同意したことになります： 利用規約 と プライバシーポリシー
使い方
このプロンプトは coding 向けに設計されています。上の内容をコピーして、お好みの AI ツールに貼り付けてください。
最良の結果を得るには、プレースホルダー（角括弧や大文字で示された部分）を具体的な要件に置き換えてください。
ノート
0 件のコメント