fix

2025-11-20 12:36:39 +09:00
parent cb2596f01b
commit 3dbe43dc36
16 changed files with 1489 additions and 1 deletions
--- a/1
+++ b/1
--- a/atmosphere/README.md
+++ b/atmosphere/README.md
@@ -0,0 +1 @@
+# aicloud
--- a/atmosphere/docs/README.md
+++ b/atmosphere/docs/README.md
--- a/atmosphere/docs/summary.md
+++ b/atmosphere/docs/summary.md
@@ -0,0 +1,22 @@
+# 開発経緯まとめ
+
+## 目的
+`three-geospatial`（地球規模の背景）と、通常の3Dモデル（キャラクター/カード）を同時に表示する。
+
+## 直面した課題と解決策
+
+1.  **スケールの不一致**
+    *   **課題**: 地球（半径6000km）とキャラクター（数m）のサイズ差が大きすぎて、表示崩れや操作不能が発生。
+    *   **解決策**: **デュアルシーン構成**を採用。背景（地球）と前景（キャラ）を別々のシーンとして作成し、重ねて描画することで解決。
+
+2.  **背景が黒くなる**
+    *   **課題**: 前景を操作（回転）すると、背景の空が消えてしまう。
+    *   **解決策**: レンダリングの自動クリア（`autoClear`）を制御し、背景を描画した後に前景を上書きするように修正。
+
+3.  **モデルの裏返り（透過問題）**
+    *   **課題**: GLBモデルの裏面が表面に透けて見える（Inside-out）。
+    *   **解決策**: マテリアル設定を強制的に「不透明（Opaque）」かつ「深度書き込み有効（Depth Write）」に変更。
+
+## システム構成
+*   **Scene 1 (奥)**: 地球、大気、雲 (ECEF座標系)
+*   **Scene 2 (手前)**: キャラクター、ライト、環境マップ (通常座標系)
--- a/atmosphere/index.html
+++ b/atmosphere/index.html
@@ -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>
--- a/atmosphere/package.json
+++ b/atmosphere/package.json
@@ -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"
+    }
+}
--- a/atmosphere/public/assets/card.glb
+++ b/atmosphere/public/assets/card.glb
--- a/atmosphere/src/App.css
+++ b/atmosphere/src/App.css
@@ -0,0 +1 @@
+/* App specific styles */
--- a/atmosphere/src/App.tsx
+++ b/atmosphere/src/App.tsx
@@ -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
--- a/atmosphere/src/components/Scene.tsx
+++ b/atmosphere/src/components/Scene.tsx
@@ -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 />
+        </>
+    )
+}
--- a/atmosphere/src/index.css
+++ b/atmosphere/src/index.css
@@ -0,0 +1,7 @@
+body {
+  margin: 0;
+  padding: 0;
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+}
--- a/atmosphere/src/main.tsx
+++ b/atmosphere/src/main.tsx
@@ -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>,
+)
--- a/atmosphere/src/vite-env.d.ts
+++ b/atmosphere/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
--- a/atmosphere/tsconfig.json
+++ b/atmosphere/tsconfig.json
@@ -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"
+        }
+    ]
+}
--- a/atmosphere/tsconfig.node.json
+++ b/atmosphere/tsconfig.node.json
@@ -0,0 +1,12 @@
+{
+    "compilerOptions": {
+        "composite": true,
+        "skipLibCheck": true,
+        "module": "ESNext",
+        "moduleResolution": "bundler",
+        "allowSyntheticDefaultImports": true
+    },
+    "include": [
+        "vite.config.ts"
+    ]
+}
--- a/atmosphere/vite.config.ts
+++ b/atmosphere/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})