ai/star
1
0
Fork 0
Code Activity

add atmpshere

Browse Source
This commit is contained in:
syui
2025-11-20 12:33:57 +09:00
parent 93ea0e88f7
commit 16a52e13de
20 changed files with 1644 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
atmosphere/.gitignore vendored Normal file
View File

@@ -0,0 +1,24 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

1
atmosphere/README.md Normal file
View File

@@ -0,0 +1 @@
# aicloud

1138
atmosphere/docs/README.md Normal file
View File

File diff suppressed because it is too large Load Diff

22
atmosphere/docs/summary.md Normal file
View File

@@ -0,0 +1,22 @@
# 開発経緯まとめ
## 目的
`three-geospatial`（地球規模の背景）と、通常の3Dモデル（キャラクター/カード）を同時に表示する。
## 直面した課題と解決策
1. **スケールの不一致**
* **課題**: 地球（半径6000km）とキャラクター（数m）のサイズ差が大きすぎて、表示崩れや操作不能が発生。
* **解決策**: **デュアルシーン構成**を採用。背景（地球）と前景（キャラ）を別々のシーンとして作成し、重ねて描画することで解決。
2. **背景が黒くなる**
* **課題**: 前景を操作（回転）すると、背景の空が消えてしまう。
* **解決策**: レンダリングの自動クリア（`autoClear`）を制御し、背景を描画した後に前景を上書きするように修正。
3. **モデルの裏返り（透過問題）**
* **課題**: GLBモデルの裏面が表面に透けて見える（Inside-out）。
* **解決策**: マテリアル設定を強制的に「不透明（Opaque）」かつ「深度書き込み有効（Depth Write）」に変更。
## システム構成
* **Scene 1 (奥)**: 地球、大気、雲 (ECEF座標系)
* **Scene 2 (手前)**: キャラクター、ライト、環境マップ (通常座標系)

13
atmosphere/index.html Normal file
View File

@@ -0,0 +1,13 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Three Clouds</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>

35
atmosphere/package.json Normal file
View File

@@ -0,0 +1,35 @@
{
"name": "three-clouds-project",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview"
},
"dependencies": {
"@react-three/drei": "^10.7.7",
"@react-three/fiber": "^9.4.0",
"@react-three/postprocessing": "^3.0.4",
"@takram/three-atmosphere": "^0.15.1",
"@takram/three-clouds": "^0.5.2",
"react": "^19.0.0-rc.1",
"react-dom": "^19.0.0-rc.1",
"three": "^0.181.2"
},
"devDependencies": {
"@types/react": "npm:types-react@^19.0.0-rc.1",
"@types/react-dom": "npm:types-react-dom@^19.0.0-rc.1",
"@types/three": "^0.160.0",
"@typescript-eslint/eslint-plugin": "^6.21.0",
"@typescript-eslint/parser": "^6.21.0",
"@vitejs/plugin-react": "^4.2.1",
"eslint": "^8.56.0",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.5",
"typescript": "^5.2.2",
"vite": "^5.1.0"
}
}

1
atmosphere/public/vite.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

1
atmosphere/src/App.css Normal file
View File

@@ -0,0 +1 @@
/* App specific styles */

22
atmosphere/src/App.tsx Normal file
View File

@@ -0,0 +1,22 @@
import { Canvas } from '@react-three/fiber'
import { Scene } from './components/Scene'
import './App.css'
function App() {
return (
<div style={{ width: '100vw', height: '100vh' }}>
<Canvas
gl={{
antialias: false,
depth: false,
logarithmicDepthBuffer: true,
stencil: false
}}
>
<Scene />
</Canvas>
</div>
)
}
export default App

187
atmosphere/src/components/Scene.tsx Normal file
View File

@@ -0,0 +1,187 @@
import { EffectComposer, ToneMapping } from '@react-three/postprocessing'
import { AerialPerspective, Atmosphere, Sky, Stars, type AtmosphereApi } from '@takram/three-atmosphere/r3f'
import { PrecomputedTexturesGenerator, PrecomputedTextures } from '@takram/three-atmosphere'
import { Clouds } from '@takram/three-clouds/r3f'
import { CloudShape, CloudShapeDetail, LocalWeather, Turbulence } from '@takram/three-clouds'
import { useGLTF, OrbitControls, PerspectiveCamera, Html, Environment } from '@react-three/drei'
import { Suspense, useMemo, useState, useEffect, useRef } from 'react'
import { useThree, useFrame, createPortal } from '@react-three/fiber'
import { Geodetic, radians, Ellipsoid } from '@takram/three-geospatial'
import * as THREE from 'three'
import { ToneMappingMode } from 'postprocessing'
function Model({ url, position, scale }: { url: string; position?: THREE.Vector3 | [number, number, number]; scale?: number }) {
const { scene } = useGLTF(url)
useMemo(() => {
scene.traverse((child) => {
if ((child as THREE.Mesh).isMesh) {
const mesh = child as THREE.Mesh
mesh.castShadow = true
mesh.receiveShadow = true
// Attempt to fix missing tangents warning
if (mesh.geometry && !mesh.geometry.attributes.tangent && mesh.geometry.attributes.position && mesh.geometry.attributes.uv) {
try {
mesh.geometry.computeTangents()
} catch (e) {
console.warn('Failed to compute tangents', e)
}
}
if (mesh.material) {
const mat = mesh.material as THREE.MeshStandardMaterial
// Fix "inside-out" rendering by forcing opaque depth writing
mat.transparent = false
mat.depthWrite = true
mat.depthTest = true
mat.side = THREE.FrontSide // Render only front faces
// Use alphaTest for cutouts instead of transparency
if (mat.map || mat.alphaMap) {
mat.alphaTest = 0.5
}
}
}
})
}, [scene])
return <primitive object={scene} position={position} scale={scale} />
}
const ForegroundScene = () => {
const { gl, size } = useThree()
const scene = useMemo(() => new THREE.Scene(), [])
const camera = useMemo(() => new THREE.PerspectiveCamera(50, size.width / size.height, 0.1, 1000), [size])
const cardRef = useRef<THREE.Group>(null)
useEffect(() => {
camera.position.set(0, 0, 5) // Move camera back
camera.lookAt(0, 0, 0)
}, [camera])
useFrame((_state, delta) => {
// Animate card
if (cardRef.current) {
cardRef.current.rotation.y += delta * 0.5 // Slow rotation
}
// Render foreground scene on top
const originalAutoClear = gl.autoClear
gl.autoClear = false
gl.clearDepth()
gl.render(scene, camera)
gl.autoClear = originalAutoClear
}, 2)
return createPortal(
<>
<ambientLight intensity={1} />
<directionalLight position={[5, 5, 5]} intensity={2} />
<Environment preset="city" background={false} />
<group ref={cardRef}>
<Suspense fallback={null}>
<Model url="/pkg/atmosphere/assets/card.glb" position={[0, 0, 0]} scale={0.5} />
</Suspense>
</group>
</>,
scene
)
}
export const Scene = () => {
const { gl, camera } = useThree()
const [atmosphereTextures, setAtmosphereTextures] = useState<PrecomputedTextures | null>(null)
useEffect(() => {
gl.toneMapping = THREE.NoToneMapping
gl.toneMappingExposure = 10
const generator = new PrecomputedTexturesGenerator(gl)
generator.update().then((textures) => {
setAtmosphereTextures(textures)
generator.dispose({ textures: false })
})
return () => {
// Textures should be disposed when no longer needed
}
}, [gl])
const [
localWeatherTexture,
shapeTexture,
shapeDetailTexture,
turbulenceTexture
] = useMemo(() => [
new LocalWeather(),
new CloudShape(),
new CloudShapeDetail(),
new Turbulence()
], [])
// Position setup using Geodetic (Tokyo area roughly)
const { longitude, latitude, height } = { longitude: 139.767, latitude: 35.68, height: 3000 }
const controlsRef = useRef<any>(null)
const atmosphereRef = useRef<AtmosphereApi>(null)
useEffect(() => {
if (controlsRef.current && camera) {
const geodetic = new Geodetic()
const position = new THREE.Vector3()
const up = new THREE.Vector3()
const offset = new THREE.Vector3()
const rotation = new THREE.Quaternion()
geodetic.set(radians(longitude), radians(latitude), height)
geodetic.toECEF(position)
Ellipsoid.WGS84.getSurfaceNormal(position, up)
rotation.setFromUnitVectors(camera.up, up)
offset.copy(camera.position).sub(controlsRef.current.target)
offset.applyQuaternion(rotation)
camera.up.copy(up)
camera.position.copy(position).add(new THREE.Vector3(0, 500, 2000).applyQuaternion(rotation))
controlsRef.current.target.copy(position)
controlsRef.current.update()
}
}, [camera, longitude, latitude, height])
// UTC 03:00 is 12:00 JST (Noon)
const date = useMemo(() => new Date('2000-06-01T03:00:00Z'), [])
useFrame(() => {
if (atmosphereRef.current) {
atmosphereRef.current.updateByDate(date)
}
})
if (!atmosphereTextures) {
return <Html center>Generating Atmosphere...</Html>
}
return (
<>
<PerspectiveCamera makeDefault far={1e6} near={10} />
<OrbitControls ref={controlsRef} makeDefault minDistance={100} />
<Atmosphere ref={atmosphereRef} textures={atmosphereTextures}>
<Sky />
<Stars />
<EffectComposer enableNormalPass frameBufferType={THREE.HalfFloatType} multisampling={8}>
<Clouds
qualityPreset='high'
coverage={0.4}
localWeatherTexture={localWeatherTexture}
shapeTexture={shapeTexture}
shapeDetailTexture={shapeDetailTexture}
turbulenceTexture={turbulenceTexture}
/>
<AerialPerspective sky sunLight skyLight />
<ToneMapping mode={ToneMappingMode.AGX} />
</EffectComposer>
</Atmosphere>
<ForegroundScene />
</>
)
}

9
atmosphere/src/counter.ts Normal file
View File

@@ -0,0 +1,9 @@
export function setupCounter(element: HTMLButtonElement) {
let counter = 0
const setCounter = (count: number) => {
counter = count
element.innerHTML = `count is ${counter}`
}
element.addEventListener('click', () => setCounter(counter + 1))
setCounter(0)
}

7
atmosphere/src/index.css Normal file
View File

@@ -0,0 +1,7 @@
body {
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
overflow: hidden;
}

24
atmosphere/src/main.ts Normal file
View File

@@ -0,0 +1,24 @@
import './style.css'
import typescriptLogo from './typescript.svg'
import viteLogo from '/vite.svg'
import { setupCounter } from './counter.ts'
document.querySelector<HTMLDivElement>('#root')!.innerHTML = `
<div>
<a href="https://vite.dev" target="_blank">
<img src="${viteLogo}" class="logo" alt="Vite logo" />
</a>
<a href="https://www.typescriptlang.org/" target="_blank">
<img src="${typescriptLogo}" class="logo vanilla" alt="TypeScript logo" />
</a>
<h1>Vite + TypeScript</h1>
<div class="card">
<button id="counter" type="button"></button>
</div>
<p class="read-the-docs">
Click on the Vite and TypeScript logos to learn more
</p>
</div>
`
setupCounter(document.querySelector<HTMLButtonElement>('#counter')!)

10
atmosphere/src/main.tsx Normal file
View File

@@ -0,0 +1,10 @@
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import './index.css'
ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
<App />
</React.StrictMode>,
)

96
atmosphere/src/style.css Normal file
View File

@@ -0,0 +1,96 @@
:root {
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 400;
color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
background-color: #242424;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a {
font-weight: 500;
color: #646cff;
text-decoration: inherit;
}
a:hover {
color: #535bf2;
}
body {
margin: 0;
display: flex;
place-items: center;
min-width: 320px;
min-height: 100vh;
}
h1 {
font-size: 3.2em;
line-height: 1.1;
}
#app {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
text-align: center;
}
.logo {
height: 6em;
padding: 1.5em;
will-change: filter;
transition: filter 300ms;
}
.logo:hover {
filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vanilla:hover {
filter: drop-shadow(0 0 2em #3178c6aa);
}
.card {
padding: 2em;
}
.read-the-docs {
color: #888;
}
button {
border-radius: 8px;
border: 1px solid transparent;
padding: 0.6em 1.2em;
font-size: 1em;
font-weight: 500;
font-family: inherit;
background-color: #1a1a1a;
cursor: pointer;
transition: border-color 0.25s;
}
button:hover {
border-color: #646cff;
}
button:focus,
button:focus-visible {
outline: 4px auto -webkit-focus-ring-color;
}
@media (prefers-color-scheme: light) {
:root {
color: #213547;
background-color: #ffffff;
}
a:hover {
color: #747bff;
}
button {
background-color: #f9f9f9;
}
}

1
atmosphere/src/typescript.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="32" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path fill="#007ACC" d="M0 128v128h256V0H0z"></path><path fill="#FFF" d="m56.612 128.85l-.081 10.483h33.32v94.68h23.568v-94.68h33.321v-10.28c0-5.69-.122-10.444-.284-10.566c-.122-.162-20.4-.244-44.983-.203l-44.74.122l-.121 10.443Zm149.955-10.742c6.501 1.625 11.459 4.51 16.01 9.224c2.357 2.52 5.851 7.111 6.136 8.208c.08.325-11.053 7.802-17.798 11.988c-.244.162-1.22-.894-2.317-2.52c-3.291-4.795-6.745-6.867-12.028-7.233c-7.76-.528-12.759 3.535-12.718 10.321c0 1.992.284 3.17 1.097 4.795c1.707 3.536 4.876 5.649 14.832 9.956c18.326 7.883 26.168 13.084 31.045 20.48c5.445 8.249 6.664 21.415 2.966 31.208c-4.063 10.646-14.14 17.879-28.323 20.276c-4.388.772-14.79.65-19.504-.203c-10.28-1.828-20.033-6.908-26.047-13.572c-2.357-2.6-6.949-9.387-6.664-9.874c.122-.163 1.178-.813 2.356-1.504c1.138-.65 5.446-3.129 9.509-5.485l7.355-4.267l1.544 2.276c2.154 3.29 6.867 7.801 9.712 9.305c8.167 4.307 19.383 3.698 24.909-1.26c2.357-2.153 3.332-4.388 3.332-7.68c0-2.966-.366-4.266-1.91-6.501c-1.99-2.845-6.054-5.242-17.595-10.24c-13.206-5.69-18.895-9.224-24.096-14.832c-3.007-3.25-5.852-8.452-7.03-12.8c-.975-3.617-1.22-12.678-.447-16.335c2.723-12.76 12.353-21.659 26.25-24.3c4.51-.853 14.994-.528 19.424.569Z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

1
atmosphere/src/vite-env.d.ts vendored Normal file
View File

@@ -0,0 +1 @@
/// <reference types="vite/client" />

33
atmosphere/tsconfig.json Normal file
View File

@@ -0,0 +1,33 @@
{
"compilerOptions": {
"target": "ES2020",
"useDefineForClassFields": true,
"lib": [
"ES2020",
"DOM",
"DOM.Iterable"
],
"module": "ESNext",
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true
},
"include": [
"src"
],
"references": [
{
"path": "./tsconfig.node.json"
}
]
}

12
atmosphere/tsconfig.node.json Normal file
View File

@@ -0,0 +1,12 @@
{
"compilerOptions": {
"composite": true,
"skipLibCheck": true,
"module": "ESNext",
"moduleResolution": "bundler",
"allowSyntheticDefaultImports": true
},
"include": [
"vite.config.ts"
]
}

7
atmosphere/vite.config.ts Normal file
View File

@@ -0,0 +1,7 @@
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
})