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": "^3.1.1",
-    "@pixiv/three-vrm-animation": "^3.0.0",
+    "@pixiv/three-vrm-animation": "^3.1.1",
-    "@react-three/drei": "^9.109.2",
+    "@react-three/drei": "^9.114.0",
-    "@react-three/fiber": "^8.16.8",
+    "@react-three/fiber": "^8.17.9",
-    "@react-three/postprocessing": "^2.16.2",
+    "@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/node": "^16.18.112",
-    "@types/react": "^18.3.3",
+    "@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": "^3.1.0",
-		"@pixiv/three-vrm-animation": "^3.0.0",
+		"@pixiv/three-vrm-animation": "^3.1.0",
-		"@pixiv/three-vrm-springbone": "^3.0.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": "^3.1.0",
-    "@pixiv/three-vrm-animation": "^3.0.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);
@@ -45,16 +49,31 @@ const VRMModel: React.FC<ModelProps> = ({ url = "./models/ai.vrm", url_anim="./m
 				}
 			});
 		});
-	}, [url, url_anim, position, scale]);
+	}, [url, url_anim, position, scale, rotation]);
 
 	useFrame((state, delta) => {
 		if (mixerRef.current) mixerRef.current.update(delta);
+		if (springBoneManagerRef.current) springBoneManagerRef.current.update(delta);
 		if (vrm) vrm.update(delta);
 	});
 
 	return vrm ? <primitive object={vrm.scene} /> : null;
 };
 
+interface ModelGlbProps {
+	url: string
+	position?: [number, number, number]
+	rotation?: [number, number, number]
+	scale?: number 
+}
+
+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);
+	return <primitive object={scene} />
+}
+
 type GLTFResult = GLTF & {
 	nodes: {
 		Object_2: THREE.Mesh
@@ -73,11 +92,11 @@ export function Galaxy(props: JSX.IntrinsicElements['group']) {
 	var model_custom = "./models/ai.vrm"
 	var model_scale = 0.01;
 	var position_custom = [-0.2, -0.8, -0.3] as [number, number, number];
+	var rotation_custom = [0, 1.5, 0] as [number, number, number];
 	var sphereGeometry = new SphereGeometry(1, 332, 332);
 	var anim_custom = "./models/emote.vrma";
 	const { nodes } = useGLTF(model_galaxy) as GLTFResult
 	var model_color = 100;
-	const [positions, colors] = useMemo(() => {
 	nodes.Object_2.geometry.center()
 	if (g === 'sun'){
 		sphereGeometry = new SphereGeometry(1, 332, 332);
@@ -102,14 +121,13 @@ export function Galaxy(props: JSX.IntrinsicElements['group']) {
 	} else if (g === 'neutron') {
 		model_color = 1;
 	}
+	const [positions, colors] = useMemo(() => {
 		const positions = new Float32Array(
 			nodes.Object_2.geometry.attributes.position.array.buffer
 		)
 		const colors = new Float32Array(positions.length)
 		const getDistanceToCenter = (x: number, y: number, z: number) =>
 			Math.sqrt(x * x + y * y + z * z)
-
-		// make colors closer to 0,0,0 be more reddish and colors further away be more blueish
 		const color = new THREE.Color()
 		for (let i = 0; i < positions.length; i += 3) {
 			const x = positions[i]
@@ -117,7 +135,6 @@ export function Galaxy(props: JSX.IntrinsicElements['group']) {
 			const z = positions[i + 1]
 			const distanceToCenter = getDistanceToCenter(x, y, z)
 			const normalizedDistanceToCenter = distanceToCenter / model_color
-			// make colors closer to 0,0,0 be more reddish and colors further away be more blueish (do not use hsl)
 			color.setHSL(
 				(0.15 * (0.21 + Math.cos(distanceToCenter * 0.02))) / 2,
 				0.75,
@@ -132,7 +149,7 @@ export function Galaxy(props: JSX.IntrinsicElements['group']) {
 		}
 
 		return [positions, colors]
-	}, [nodes])
+	}, [nodes, model_color])
 
 	useFrame(({ clock }) => {
 		ref.current.rotation.y = clock.getElapsedTime() / 2
@@ -141,7 +158,10 @@ export function Galaxy(props: JSX.IntrinsicElements['group']) {
 
 	return (
 		<group {...props} dispose={null} ref={ref}>
-		<VRMModel url={model_custom} url_anim={anim_custom} position={position_custom} scale={1}/>
+		<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={0.5} position={[0,0.5,2]}/>}
+
 		<pointLight
 		position={[0, 0, 0]}
 		ref={galaxyCenterLightRef}

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

@@ -3,5 +3,9 @@
 		"target": "es2016",
 		"module": "commonjs",
 		"skipLibCheck": true
-  }
+	},
+	"exclude": [
+		"min-*",
+		"planet"
+	]
 }