ai/vrm
1
0
Fork 0
Code Activity

Compare commits

base: ai:main
Branches Tags
ai:main
..
compare: ai:2b2d6f7ba6f481fa85b36cf73a0783937386174e
Branches Tags
ai:main

7 Commits
main ... 2b2d6f7ba6

Author SHA1 Message Date
syui
2b2d6f7ba6 fix fly motion 2025-11-21 06:58:57 +09:00
syui
2998208db9 cleanup 2025-11-21 06:23:23 +09:00
syui
fd8d153948 clean first 2025-11-21 06:18:38 +09:00
syui
74e5d8d628 add atmosphere 2025-11-21 06:13:58 +09:00
syui
3bf02dc8a9 add min2 2025-11-20 18:09:25 +09:00
syui
db911cecdb fix 2024-10-02 04:00:53 +09:00
syui
1380b3a120 update 2024-10-02 03:59:51 +09:00
22 changed files with 75 additions and 304 deletions
Expand all files Collapse all files

21
.github/workflows/gh-pages.yml vendored
View File

@@ -4,11 +4,6 @@ on:
push: push:
branches: branches:
- main - main
environment: gh-pages
env:
GITEA_MAIL: ${{ secrets.GITEA_MAIL }}
GITEA_TOKEN: ${{ secrets.GITEA_TOKEN }}
jobs: jobs:
build-deploy: build-deploy:
@@ -18,24 +13,24 @@ jobs:
- uses: actions/setup-node@v4 - uses: actions/setup-node@v4
with: with:
node-version: 25 node-version: 25
ref: main
submodules: true
fetch-depth: 0
- run: | - run: |
cd atmosphere/
npm i npm i
rm -rf dist/vrma
git clone https://syu:${GITEA_TOKEN}@git.syui.ai/ai/vrma
cp -rf ./vrma/model/ai.vrm public/
cp -rf ./vrma/anime/idle.vrma public/
working-directory: min-react/
- name: Build - name: Build
env: env:
TZ: "Asia/Tokyo" TZ: "Asia/Tokyo"
run: npm run build run: |
working-directory: min-react/ cd atmosphere/
npm run build
- name: Deploy - name: Deploy
uses: peaceiris/actions-gh-pages@v3 uses: peaceiris/actions-gh-pages@v3
with: with:
github_token: ${{ secrets.GITHUB_TOKEN }} github_token: ${{ secrets.GITHUB_TOKEN }}
publish_dir: ./min-react/dist publish_dir: ./atmosphere/dist
user_name: 'ai[bot]' user_name: 'ai[bot]'
user_email: '138105980+yui-syui-ai[bot]@users.noreply.github.com' user_email: '138105980+yui-syui-ai[bot]@users.noreply.github.com'

8
.gitignore vendored
View File

@@ -1,4 +1,5 @@
node_modules node_modules
*package-lock.json
example example
*yarn.lock *yarn.lock
**DS_Store **DS_Store
@@ -6,10 +7,3 @@ dist/*.js
*/node_modules */node_modules
*/public/models */public/models
*/dist/models */dist/models
dist
three-geospatial
**.env
.env
.env.production
**.vrm
**.vrma

15
atmosphere/README.md
View File

@@ -1,15 +0,0 @@
## three-geospatial Clouds 3D Tiles Renderer Integration Example
```sh
$ git clone https://github.com/takram-design-engineering/three-geospatial
$ cd three-geospatial
$ echo STORYBOOK_GOOGLE_MAP_API_KEY=xxx >> .env
$ pnpm nx storybook
```
`clouds-3d-tiles-renderer-integration--tokyo`
[http://localhost:4400/?path=/story/clouds-3d-tiles-renderer-integration--tokyo](http://localhost:4400/?path=/story/clouds-3d-tiles-renderer-integration--tokyo)
![](./img/api.png)

BIN
atmosphere/img/api.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 64 KiB

1
atmosphere/index.html
View File

@@ -3,7 +3,6 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="referrer" content="strict-origin-when-cross-origin" />
<title>VRM Animation Preview</title> <title>VRM Animation Preview</title>
<style> <style>
html, body, #root { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; } html, body, #root { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; }

3
atmosphere/package.json
View File

@@ -15,13 +15,12 @@
"@react-three/postprocessing": "^3.0.4", "@react-three/postprocessing": "^3.0.4",
"@takram/three-atmosphere": "^0.15.1", "@takram/three-atmosphere": "^0.15.1",
"@takram/three-clouds": "^0.5.2", "@takram/three-clouds": "^0.5.2",
"3d-tiles-renderer": "^0.4.18",
"react": "^19.0.0-rc.1", "react": "^19.0.0-rc.1",
"react-dom": "^19.0.0-rc.1", "react-dom": "^19.0.0-rc.1",
"three": "^0.181.2" "three": "^0.181.2"
}, },
"devDependencies": { "devDependencies": {
"@vitejs/plugin-react": "^4.2.1", "@vitejs/plugin-react": "^4.2.1",
"vite": "^7.2.7" "vite": "^5.1.0"
} }
} }

1
atmosphere/public/CNAME
View File

@@ -1 +0,0 @@
vrm.syui.ai

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

Binary file not shown.

BIN
atmosphere/public/favicon.ico
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 15 KiB

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

Binary file not shown.

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

Binary file not shown.

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

Binary file not shown.

BIN
atmosphere/public/fly_stop.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.

304
atmosphere/src/App.jsx
View File

@@ -12,28 +12,20 @@ import * as THREE from 'three';
// Takram Libraries // Takram Libraries
import { AerialPerspective, Atmosphere } from '@takram/three-atmosphere/r3f'; import { AerialPerspective, Atmosphere } from '@takram/three-atmosphere/r3f';
import { Clouds, CloudLayer } from '@takram/three-clouds/r3f'; import { Clouds, CloudLayer } from '@takram/three-clouds/r3f';
import { Geodetic, PointOfView, radians } from '@takram/three-geospatial';
// 3D Tiles Renderer
import { TilesPlugin, TilesRenderer } from '3d-tiles-renderer/r3f';
import {
GLTFExtensionsPlugin,
GoogleCloudAuthPlugin,
TileCompressionPlugin,
TilesFadePlugin,
UpdateOnChangePlugin,
} from '3d-tiles-renderer/plugins';
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';
const BASE_URL = import.meta.env.BASE_URL; const BASE_URL = import.meta.env.BASE_URL;
const VRM_URL = `${BASE_URL}ai.vrm`; const VRM_URL = `${BASE_URL}ai.vrm`;
const VRMA_URL = `${BASE_URL}fly_sky.vrma`; const VRMA_URL = `${BASE_URL}fly.vrma`;
const EARTH_RADIUS = 6378137; const EARTH_RADIUS = 6378137;
// 天気変更の間隔 (ms) - 5分
const WEATHER_INTERVAL = 5 * 60 * 1000; const WEATHER_INTERVAL = 5 * 60 * 1000;
// 時間の進行速度 (倍率)
const TIME_SCALE = 100; const TIME_SCALE = 100;
// 初期時刻: 正午 (12:00)
const INITIAL_DATE = new Date('2024-06-21T12:00:00'); const INITIAL_DATE = new Date('2024-06-21T12:00:00');
// --- Weather Presets (天候設定) --- // --- Weather Presets (天候設定) ---
@@ -67,99 +59,23 @@ const WEATHER_PRESETS = [
} }
]; ];
const LOCATIONS = [
{ name: 'Tokyo', longitude: 139.7671, latitude: 35.6812, heading: 180, pitch: -5, distance: 1100 },
{ name: 'Fuji', longitude: 138.7278, latitude: 35.3206, heading: 0, pitch: -10, distance: 4000 },
{ name: 'Space', longitude: 139.7671, latitude: 35.6812, heading: 0, pitch: -90, distance: 100000 },
];
// --- Shared State for Synchronization --- // --- Shared State for Synchronization ---
// 複数のCanvas間で状態を共有するための簡易ストア // 複数のCanvas間で状態を共有するための簡易ストア
const worldState = { const worldState = {
// 世界座標 (Atmosphere内での位置 - ECEF) // 世界座標 (Atmosphere内での位置)
position: new Vector3(0, EARTH_RADIUS + 100000, 0), position: new Vector3(0, EARTH_RADIUS + 2000, 0),
// ローカル回転 (AvatarLayerでの回転 - Y-up) // カメラの回転 (AvatarLayerのカメラ回転をAtmosphereに同期)
// Note: This is treated as the "Local" quaternion.
quaternion: new Quaternion(), quaternion: new Quaternion(),
// 移動速度 (m/s) // 移動速度 (m/s)
speed: 1000.0, speed: 5000.0,
}; };
// Helper: Calculate Basis Rotation (Alignment to Surface Normal)
function getSurfaceBasis(position) {
if (!position) return new Quaternion();
// Debug Geodetic API
if (!window.geodeticLogged) {
console.log('Geodetic prototype:', Geodetic.prototype);
window.geodeticLogged = true;
}
const up = position.clone().normalize();
if (up.lengthSq() < 0.1) return new Quaternion(); // Safety check
const basis = new Quaternion().setFromUnitVectors(new Vector3(0, 1, 0), up);
return basis;
}
// Helper: Calculate Ellipsoid Radius at current position (WGS84)
function getEllipsoidRadius(position) {
const a = 6378137.0;
const b = 6356752.314245;
const r = position.length();
if (r < 100) return a; // Fallback
// Assuming Z is North in ECEF (Standard)
const z = position.z;
const sinPhi = z / r;
const cosPhi = Math.sqrt(1 - sinPhi * sinPhi);
const aCos = a * cosPhi;
const bSin = b * sinPhi;
const num = (a * aCos) * (a * aCos) + (b * bSin) * (b * bSin);
const den = (aCos * aCos) + (bSin * bSin);
return Math.sqrt(num / den);
}
// Teleport Function
function teleportTo(location) {
const { longitude, latitude, heading, pitch, distance } = location;
const position = new Vector3();
const globalQuaternion = new Quaternion(); // Global rotation
const up = new Vector3(0, 1, 0);
// 1. Calculate True Position (at target lat/lon and altitude)
// Treat 'distance' as altitude in meters
const truePosition = new Geodetic(radians(longitude), radians(latitude), distance).toECEF();
// 2. Calculate Rotation using PointOfView
// We use PointOfView to get the correct orientation (looking at the target).
// We ignore the position calculated by PointOfView because it assumes an orbit/look-at constraint.
new PointOfView(distance, radians(heading), radians(pitch)).decompose(
new Geodetic(radians(longitude), radians(latitude)).toECEF(),
position, // Dummy position (ignored)
globalQuaternion,
up
);
console.log(`[Teleport] ${location.name} -> Altitude: ${distance}, TruePosLength: ${truePosition.length()}`);
// 3. Apply True Position
worldState.position.copy(truePosition);
// 4. Apply Rotation (Global -> Local)
// GlobalQ = BasisQ * LocalQ => LocalQ = BasisQ^-1 * GlobalQ
const basis = getSurfaceBasis(truePosition);
const basisInv = basis.clone().invert();
worldState.quaternion.copy(basisInv.multiply(globalQuaternion));
}
// キー入力管理 // キー入力管理
const keys = { const keys = {
w: false, w: false,
a: false, a: false,
s: false, s: false,
d: false, d: false,
q: false,
e: false,
Shift: false, Shift: false,
Space: false, Space: false,
}; };
@@ -184,25 +100,6 @@ if (typeof window !== 'undefined') {
// Scene Components (Inside Canvas) // Scene Components (Inside Canvas)
// --------------------------------------------------------- // ---------------------------------------------------------
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath('https://www.gstatic.com/draco/v1/decoders/');
function GoogleMaps3DTiles() {
const apiKey = import.meta.env.VITE_GOOGLE_MAP_API_KEY;
if (!apiKey) return null;
return (
<TilesRenderer url={`https://tile.googleapis.com/v1/3dtiles/root.json?key=${apiKey}`}>
<TilesPlugin plugin={GoogleCloudAuthPlugin} args={{ apiToken: apiKey }} />
<TilesPlugin plugin={GLTFExtensionsPlugin} dracoLoader={dracoLoader} />
<TilesPlugin plugin={TileCompressionPlugin} />
<TilesPlugin plugin={UpdateOnChangePlugin} />
<TilesPlugin plugin={TilesFadePlugin} />
</TilesRenderer>
);
}
// Canvasの内側で動作するメインシーンコンポーネント // Canvasの内側で動作するメインシーンコンポーネント
function AtmosphereScene() { function AtmosphereScene() {
const { gl } = useThree(); const { gl } = useThree();
@@ -231,55 +128,40 @@ function AtmosphereScene() {
}, []); }, []);
// 3. 時間進行と太陽移動 (Canvas内なのでuseFrameが使える) // 3. 時間進行と太陽移動 (Canvas内なのでuseFrameが使える)
//useFrame((state, delta) => {
// const currentDate = dateRef.current;
// const elapsedMs = delta * TIME_SCALE * 1000;
// currentDate.setTime(currentDate.getTime() + elapsedMs);
// 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 = 10.0;
// } else {
// sunRef.current.position.set(sunX, sunY, 0.2);
// sunRef.current.intensity = MathUtils.lerp(0.5, 3.0, sunY);
// }
// }
//});
useFrame((state, delta) => { useFrame((state, delta) => {
// 時間を進める
const currentDate = dateRef.current; const currentDate = dateRef.current;
const elapsedMs = delta * TIME_SCALE * 1000; const elapsedMs = delta * TIME_SCALE * 1000;
currentDate.setTime(currentDate.getTime() + elapsedMs); currentDate.setTime(currentDate.getTime() + elapsedMs);
// Atmosphere更新
if (atmosphereRef.current) { if (atmosphereRef.current) {
atmosphereRef.current.updateByDate(currentDate); atmosphereRef.current.updateByDate(currentDate);
const sunDirection = atmosphereRef.current.sunDirection;
if (sunRef.current && sunDirection) {
sunRef.current.position.copy(sunDirection);
sunRef.current.intensity = 3.0; // 強度は固定で、時間帯による調整はAtmosphereが担当
if (sunDirection.y < -0.1) {
sunRef.current.intensity = 0.1;
} }
// 太陽移動
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 ( return (
<> <>
{/* Camera is controlled by FollowCamera component */} {/* Camera is controlled by FollowCamera component */}
<PerspectiveCamera <PerspectiveCamera
makeDefault makeDefault
near={10} near={1}
far={10000000} far={10000000}
fov={45} fov={45}
/> />
@@ -293,7 +175,6 @@ function AtmosphereScene() {
/> />
<Atmosphere ref={atmosphereRef}> <Atmosphere ref={atmosphereRef}>
<GoogleMaps3DTiles />
<EffectComposer multisampling={0} disableNormalPass={false}> <EffectComposer multisampling={0} disableNormalPass={false}>
<Clouds disableDefaultLayers coverage={weather.coverage}> <Clouds disableDefaultLayers coverage={weather.coverage}>
{weather.layers.map((layer, index) => ( {weather.layers.map((layer, index) => (
@@ -307,7 +188,7 @@ function AtmosphereScene() {
/> />
))} ))}
</Clouds> </Clouds>
<AerialPerspective sky /> <AerialPerspective sky sunLight skyLight />
<ToneMapping mode={ToneMappingMode.AGX} /> <ToneMapping mode={ToneMappingMode.AGX} />
</EffectComposer> </EffectComposer>
</Atmosphere> </Atmosphere>
@@ -318,17 +199,9 @@ function AtmosphereScene() {
// Atmosphere側のカメラをShared Stateに同期させる // Atmosphere側のカメラをShared Stateに同期させる
function FollowCamera() { function FollowCamera() {
useFrame((state) => { useFrame((state) => {
if (!worldState.position) return; // Shared Stateの位置と回転を適用
// 1. Calculate Basis Rotation based on current position
const basis = getSurfaceBasis(worldState.position);
// 2. Apply Position
state.camera.position.copy(worldState.position); state.camera.position.copy(worldState.position);
state.camera.quaternion.copy(worldState.quaternion);
// 3. Apply Rotation: GlobalQ = BasisQ * LocalQ
// worldState.quaternion is treated as Local Quaternion here
state.camera.quaternion.copy(basis).multiply(worldState.quaternion);
}); });
return null; return null;
} }
@@ -349,7 +222,7 @@ function VrmCharacter() {
// Load all animations // Load all animations
const [vrmaFly, vrmaFlyStop, vrmaFlyIdle] = useLoader(GLTFLoader, [ const [vrmaFly, vrmaFlyStop, vrmaFlyIdle] = useLoader(GLTFLoader, [
`${BASE_URL}fly_sky.vrma`, `${BASE_URL}fly.vrma`,
`${BASE_URL}fly_stop.vrma`, `${BASE_URL}fly_stop.vrma`,
`${BASE_URL}fly_idle.vrma` `${BASE_URL}fly_idle.vrma`
], (loader) => { ], (loader) => {
@@ -489,6 +362,7 @@ function VrmCharacter() {
function CameraSync() { function CameraSync() {
const { camera } = useThree(); const { camera } = useThree();
const vec = new Vector3(); const vec = new Vector3();
const euler = new Euler(0, 0, 0, 'YXZ');
// Dynamic Zoom State // Dynamic Zoom State
const zoomOffset = useRef(0); const zoomOffset = useRef(0);
@@ -496,64 +370,34 @@ function CameraSync() {
const ZOOM_SPEED = 2.0; const ZOOM_SPEED = 2.0;
useFrame((state, delta) => { useFrame((state, delta) => {
// 1. カメラの回転をShared State (Local) に同期 // 1. カメラの回転をShared Stateに同期
worldState.quaternion.copy(camera.quaternion); worldState.quaternion.copy(camera.quaternion);
// 2. Calculate Basis Rotation // 2. WASD移動ロジック
const basis = getSurfaceBasis(worldState.position); const isMoving = keys.w || keys.s || keys.a || keys.d;
// 3. WASD移動ロジック (Local -> Global)
const isMoving = keys.w || keys.s || keys.a || keys.d || keys.q || keys.e;
const speed = worldState.speed * (keys.Shift ? 2.0 : 1.0) * delta; const speed = worldState.speed * (keys.Shift ? 2.0 : 1.0) * delta;
// Local Movement Vector // 前後 (W/S)
const moveDir = new Vector3(); if (keys.w) {
if (keys.w) moveDir.z -= 1; vec.set(0, 0, -1).applyQuaternion(camera.quaternion);
if (keys.s) moveDir.z += 1; worldState.position.addScaledVector(vec, speed);
if (keys.a) moveDir.x -= 1;
if (keys.d) moveDir.x += 1;
// Altitude Control (Global Up/Down relative to surface)
// We apply this directly to worldState.position along the up vector
const upVector = worldState.position.clone().normalize();
if (keys.e) {
worldState.position.addScaledVector(upVector, speed);
} }
if (keys.q) { if (keys.s) {
worldState.position.addScaledVector(upVector, -speed); vec.set(0, 0, 1).applyQuaternion(camera.quaternion);
worldState.position.addScaledVector(vec, speed);
} }
if (moveDir.lengthSq() > 0) { // 左右 (A/D)
moveDir.normalize(); if (keys.a) {
// Apply Camera Rotation (Local) vec.set(-1, 0, 0).applyQuaternion(camera.quaternion);
moveDir.applyQuaternion(camera.quaternion); worldState.position.addScaledVector(vec, speed);
}
// Apply Basis Rotation (Local -> Global) if (keys.d) {
moveDir.applyQuaternion(basis); vec.set(1, 0, 0).applyQuaternion(camera.quaternion);
worldState.position.addScaledVector(vec, speed);
// Apply to Global Position
worldState.position.addScaledVector(moveDir, speed);
} }
// 4. Minimum Altitude Safety Check // 3. Dynamic Zoom Logic
const currentDist = worldState.position.length();
// Calculate local ellipsoid radius
const localRadius = getEllipsoidRadius(worldState.position);
const minAltitude = localRadius + 10; // Minimum 10m above ellipsoid
// Debug Log
if (state.clock.elapsedTime % 1.0 < 0.02) {
console.log(`[CameraSync] Dist: ${currentDist.toFixed(1)}, LocalR: ${localRadius.toFixed(1)}, Alt: ${(currentDist - localRadius).toFixed(1)}`);
}
if (currentDist < minAltitude) {
// console.log(`[CameraSync] Safety Check Triggered! Pushing up to ${minAltitude}`);
worldState.position.setLength(minAltitude);
}
// 5. Dynamic Zoom Logic
const targetZoom = isMoving ? MAX_ZOOM_OFFSET : 0; const targetZoom = isMoving ? MAX_ZOOM_OFFSET : 0;
// Smoothly interpolate current zoom offset towards target // Smoothly interpolate current zoom offset towards target
const diff = targetZoom - zoomOffset.current; const diff = targetZoom - zoomOffset.current;
@@ -569,7 +413,7 @@ function CameraSync() {
function AvatarLayer() { function AvatarLayer() {
return ( return (
<Canvas gl={{ alpha: true, antialias: true }}> <Canvas gl={{ alpha: true, antialias: true }}>
<PerspectiveCamera makeDefault position={[0, 1.5, 3]} fov={40} /> <PerspectiveCamera makeDefault position={[0, 1.5, 3]} fov={30} />
<CameraSync /> <CameraSync />
<directionalLight position={[-1, 1, 1]} intensity={1.5} /> <directionalLight position={[-1, 1, 1]} intensity={1.5} />
@@ -585,52 +429,13 @@ function AvatarLayer() {
); );
} }
// ---------------------------------------------------------
// UI Components
// ---------------------------------------------------------
function LocationUI() {
return (
<div style={{
position: 'absolute',
top: '20px',
left: '20px',
zIndex: 100,
display: 'flex',
gap: '10px',
flexWrap: 'wrap'
}}>
{LOCATIONS.map((loc) => (
<button
key={loc.name}
onClick={() => teleportTo(loc)}
style={{
padding: '10px 20px',
background: 'rgba(0, 0, 0, 0.6)',
color: 'white',
border: '1px solid rgba(255, 255, 255, 0.3)',
borderRadius: '8px',
cursor: 'pointer',
fontSize: '14px',
backdropFilter: 'blur(4px)',
transition: 'background 0.2s'
}}
onMouseOver={(e) => e.currentTarget.style.background = 'rgba(0, 0, 0, 0.8)'}
onMouseOut={(e) => e.currentTarget.style.background = 'rgba(0, 0, 0, 0.6)'}
>
{loc.name}
</button>
))}
</div>
);
}
// --------------------------------------------------------- // ---------------------------------------------------------
// Main App // Main App
// --------------------------------------------------------- // ---------------------------------------------------------
function AtmosphereLayer() { function AtmosphereLayer() {
// Canvasが親となり、その中にロジックコンポーネント(AtmosphereScene)を入れる // Canvasが親となり、その中にロジックコンポーネント(AtmosphereScene)を入れる
return ( return (
<Canvas gl={{ alpha: true, antialias: true }}> <Canvas>
<AtmosphereScene /> <AtmosphereScene />
</Canvas> </Canvas>
); );
@@ -648,9 +453,6 @@ export default function App() {
return ( return (
<div style={{ position: 'relative', width: '100vw', height: '100vh', background: '#000' }}> <div style={{ position: 'relative', width: '100vw', height: '100vh', background: '#000' }}>
{/* UI Layer */}
<LocationUI />
{/* Layer 0: Atmosphere */} {/* Layer 0: Atmosphere */}
<div style={{ ...layerStyle, zIndex: 0 }}> <div style={{ ...layerStyle, zIndex: 0 }}>
<AtmosphereLayer /> <AtmosphereLayer />

5
atmosphere/vite.config.ts
View File

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

1
min-react/public/CNAME
View File

@@ -1 +0,0 @@
vrm.syui.ai

BIN
min-react/public/ai.vrm Normal file
View File

Binary file not shown.

BIN
min-react/public/idle.vrma Normal file
View File

Binary file not shown.

2
planet/package.json
View File

@@ -19,7 +19,7 @@
"@types/three": "^0.167.1", "@types/three": "^0.167.1",
"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",

2
theatre/package.json
View File

@@ -27,6 +27,6 @@
"globals": "^15.9.0", "globals": "^15.9.0",
"typescript": "^5.5.3", "typescript": "^5.5.3",
"typescript-eslint": "^8.3.0", "typescript-eslint": "^8.3.0",
"vite": "^7.2.7" "vite": "^5.4.2"
} }
} }