fix

README.md

@@ -16,8 +16,21 @@ $ yarn dev
 $ yarn build
 ```
 
+## planet
+
+- deploy : [https://card.syui.ai/planet?g=sun](https://card.syui.ai/planet?g=sun)
+- ref : [https://git.syui.ai/ai/star](https://git.syui.ai/ai/star/src/branch/main/galaxy-react)
+
+```
+$ cd planet
+$ npm i
+$ npm run start
+```
+
 ## min-react
 
+three-vrm v3 + vrm(unity + vrm v1.0) + anim(vrma)
+
 ```
 $ cd min-react
 $ npm i
@@ -33,3 +46,5 @@ $ cd min-ts
 $ yarn install
 $ yarn dev
 ```
+
+

min-react/package.json

@@ -3,19 +3,19 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@pixiv/three-vrm": "^3.0.0",
-    "@pixiv/three-vrm-animation": "^3.0.0",
-    "@react-three/drei": "^9.109.2",
-    "@react-three/fiber": "^8.16.8",
-    "@react-three/postprocessing": "^2.16.2",
+    "@pixiv/three-vrm": "^3.1.1",
+    "@pixiv/three-vrm-animation": "^3.1.1",
+    "@react-three/drei": "^9.114.0",
+    "@react-three/fiber": "^8.17.9",
+    "@react-three/postprocessing": "^2.16.3",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^27.5.2",
-    "@types/node": "^16.18.104",
-    "@types/react": "^18.3.3",
+    "@types/node": "^16.18.112",
+    "@types/react": "^18.3.10",
     "@types/react-dom": "^18.3.0",
-    "@types/three": "^0.167.1",
+    "@types/three": "^0.167.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-scripts": "5.0.1",

package.json

@@ -14,9 +14,9 @@
 		"webpack-dev-server": "^5.0.3"
 	},
 	"dependencies": {
-		"@pixiv/three-vrm": "^3.0.0",
-		"@pixiv/three-vrm-animation": "^3.0.0",
-		"@pixiv/three-vrm-springbone": "^3.0.0",
+		"@pixiv/three-vrm": "^3.1.0",
+		"@pixiv/three-vrm-animation": "^3.1.0",
+		"@pixiv/three-vrm-springbone": "^3.1.0",
 		"postprocessing": "^6.35.2",
 		"three": "^0.167.1"
 	}

planet/package.json

@@ -3,8 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@pixiv/three-vrm": "^3.0.0",
-    "@pixiv/three-vrm-animation": "^3.0.0",
+    "@pixiv/three-vrm": "^3.1.0",
+    "@pixiv/three-vrm-animation": "^3.1.0",
+    "@pixiv/three-vrm-springbone": "^3.1.0",
     "@react-three/drei": "^9.109.2",
     "@react-three/fiber": "^8.16.8",
     "@react-three/postprocessing": "^2.16.2",

planet/src/pages/vrm_model.tsx

@@ -5,6 +5,7 @@ import { useFrame, Canvas } from '@react-three/fiber';
 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
 import { VRM, VRMUtils, VRMLoaderPlugin } from '@pixiv/three-vrm';
 import { VRMAnimationLoaderPlugin, VRMAnimation, createVRMAnimationClip } from "@pixiv/three-vrm-animation";
+import { VRMSpringBoneManager } from '@pixiv/three-vrm-springbone';
 import { EffectComposer, SelectiveBloom } from '@react-three/postprocessing'
 import { SphereGeometry } from 'three';
 import { GLTF } from 'three-stdlib'
@@ -21,6 +22,7 @@ const VRMModel: React.FC<ModelProps> = ({ url = "./models/ai.vrm", url_anim="./m
 
 	const [vrm, setVrm] = useState<VRM | null>(null);
 	const mixerRef = useRef<THREE.AnimationMixer | null>(null);
+	const springBoneManagerRef = useRef<VRMSpringBoneManager | null>(null);
 
 	useEffect(() => {
 		const loader = new GLTFLoader();
@@ -29,6 +31,8 @@ const VRMModel: React.FC<ModelProps> = ({ url = "./models/ai.vrm", url_anim="./m
 		loader.load(url, (gltf) => {
 			const vrmModel = gltf.userData.vrm as VRM;
 			VRMUtils.removeUnnecessaryJoints(vrmModel.scene);
+			springBoneManagerRef.current = vrmModel.springBoneManager as VRMSpringBoneManager;
+			springBoneManagerRef.current?.reset();
 			setVrm(vrmModel);
 			if (vrmModel) {
 				vrmModel.scene.rotation.set(...rotation);
@@ -49,6 +53,7 @@ const VRMModel: React.FC<ModelProps> = ({ url = "./models/ai.vrm", url_anim="./m
 
 	useFrame((state, delta) => {
 		if (mixerRef.current) mixerRef.current.update(delta);
+		if (springBoneManagerRef.current) springBoneManagerRef.current.update(delta);
 		if (vrm) vrm.update(delta);
 	});
 
@@ -62,7 +67,7 @@ interface ModelGlbProps {
 	scale?: number 
 }
 
-const GlbModel: React.FC<ModelGlbProps> = ({ url = "./models/solar_system_animation.glb", position = [0, 0, 0], scale  = 1, rotation = [0, 0, 0] }) => {
+const GlbModel: React.FC<ModelGlbProps> = ({ url = "./models/solar_system.glb", position = [0, 0, 0], scale  = 1, rotation = [0, 0, 0] }) => {
 	const { scene } = useGLTF(url)
 	scene.scale.setScalar(scale);
 	scene.position.set(...position);
@@ -155,7 +160,7 @@ export function Galaxy(props: JSX.IntrinsicElements['group']) {
 		<group {...props} dispose={null} ref={ref}>
 		<VRMModel url={model_custom} url_anim={anim_custom} position={position_custom} scale={1} rotation={rotation_custom} />
 		{g === 'sun' && <GlbModel url="./models/solar-system.glb" scale={10} />}
-		{g === 'galaxy' && <GlbModel url="./models/solar-system.glb" scale={1} position={[0,0.5,2]}/>}
+		{g === 'galaxy' && <GlbModel url="./models/solar-system.glb" scale={0.5} position={[0,0.5,2]}/>}
 
 		<pointLight
 		position={[0, 0, 0]}

src/index.ts

@@ -10,6 +10,7 @@ import { BloomEffect, EffectComposer, EffectPass, RenderPass } from "postprocess
 
 window.addEventListener("DOMContentLoaded", () => {
 
+	let default_model = "/vrma/model/ai.vrm"
 	// vrma
 	let motion_enable = false;
 	let head = null;
@@ -107,7 +108,7 @@ window.addEventListener("DOMContentLoaded", () => {
 		return new VRMAnimationLoaderPlugin(parser);
 	});
 
-	load("/vrma/model/ai.vrm");
+	load(default_model);
 	load("/vrma/anime/fly_c.vrma");	
 
 	let item = null;

tsconfig.json

@@ -1,7 +1,11 @@
 {
-  "compilerOptions": {
-    "target": "es2016",
-    "module": "commonjs",
-    "skipLibCheck": true
-  }
+	"compilerOptions": {
+		"target": "es2016",
+		"module": "commonjs",
+		"skipLibCheck": true
+	},
+	"exclude": [
+		"min-*",
+		"planet"
+	]
 }