ai/star
1
0
Fork 0
Code Activity

fix

Browse Source
This commit is contained in:
syui
2025-11-20 12:36:39 +09:00
parent cb2596f01b
commit 3dbe43dc36
16 changed files with 1489 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
atmosphere

Submodule atmosphere deleted from fdeb24b99e

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"
}
}

BIN
atmosphere/public/assets/card.glb Normal file
View File

Binary file not shown.

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="/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 />
</>
)
}

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

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

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>,
)

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()],
})