fix

README.md

@@ -16,21 +16,8 @@ $ 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
@@ -46,5 +33,3 @@ $ 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.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",
+    "@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",
     "@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.112",
-    "@types/react": "^18.3.10",
+    "@types/node": "^16.18.104",
+    "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
-    "@types/three": "^0.167.2",
+    "@types/three": "^0.167.1",
     "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.1.0",
-		"@pixiv/three-vrm-animation": "^3.1.0",
-		"@pixiv/three-vrm-springbone": "^3.1.0",
+		"@pixiv/three-vrm": "^3.0.0",
+		"@pixiv/three-vrm-animation": "^3.0.0",
+		"@pixiv/three-vrm-springbone": "^3.0.0",
 		"postprocessing": "^6.35.2",
 		"three": "^0.167.1"
 	}

planet/package.json

@@ -3,9 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@pixiv/three-vrm": "^3.1.0",
-    "@pixiv/three-vrm-animation": "^3.1.0",
-    "@pixiv/three-vrm-springbone": "^3.1.0",
+    "@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",

planet/src/pages/vrm_model.tsx

@@ -5,7 +5,6 @@ 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'
@@ -22,7 +21,6 @@ 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();
@@ -31,8 +29,6 @@ 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,31 +45,16 @@ const VRMModel: React.FC<ModelProps> = ({ url = "./models/ai.vrm", url_anim="./m
 				}
 			});
 		});
-	}, [url, url_anim, position, scale, rotation]);
+	}, [url, url_anim, position, scale]);
 
 	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
@@ -92,42 +73,43 @@ 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;
-	nodes.Object_2.geometry.center()
-	if (g === 'sun'){
-		sphereGeometry = new SphereGeometry(1, 332, 332);
-		nodes.Object_2.geometry = sphereGeometry;
-		model_scale = 1;
-	} else if (g === 'moon'){
-		sphereGeometry = new SphereGeometry(1, 132, 132);
-		nodes.Object_2.geometry = sphereGeometry;
-		model_color = 1;
-		model_scale = 0.01;
-		position_custom = [-0.5,-1,0];
-		anim_custom = "./models/fly.vrma";
-		model_custom = "./models/ai_default.vrm";
-	} else if (g === 'earth'){
-		sphereGeometry = new SphereGeometry(1, 232, 232);
-		nodes.Object_2.geometry = sphereGeometry;
-		model_color = 0.5;
-		model_scale = 0.3;
-		position_custom = [-1,-1,0];
-		anim_custom = "./models/fly.vrma";
-		model_custom = "./models/ai_default.vrm";
-	} else if (g === 'neutron') {
-		model_color = 1;
-	}
 	const [positions, colors] = useMemo(() => {
+		nodes.Object_2.geometry.center()
+		if (g === 'sun'){
+			sphereGeometry = new SphereGeometry(1, 332, 332);
+			nodes.Object_2.geometry = sphereGeometry;
+			model_scale = 1;
+		} else if (g === 'moon'){
+			sphereGeometry = new SphereGeometry(1, 132, 132);
+			nodes.Object_2.geometry = sphereGeometry;
+			model_color = 1;
+			model_scale = 0.01;
+			position_custom = [-0.5,-1,0];
+			anim_custom = "./models/fly.vrma";
+			model_custom = "./models/ai_default.vrm";
+		} else if (g === 'earth'){
+			sphereGeometry = new SphereGeometry(1, 232, 232);
+			nodes.Object_2.geometry = sphereGeometry;
+			model_color = 0.5;
+			model_scale = 0.3;
+			position_custom = [-1,-1,0];
+			anim_custom = "./models/fly.vrma";
+			model_custom = "./models/ai_default.vrm";
+		} else if (g === 'neutron') {
+			model_color = 1;
+		}
 		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]
@@ -135,6 +117,7 @@ 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,
@@ -149,7 +132,7 @@ export function Galaxy(props: JSX.IntrinsicElements['group']) {
 		}
 
 		return [positions, colors]
-	}, [nodes, model_color])
+	}, [nodes])
 
 	useFrame(({ clock }) => {
 		ref.current.rotation.y = clock.getElapsedTime() / 2
@@ -158,10 +141,7 @@ 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} 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]}/>}
-
+		<VRMModel url={model_custom} url_anim={anim_custom} position={position_custom} scale={1}/>
 		<pointLight
 		position={[0, 0, 0]}
 		ref={galaxyCenterLightRef}

src/index.ts

@@ -10,7 +10,6 @@ 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;
@@ -108,7 +107,7 @@ window.addEventListener("DOMContentLoaded", () => {
 		return new VRMAnimationLoaderPlugin(parser);
 	});
 
-	load(default_model);
+	load("/vrma/model/ai.vrm");
 	load("/vrma/anime/fly_c.vrma");	
 
 	let item = null;

tsconfig.json

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