add atmosphere
This commit is contained in:
276
atmosphere/src/App.jsx
Normal file
276
atmosphere/src/App.jsx
Normal 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
9
atmosphere/src/main.jsx
Normal 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>,
|
||||
)
|
||||
Reference in New Issue
Block a user