ai/vrm
1
0
Fork 0
Code Activity

add atmosphere

Browse Source
This commit is contained in:
syui
2025-11-20 19:39:03 +09:00
parent 8dddebec16
commit cb720251e7
33 changed files with 750 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
atmosphere/README.md Normal file
View File

15
atmosphere/index.html Normal file
View File

@@ -0,0 +1,15 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>VRM Animation Preview</title>
<style>
html, body, #root { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; }
</style>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>

26
atmosphere/package.json Normal file
View File

@@ -0,0 +1,26 @@
{
"name": "react-vrm-atmosphere",
"version": "1.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"@pixiv/three-vrm": "^3.4.4",
"@pixiv/three-vrm-animation": "^3.4.4",
"@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": {
"@vitejs/plugin-react": "^4.2.1",
"vite": "^5.1.0"
}
}

BIN
atmosphere/public/ai.vrm Normal file
View File

Binary file not shown.

BIN
atmosphere/public/fly.vrma Normal file
View File

Binary file not shown.

BIN
atmosphere/public/idle.vrma Normal file
View File

Binary file not shown.

BIN
atmosphere/public/run.vrma Normal file
View File

Binary file not shown.

276
atmosphere/src/App.jsx Normal file
View File

@@ -0,0 +1,276 @@
import React, { useEffect, useRef, Suspense, useState } from 'react';
import { Canvas, useFrame, useLoader, useThree } from '@react-three/fiber';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
import { VRMLoaderPlugin, VRMUtils } from '@pixiv/three-vrm';
import { createVRMAnimationClip, VRMAnimationLoaderPlugin } from '@pixiv/three-vrm-animation';
import { AnimationMixer, Vector3, MathUtils } from 'three';
import { OrbitControls, PerspectiveCamera } from '@react-three/drei';
import { EffectComposer, ToneMapping } from '@react-three/postprocessing';
import { ToneMappingMode } from 'postprocessing';
import * as THREE from 'three';
// Takram Libraries
import { AerialPerspective, Atmosphere } from '@takram/three-atmosphere/r3f';
import { Clouds, CloudLayer } from '@takram/three-clouds/r3f';
const BASE_URL = import.meta.env.BASE_URL;
const VRM_URL = `${BASE_URL}ai.vrm`;
const VRMA_URL = `${BASE_URL}fly.vrma`;
const EARTH_RADIUS = 6378137;
// 天気変更の間隔 (ms) - 5分
const WEATHER_INTERVAL = 5 * 60 * 1000;
// 時間の進行速度 (倍率)
const TIME_SCALE = 100;
// 初期時刻: 正午 (12:00)
const INITIAL_DATE = new Date('2024-06-21T12:00:00');
// --- Weather Presets (天候設定) ---
const WEATHER_PRESETS = [
{
name: 'Clear (快晴)',
coverage: 0.1,
layers: [
{ channel: 'r', altitude: 1500, height: 500, densityScale: 0.0 },
{ channel: 'g', altitude: 2500, height: 800, densityScale: 0.0 },
{ channel: 'b', altitude: 7500, height: 500, densityScale: 0.1 },
]
},
{
name: 'Sunny (晴れ)',
coverage: 0.4,
layers: [
{ channel: 'r', altitude: 1500, height: 500, densityScale: 0.4 },
{ channel: 'g', altitude: 2500, height: 800, densityScale: 0.0 },
{ channel: 'b', altitude: 7500, height: 500, densityScale: 0.2 },
]
},
{
name: 'Cloudy (曇り)',
coverage: 0.75,
layers: [
{ channel: 'r', altitude: 1500, height: 500, densityScale: 0.6 },
{ channel: 'g', altitude: 2000, height: 1000, densityScale: 0.5 },
{ channel: 'b', altitude: 7500, height: 500, densityScale: 0.0 },
]
}
];
// ---------------------------------------------------------
// Scene Components (Inside Canvas)
// ---------------------------------------------------------
// Canvasの内側で動作するメインシーンコンポーネント
function AtmosphereScene() {
const { gl } = useThree();
const sunRef = useRef();
const atmosphereRef = useRef();
const dateRef = useRef(new Date(INITIAL_DATE));
const [weather, setWeather] = useState(WEATHER_PRESETS[1]);
// 1. 露出設定 (Canvas内なのでuseThreeが使える)
useEffect(() => {
gl.toneMapping = THREE.NoToneMapping;
gl.toneMappingExposure = 10.0;
}, [gl]);
// 2. 天候の定期変更
useEffect(() => {
const interval = setInterval(() => {
setWeather(prev => {
const others = WEATHER_PRESETS.filter(w => w.name !== prev.name);
const next = others[Math.floor(Math.random() * others.length)];
console.log(`[Weather] Changing to: ${next.name}`);
return next;
});
}, WEATHER_INTERVAL);
return () => clearInterval(interval);
}, []);
// 3. 時間進行と太陽移動 (Canvas内なのでuseFrameが使える)
useFrame((state, delta) => {
// 時間を進める
const currentDate = dateRef.current;
const elapsedMs = delta * TIME_SCALE * 1000;
currentDate.setTime(currentDate.getTime() + elapsedMs);
// Atmosphere更新
if (atmosphereRef.current) {
atmosphereRef.current.updateByDate(currentDate);
}
// 太陽移動
if (sunRef.current) {
const hours = currentDate.getHours() + currentDate.getMinutes() / 60 + currentDate.getSeconds() / 3600;
const sunAngle = MathUtils.mapLinear(hours, 6, 18, 0, Math.PI);
const sunX = -Math.cos(sunAngle);
const sunY = Math.sin(sunAngle);
if (hours < 6 || hours > 18) {
sunRef.current.position.set(0, -1, 0);
sunRef.current.intensity = 0.0;
} else {
sunRef.current.position.set(sunX, sunY, 0.2);
sunRef.current.intensity = MathUtils.lerp(0.5, 3.0, sunY);
}
}
});
return (
<>
<PerspectiveCamera
makeDefault
position={[0, EARTH_RADIUS + 2000, 0]}
near={1}
far={10000000}
fov={45}
/>
<directionalLight
ref={sunRef}
position={[0, 1, 0]}
intensity={3.0}
castShadow
/>
<Atmosphere ref={atmosphereRef}>
<EffectComposer multisampling={0} disableNormalPass={false}>
<Clouds disableDefaultLayers coverage={weather.coverage}>
{weather.layers.map((layer, index) => (
<CloudLayer
key={index}
channel={layer.channel}
altitude={layer.altitude}
height={layer.height}
densityScale={layer.densityScale}
shapeAmount={0.5}
/>
))}
</Clouds>
<AerialPerspective sky sunLight skyLight />
<ToneMapping mode={ToneMappingMode.AGX} />
</EffectComposer>
</Atmosphere>
<FlyOverCamera />
</>
);
}
function FlyOverCamera() {
useFrame((state) => {
const t = state.clock.getElapsedTime() * 0.05;
const altitude = 2000;
const radius = 5000;
state.camera.position.x = Math.sin(t) * radius;
state.camera.position.z = Math.cos(t) * radius;
state.camera.position.y = EARTH_RADIUS + altitude;
const lookAtTarget = new Vector3(
Math.sin(t + 0.1) * radius,
EARTH_RADIUS + altitude,
Math.cos(t + 0.1) * radius
);
state.camera.lookAt(lookAtTarget);
});
return null;
}
// ---------------------------------------------------------
// Scene 2: Avatar
// ---------------------------------------------------------
function VrmCharacter() {
const mixerRef = useRef(null);
const vrmRef = useRef(null);
const gltf = useLoader(GLTFLoader, VRM_URL, (loader) => {
loader.register((parser) => new VRMLoaderPlugin(parser));
});
const vrma = useLoader(GLTFLoader, VRMA_URL, (loader) => {
loader.register((parser) => new VRMAnimationLoaderPlugin(parser));
});
useEffect(() => {
const vrm = gltf.userData.vrm;
vrmRef.current = vrm;
VRMUtils.removeUnnecessaryJoints(vrm.scene);
vrm.humanoid.resetPose();
vrm.scene.rotation.y = Math.PI;
if (vrma.userData.vrmAnimations?.[0]) {
const clip = createVRMAnimationClip(vrma.userData.vrmAnimations[0], vrm);
mixerRef.current = new AnimationMixer(vrm.scene);
mixerRef.current.clipAction(clip).play();
}
}, [gltf, vrma]);
useFrame((state, delta) => {
mixerRef.current?.update(delta);
vrmRef.current?.update(delta);
});
return <primitive object={gltf.scene} />;
}
function AvatarLayer() {
return (
<Canvas gl={{ alpha: true, antialias: true }}>
<PerspectiveCamera makeDefault position={[0, 1.5, 3]} fov={30} />
<directionalLight position={[-1, 1, 1]} intensity={1.5} />
<ambientLight intensity={1.0} />
<spotLight position={[0, 2, -2]} intensity={3} color="#ffdcb4" />
<Suspense fallback={null}>
<VrmCharacter />
</Suspense>
<OrbitControls target={[0, 1.2, 0]} />
</Canvas>
);
}
// ---------------------------------------------------------
// Main App
// ---------------------------------------------------------
function AtmosphereLayer() {
// Canvasが親となり、その中にロジックコンポーネント(AtmosphereScene)を入れる
return (
<Canvas>
<AtmosphereScene />
</Canvas>
);
}
export default function App() {
const layerStyle = {
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
};
return (
<div style={{ position: 'relative', width: '100vw', height: '100vh', background: '#000' }}>
{/* Layer 0: Atmosphere */}
<div style={{ ...layerStyle, zIndex: 0 }}>
<AtmosphereLayer />
</div>
{/* Layer 1: Avatar */}
<div style={{ ...layerStyle, zIndex: 1, pointerEvents: 'none' }}>
<div style={{ width: '100%', height: '100%', pointerEvents: 'auto' }}>
<AvatarLayer />
</div>
</div>
</div>
);
}

9
atmosphere/src/main.jsx Normal file
View File

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

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

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