Compare commits
2 Commits
main
...
d8a286b27f
| Author | SHA1 | Date | |
|---|---|---|---|
d8a286b27f
|
|||
|
96d0413fd5
|
4
.gitignore
vendored
4
.gitignore
vendored
@@ -6,8 +6,4 @@
|
|||||||
**lock*
|
**lock*
|
||||||
**_site**
|
**_site**
|
||||||
**.jekyll**
|
**.jekyll**
|
||||||
**package-lock.json
|
|
||||||
package-lock.json
|
|
||||||
node_modules
|
|
||||||
galaxy-react/public/models
|
galaxy-react/public/models
|
||||||
holo/public/models
|
|
||||||
|
|||||||
24
atmosphere/.gitignore
vendored
24
atmosphere/.gitignore
vendored
@@ -1,24 +0,0 @@
|
|||||||
# 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 +0,0 @@
|
|||||||
# aicloud
|
|
||||||
File diff suppressed because it is too large
Load Diff
@@ -1,22 +0,0 @@
|
|||||||
# 開発経緯まとめ
|
|
||||||
|
|
||||||
## 目的
|
|
||||||
`three-geospatial`（地球規模の背景）と、通常の3Dモデル（キャラクター/カード）を同時に表示する。
|
|
||||||
|
|
||||||
## 直面した課題と解決策
|
|
||||||
|
|
||||||
1. **スケールの不一致**
|
|
||||||
* **課題**: 地球（半径6000km）とキャラクター（数m）のサイズ差が大きすぎて、表示崩れや操作不能が発生。
|
|
||||||
* **解決策**: **デュアルシーン構成**を採用。背景（地球）と前景（キャラ）を別々のシーンとして作成し、重ねて描画することで解決。
|
|
||||||
|
|
||||||
2. **背景が黒くなる**
|
|
||||||
* **課題**: 前景を操作（回転）すると、背景の空が消えてしまう。
|
|
||||||
* **解決策**: レンダリングの自動クリア（`autoClear`）を制御し、背景を描画した後に前景を上書きするように修正。
|
|
||||||
|
|
||||||
3. **モデルの裏返り（透過問題）**
|
|
||||||
* **課題**: GLBモデルの裏面が表面に透けて見える（Inside-out）。
|
|
||||||
* **解決策**: マテリアル設定を強制的に「不透明（Opaque）」かつ「深度書き込み有効（Depth Write）」に変更。
|
|
||||||
|
|
||||||
## システム構成
|
|
||||||
* **Scene 1 (奥)**: 地球、大気、雲 (ECEF座標系)
|
|
||||||
* **Scene 2 (手前)**: キャラクター、ライト、環境マップ (通常座標系)
|
|
||||||
@@ -1,13 +0,0 @@
|
|||||||
<!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>
|
|
||||||
@@ -1,35 +0,0 @@
|
|||||||
{
|
|
||||||
"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": "^7.2.7"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
<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>
|
|
||||||
|
Before Width: | Height: | Size: 1.5 KiB |
@@ -1 +0,0 @@
|
|||||||
/* App specific styles */
|
|
||||||
@@ -1,22 +0,0 @@
|
|||||||
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
|
|
||||||
@@ -1,187 +0,0 @@
|
|||||||
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 />
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,9 +0,0 @@
|
|||||||
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)
|
|
||||||
}
|
|
||||||
@@ -1,7 +0,0 @@
|
|||||||
body {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
width: 100vw;
|
|
||||||
height: 100vh;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
@@ -1,24 +0,0 @@
|
|||||||
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')!)
|
|
||||||
@@ -1,10 +0,0 @@
|
|||||||
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,96 +0,0 @@
|
|||||||
: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 +0,0 @@
|
|||||||
<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>
|
|
||||||
|
Before Width: | Height: | Size: 1.4 KiB |
1
atmosphere/src/vite-env.d.ts
vendored
1
atmosphere/src/vite-env.d.ts
vendored
@@ -1 +0,0 @@
|
|||||||
/// <reference types="vite/client" />
|
|
||||||
@@ -1,33 +0,0 @@
|
|||||||
{
|
|
||||||
"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"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
@@ -1,12 +0,0 @@
|
|||||||
{
|
|
||||||
"compilerOptions": {
|
|
||||||
"composite": true,
|
|
||||||
"skipLibCheck": true,
|
|
||||||
"module": "ESNext",
|
|
||||||
"moduleResolution": "bundler",
|
|
||||||
"allowSyntheticDefaultImports": true
|
|
||||||
},
|
|
||||||
"include": [
|
|
||||||
"vite.config.ts"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
@@ -1,7 +0,0 @@
|
|||||||
import { defineConfig } from 'vite'
|
|
||||||
import react from '@vitejs/plugin-react'
|
|
||||||
|
|
||||||
// https://vitejs.dev/config/
|
|
||||||
export default defineConfig({
|
|
||||||
plugins: [react()],
|
|
||||||
})
|
|
||||||
@@ -21,7 +21,7 @@
|
|||||||
"react": "^18.3.1",
|
"react": "^18.3.1",
|
||||||
"react-dom": "^18.3.1",
|
"react-dom": "^18.3.1",
|
||||||
"react-router-dom": "^6.26.0",
|
"react-router-dom": "^6.26.0",
|
||||||
"react-scripts": "^0.0.0",
|
"react-scripts": "5.0.1",
|
||||||
"three": "^0.167.1",
|
"three": "^0.167.1",
|
||||||
"three-stdlib": "^2.30.5",
|
"three-stdlib": "^2.30.5",
|
||||||
"typescript": "^4.9.5",
|
"typescript": "^4.9.5",
|
||||||
|
|||||||
@@ -12,13 +12,7 @@ $ npm run start
|
|||||||
# npm install three three-stdlib @types/three @react-three/fiber @react-three/fiber @react-three/drei @react-three/postprocessing
|
# npm install three three-stdlib @types/three @react-three/fiber @react-three/fiber @react-three/drei @react-three/postprocessing
|
||||||
```
|
```
|
||||||
|
|
||||||
## tips
|
|
||||||
|
|
||||||
- `?ms=0`
|
|
||||||
- `?g=moon`
|
|
||||||
|
|
||||||
## ref
|
## ref
|
||||||
|
|
||||||
- galaxy.glb : https://sketchfab.com/3d-models/need-some-space-d6521362b37b48e3a82bce4911409303
|
- galaxy.glb : https://sketchfab.com/3d-models/need-some-space-d6521362b37b48e3a82bce4911409303
|
||||||
- tsx : https://gist.github.com/artokun/fb7f0c68a01ba5d9813abb3ccce254c4
|
- tsx : https://gist.github.com/artokun/fb7f0c68a01ba5d9813abb3ccce254c4
|
||||||
|
|
||||||
|
|||||||
@@ -12,17 +12,17 @@
|
|||||||
"css-loader": "^5.0.1",
|
"css-loader": "^5.0.1",
|
||||||
"dat.gui": "^0.7.7",
|
"dat.gui": "^0.7.7",
|
||||||
"file-loader": "^6.2.0",
|
"file-loader": "^6.2.0",
|
||||||
"firebase-tools": "^14.27.0",
|
"firebase-tools": "^9.10.0",
|
||||||
"html-loader": "^1.3.2",
|
"html-loader": "^1.3.2",
|
||||||
"html-webpack-plugin": "^5.0.0-alpha.7",
|
"html-webpack-plugin": "^5.0.0-alpha.7",
|
||||||
"mini-css-extract-plugin": "^1.3.4",
|
"mini-css-extract-plugin": "^1.3.4",
|
||||||
"portfinder-sync": "0.0.2",
|
"portfinder-sync": "0.0.2",
|
||||||
"raw-loader": "^4.0.2",
|
"raw-loader": "^4.0.2",
|
||||||
"style-loader": "^2.0.0",
|
"style-loader": "^2.0.0",
|
||||||
"three": "^0.181.2",
|
"three": "^0.124.0",
|
||||||
"webpack": "^5.14.0",
|
"webpack": "^5.14.0",
|
||||||
"webpack-cli": "^4.3.1",
|
"webpack-cli": "^4.3.1",
|
||||||
"webpack-dev-server": "^5.2.2",
|
"webpack-dev-server": "^3.11.2",
|
||||||
"webpack-merge": "^5.7.3"
|
"webpack-merge": "^5.7.3"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -19,7 +19,7 @@
|
|||||||
"axios": "^1.7.7",
|
"axios": "^1.7.7",
|
||||||
"react": "^18.3.1",
|
"react": "^18.3.1",
|
||||||
"react-dom": "^18.3.1",
|
"react-dom": "^18.3.1",
|
||||||
"react-scripts": "^0.0.0",
|
"react-scripts": "5.0.1",
|
||||||
"three": "^0.167.1",
|
"three": "^0.167.1",
|
||||||
"three-stdlib": "^2.30.5",
|
"three-stdlib": "^2.30.5",
|
||||||
"typescript": "^4.9.5",
|
"typescript": "^4.9.5",
|
||||||
|
|||||||
@@ -17,7 +17,6 @@ html {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.time {
|
.time {
|
||||||
transform:scale(-1,1);
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 10px;
|
top: 10px;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
@@ -28,7 +27,6 @@ html {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.api {
|
.api {
|
||||||
transform:scale(-1,1);
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 50px;
|
top: 50px;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
|
|||||||
@@ -1,12 +1,7 @@
|
|||||||
import React, { useState, useEffect } from 'react';
|
import React, { useState, useEffect } from 'react';
|
||||||
|
|
||||||
//function reverseString(str: string): string {
|
|
||||||
// return str.split('').reverse().join('');
|
|
||||||
//}
|
|
||||||
|
|
||||||
const ScreenTimeCanvas: React.FC = () => {
|
const ScreenTimeCanvas: React.FC = () => {
|
||||||
const [currentDateTime, setCurrentDateTime] = useState<string>('');
|
const [currentDateTime, setCurrentDateTime] = useState<string>('');
|
||||||
//const [reversedDateTime, setReversedDateTime] = useState<string>('');
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const updateDateTime = () => {
|
const updateDateTime = () => {
|
||||||
@@ -20,10 +15,11 @@ const ScreenTimeCanvas: React.FC = () => {
|
|||||||
second: '2-digit'
|
second: '2-digit'
|
||||||
});
|
});
|
||||||
setCurrentDateTime(formatted);
|
setCurrentDateTime(formatted);
|
||||||
//setReversedDateTime(reverseString(formatted));
|
|
||||||
};
|
};
|
||||||
|
|
||||||
updateDateTime();
|
updateDateTime();
|
||||||
const timer = setInterval(updateDateTime, 1000);
|
const timer = setInterval(updateDateTime, 1000);
|
||||||
|
|
||||||
return () => clearInterval(timer);
|
return () => clearInterval(timer);
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
|
|||||||
@@ -5,20 +5,19 @@ import { useFrame, Canvas } from '@react-three/fiber';
|
|||||||
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
|
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
|
||||||
import { VRM, VRMUtils, VRMLoaderPlugin } from '@pixiv/three-vrm';
|
import { VRM, VRMUtils, VRMLoaderPlugin } from '@pixiv/three-vrm';
|
||||||
import { VRMAnimationLoaderPlugin, VRMAnimation, createVRMAnimationClip } from "@pixiv/three-vrm-animation";
|
import { VRMAnimationLoaderPlugin, VRMAnimation, createVRMAnimationClip } from "@pixiv/three-vrm-animation";
|
||||||
import { VRMSpringBoneManager } from '@pixiv/three-vrm-springbone';
|
|
||||||
|
|
||||||
interface ModelProps {
|
interface ModelProps {
|
||||||
url: string
|
url: string
|
||||||
url_anim: string
|
url_anim: string
|
||||||
scale: number
|
scale: [number, number, number]
|
||||||
position: [number, number, number]
|
position: [number, number, number]
|
||||||
rotation: [number, number, number]
|
rotation: [number, number, number]
|
||||||
}
|
}
|
||||||
|
|
||||||
const VRMModel: React.FC<ModelProps> = ({ url, url_anim, position, rotation, scale }) => {
|
const VRMModel: React.FC<ModelProps> = ({ url, url_anim, position, rotation, scale }) => {
|
||||||
|
|
||||||
const [vrm, setVrm] = useState<VRM | null>(null);
|
const [vrm, setVrm] = useState<VRM | null>(null);
|
||||||
const mixerRef = useRef<THREE.AnimationMixer | null>(null);
|
const mixerRef = useRef<THREE.AnimationMixer | null>(null);
|
||||||
const springBoneManagerRef = useRef<VRMSpringBoneManager | null>(null);
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const loader = new GLTFLoader();
|
const loader = new GLTFLoader();
|
||||||
@@ -27,14 +26,7 @@ const VRMModel: React.FC<ModelProps> = ({ url, url_anim, position, rotation, sca
|
|||||||
loader.load(url, (gltf) => {
|
loader.load(url, (gltf) => {
|
||||||
const vrmModel = gltf.userData.vrm as VRM;
|
const vrmModel = gltf.userData.vrm as VRM;
|
||||||
VRMUtils.removeUnnecessaryJoints(vrmModel.scene);
|
VRMUtils.removeUnnecessaryJoints(vrmModel.scene);
|
||||||
springBoneManagerRef.current = vrmModel.springBoneManager as VRMSpringBoneManager;
|
|
||||||
springBoneManagerRef.current?.reset();
|
|
||||||
setVrm(vrmModel);
|
setVrm(vrmModel);
|
||||||
if (vrmModel) {
|
|
||||||
vrmModel.scene.rotation.set(...rotation);
|
|
||||||
vrmModel.scene.position.set(...position);
|
|
||||||
vrmModel.scene.scale.setScalar(scale);
|
|
||||||
}
|
|
||||||
const mixer = new THREE.AnimationMixer(vrmModel.scene);
|
const mixer = new THREE.AnimationMixer(vrmModel.scene);
|
||||||
mixerRef.current = mixer;
|
mixerRef.current = mixer;
|
||||||
loader.load(url_anim, (animGltf) => {
|
loader.load(url_anim, (animGltf) => {
|
||||||
@@ -45,15 +37,14 @@ const VRMModel: React.FC<ModelProps> = ({ url, url_anim, position, rotation, sca
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
}, [url, url_anim, position, scale, rotation]);
|
}, [url, url_anim]);
|
||||||
|
|
||||||
useFrame((state, delta) => {
|
useFrame((state, delta) => {
|
||||||
if (mixerRef.current) mixerRef.current.update(delta);
|
if (mixerRef.current) mixerRef.current.update(delta);
|
||||||
if (springBoneManagerRef.current) springBoneManagerRef.current.update(delta);
|
|
||||||
if (vrm) vrm.update(delta);
|
if (vrm) vrm.update(delta);
|
||||||
});
|
});
|
||||||
|
|
||||||
return vrm ? <primitive object={vrm.scene} /> : null;
|
return vrm ? <primitive object={vrm.scene} position={position} rotation={rotation} scale={scale}/> : null;
|
||||||
};
|
};
|
||||||
|
|
||||||
export const VRMModelCanvas = () => {
|
export const VRMModelCanvas = () => {
|
||||||
@@ -74,10 +65,10 @@ export const VRMModelCanvas = () => {
|
|||||||
}}
|
}}
|
||||||
camera={{ position: [1.2, 0, 0] }}>
|
camera={{ position: [1.2, 0, 0] }}>
|
||||||
<color attach="background" args={["#000"]} /> {/* Light gray background */}
|
<color attach="background" args={["#000"]} /> {/* Light gray background */}
|
||||||
<OrbitControls dampingFactor={0.05} rotateSpeed={0.1} zoomSpeed={0.5}/>
|
<OrbitControls />
|
||||||
<ambientLight intensity={10} />
|
<ambientLight intensity={10} />
|
||||||
<pointLight position={[10, 10, 10]} />
|
<pointLight position={[10, 10, 10]} />
|
||||||
<VRMModel url="./models/t.vrm" url_anim="./models/default.vrma" position={[0, -0.6, 0]} rotation={[0, 89.5, 0]} scale={1} />
|
<VRMModel url="./models/t.vrm" url_anim="./models/default.vrma" position={[0, -0.7, 0]} rotation={[0, -4.7, 0]} scale={[1, 1, 1]} />
|
||||||
</Canvas>
|
</Canvas>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
|||||||
Reference in New Issue
Block a user