ai/vrm
1
0
Fork 0
Code Activity

add min2

Browse Source
This commit is contained in:
syui
2025-11-20 18:09:25 +09:00
parent 8faa934a58
commit 8dddebec16
9 changed files with 116 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
min-react-2/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
min-react-2/package.json Normal file
View File

@@ -0,0 +1,26 @@
{
"name": "min-react-vrm",
"version": "1.0.0",
"description": "Minimal VRM Animation Player",
"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": "^19.0.0",
"react-dom": "^19.0.0",
"three": "^0.181.2"
},
"devDependencies": {
"@types/react": "^19.0.0",
"@types/react-dom": "^19.0.0",
"@vitejs/plugin-react": "^4.3.4",
"vite": "^6.0.1"
}
}

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

Binary file not shown.

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

Binary file not shown.

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

Binary file not shown.

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

Binary file not shown.

60
min-react-2/src/App.jsx Normal file
View File

@@ -0,0 +1,60 @@
import React, { useEffect, useRef } from 'react';
import { Canvas, useFrame, useLoader } 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, GridHelper, AxesHelper } from 'three';
import { OrbitControls } from '@react-three/drei';
const VRM_URL = '/ai.vrm';
const VRMA_URL = '/idle.vrma';
function Avatar() {
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 && vrma.userData.vrmAnimations.length > 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) => {
if (mixerRef.current) mixerRef.current.update(delta);
if (vrmRef.current) vrmRef.current.update(delta);
});
return <primitive object={gltf.scene} />;
}
export default function App() {
return (
<div style={{ width: '100vw', height: '100vh' }}>
<Canvas camera={{ position: [0, 1.5, 3] }}>
<color attach="background" args={['#202020']} />
<directionalLight position={[1, 1, 1]} intensity={1.5} />
<ambientLight intensity={0.5} />
<primitive object={new GridHelper(10, 10)} />
<primitive object={new AxesHelper(1)} />
<React.Suspense fallback={null}>
<Avatar />
</React.Suspense>
<OrbitControls target={[0, 1, 0]} />
</Canvas>
</div>
);
}

9
min-react-2/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>,
)

6
min-react-2/vite.config.ts Normal file
View File

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