From 0b6ba63320e7b3d041cc5b6ab0b9eca2f0329389 Mon Sep 17 00:00:00 2001
From: syui <syui@syui.ai>
Date: Sat, 3 Aug 2024 15:41:16 +0900
Subject: [PATCH] fix

---
 galaxy-react/package.json         |   4 +
 galaxy-react/public/index.html    |   6 +-
 galaxy-react/src/App.css          |   3 +
 galaxy-react/src/index.css        |  14 +-
 galaxy-react/src/pages/galaxy.tsx | 291 +++++++++++++++++++++++++-----
 5 files changed, 260 insertions(+), 58 deletions(-)
diff --git a/galaxy-react/package.json b/galaxy-react/package.json
index 653251f..749e5a4 100644
--- a/galaxy-react/package.json
+++ b/galaxy-react/package.json
@@ -3,6 +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-springbone": "^3.0.0",
     "@react-three/drei": "^9.109.2",
     "@react-three/fiber": "^8.16.8",
     "@react-three/postprocessing": "^2.16.2",
@@ -16,6 +19,7 @@
     "@types/three": "^0.167.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-router-dom": "^6.26.0",
     "react-scripts": "5.0.1",
     "three": "^0.167.1",
     "three-stdlib": "^2.30.5",
diff --git a/galaxy-react/public/index.html b/galaxy-react/public/index.html
index aa069f2..5633250 100644
--- a/galaxy-react/public/index.html
+++ b/galaxy-react/public/index.html
@@ -2,19 +2,19 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href=".%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
       content="Web site created using create-react-app"
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="apple-touch-icon" href=".%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="manifest" href=".%PUBLIC_URL%/manifest.json" />
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
diff --git a/galaxy-react/src/App.css b/galaxy-react/src/App.css
index 74b5e05..a0aab34 100644
--- a/galaxy-react/src/App.css
+++ b/galaxy-react/src/App.css
@@ -1,5 +1,6 @@
 .App {
   text-align: center;
+
 }
 
 .App-logo {
@@ -36,3 +37,5 @@
     transform: rotate(360deg);
   }
 }
+
+
diff --git a/galaxy-react/src/index.css b/galaxy-react/src/index.css
index e8cd35b..3d3147a 100644
--- a/galaxy-react/src/index.css
+++ b/galaxy-react/src/index.css
@@ -3,14 +3,10 @@ html {
 }
 
 body {
+	background-color: #343434;
 	background-color: #000;
-  margin: 0;
-  height: 100%;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+	margin: 0;
+	height: 100%;
 }
 
 div#root{
@@ -18,6 +14,6 @@ div#root{
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
+	font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+	monospace;
 }
diff --git a/galaxy-react/src/pages/galaxy.tsx b/galaxy-react/src/pages/galaxy.tsx
index 167234e..87e675f 100644
--- a/galaxy-react/src/pages/galaxy.tsx
+++ b/galaxy-react/src/pages/galaxy.tsx
@@ -1,9 +1,164 @@
 import * as THREE from 'three'
 import { Points, useGLTF, OrbitControls, ScrollControls, Scroll } from '@react-three/drei'
 import { GLTF } from 'three-stdlib'
-import { useFrame, Canvas } from '@react-three/fiber'
-import { useMemo, useRef } from 'react'
+import { useFrame, Canvas, useThree } from '@react-three/fiber'
+import { useMemo, useRef, Suspense, useState, useEffect } from 'react'
 import { EffectComposer, SelectiveBloom } from '@react-three/postprocessing'
+import { useLoader } from '@react-three/fiber'
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
+import { CubeTextureLoader } from 'three'
+import { useLocation } from 'react-router-dom';
+
+// vrm
+import { VRMLoaderPlugin, VRM, VRMUtils,VRMSpringBoneLoaderPlugin } from "@pixiv/three-vrm";
+import { VRMAnimationLoaderPlugin, VRMAnimation, createVRMAnimationClip } from "@pixiv/three-vrm-animation";
+import { VRMSpringBoneManager, VRMSpringBoneJoint, VRMSpringBoneJointHelper } from '@pixiv/three-vrm-springbone';
+
+// circle(sphere)
+import { SphereGeometry, BoxGeometry } from 'three';
+import { AnimationMixer, Clock } from 'three';
+
+interface ModelProps {
+  url: string
+  position?: [number, number, number]
+  scale?: number | [number, number, number]
+}
+interface ModelPropsVrm {
+  url: string
+  position?: [number, number, number]
+  scale?: number 
+}
+interface ModelPropsVrmModel {
+  url: string
+  vrmaurl: string
+}
+
+function QueryParamExample() {
+  const location = useLocation();
+  const searchParams = new URLSearchParams(location.search);
+  const query = searchParams.get('q');
+
+  return <div>Search query: {query}</div>;
+}
+
+const Model: React.FC<ModelProps> = ({ url, position = [0, 0, 0], scale = 1 }) => {
+  const gltf = useLoader(GLTFLoader, url)
+  return (
+			<group>
+			<primitive object={gltf.scene} position={position} scale={scale} />
+			</group>
+		)
+}
+
+const Vrm: React.FC<ModelPropsVrm> = ({ url, position = [0, 0, 0], scale  = 1}) => {
+	const gltf = useLoader(GLTFLoader, url, (loader) => {
+		loader.register((parser) => new VRMLoaderPlugin(parser));
+		loader.register((parser) => new VRMSpringBoneLoaderPlugin(parser));
+	});
+	const [vrm, setVrm] = useState<VRM | null>(null);
+	useEffect(() => {
+		if (gltf) {
+			const vrmModel = gltf.userData.vrm as VRM;
+			VRMUtils.removeUnnecessaryJoints(vrmModel.scene);
+			setVrm(vrmModel);
+			if (vrmModel) {
+				//vrmModel.scene.rotation.y = Math.PI;
+				vrmModel.scene.rotation.y = 0;
+				vrmModel.scene.rotation.x = 5;
+				vrmModel.scene.rotation.z = 0;
+				vrmModel.scene.position.set(...position);
+				vrmModel.scene.scale.setScalar(scale);
+			}
+			// Spring Boneの設定を調整
+			if (vrmModel.springBoneManager) {
+				adjustSpringBones(vrmModel.springBoneManager);
+			}
+		}
+	}, [gltf, position, scale]);
+	useFrame((state, delta) => {
+		if (vrm) {
+			vrm.update(delta);
+		}
+	});
+
+	return gltf ? <primitive object={gltf.scene} /> : null;
+};
+
+function adjustSpringBones(springBoneManager: any) {
+  console.log('Spring Bone Manager:', springBoneManager);
+  if (Array.isArray(springBoneManager.springBoneGroupList)) {
+    springBoneManager.springBoneGroupList.forEach((group: any) => {
+      if (Array.isArray(group.joints)) {
+        group.joints.forEach(adjustJoint);
+      } else if (Array.isArray(group.bones)) {
+        group.bones.forEach(adjustJoint);
+      }
+    });
+  }
+  else if (Array.isArray(springBoneManager.springs)) {
+    springBoneManager.springs.forEach(adjustJoint);
+  }
+}
+
+function adjustJoint(joint: any) {
+  if (joint) {
+    joint.stiffnessForce = joint.stiffness = 0.8;
+    joint.gravityPower = 0.1;
+    joint.dragForce = 0.5;
+    joint.hitRadius = 0.02;
+    // joint.colliders = [...];
+    console.log('Adjusted joint:', joint);
+  }
+}
+
+export default Vrm;
+
+const VRMModel: React.FC<ModelPropsVrmModel> = ({ url, vrmaurl }) => {
+  const gltf = useLoader(GLTFLoader, url, (loader) => {
+    loader.register((parser) => new VRMLoaderPlugin(parser));
+  });
+  
+  const vrma = useLoader(GLTFLoader, vrmaurl, (loader) => {
+    loader.register((parser) => new VRMAnimationLoaderPlugin(parser));
+  });
+
+  const [vrm, setVrm] = useState<VRM | null>(null);
+  const [mixer, setMixer] = useState<AnimationMixer | null>(null);
+  const clock = useRef(new Clock());
+
+  useEffect(() => {
+    if (gltf && vrma) {
+      const vrmModel = gltf.userData.vrm as VRM;
+      VRMUtils.removeUnnecessaryJoints(vrmModel.scene);
+      setVrm(vrmModel);
+      const vrmAnimation = vrma.userData.vrmAnimation as VRMAnimation;
+					 const mixer = new AnimationMixer(vrmModel.scene);
+					 //const mixer = new THREE.AnimationMixer(vrmModel.scene);
+					 const clip = createVRMAnimationClip(vrmAnimation, vrmModel);
+      const action = mixer.clipAction(clip);
+      action.play();
+      setMixer(mixer);
+    }
+  }, [gltf, vrma]);
+  useFrame((state, delta) => {
+    if (mixer) {
+      mixer.update(delta);
+    }
+    if (vrm) {
+      vrm.update(delta);
+    }
+  });
+  return gltf ? <primitive object={gltf.scene} /> : null;
+};
+
+export function Skybox() {
+  const { scene } = useThree()
+  const loader = new CubeTextureLoader()
+  const texture = loader.load([
+  ])
+  scene.background = texture
+  return null
+}
 
 type GLTFResult = GLTF & {
   nodes: {
@@ -15,63 +170,91 @@ type GLTFResult = GLTF & {
 }
 
 export function Galaxy(props: JSX.IntrinsicElements['group']) {
-  const ref = useRef<THREE.Group>(null!)
-  const galaxyCenterLightRef = useRef<THREE.PointLight>(null!)
-  const { nodes } = useGLTF('./models/galaxy.glb') as GLTFResult
-  const [positions, colors] = useMemo(() => {
-    nodes.Object_2.geometry.center()
+	const ref = useRef<THREE.Group>(null!)
+	const galaxyCenterLightRef = useRef<THREE.PointLight>(null!)
+	const searchParams = new URLSearchParams(window.location.search);
+	var g = searchParams.get('g') ?? 'galaxy';
+	var model_path_default = "./models/galaxy.glb"
+	var model_path = "./models/" + g + ".glb"
+	var model_scale = 0.05;
+
+	const { nodes } = useGLTF(model_path_default) as GLTFResult
+	const [positions, colors] = useMemo(() => {
+			nodes.Object_2.geometry.center()
     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]
-      const y = positions[i + 1]
-      const z = positions[i + 2]
-      const distanceToCenter = getDistanceToCenter(x, y, z)
-      const normalizedDistanceToCenter = distanceToCenter / 100
-
-      // 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,
-        0.6
-      )
-      color.setRGB(
-        Math.cos(normalizedDistanceToCenter),
-        THREE.MathUtils.randFloat(0, 0.8),
-        Math.sin(normalizedDistanceToCenter)
-      )
-      color.toArray(colors, i)
-    }
+		var model_color = 100;
+		if (g === 'sun'){
+			const sphereGeometry = new SphereGeometry(1, 232, 232);
+			nodes.Object_2.geometry = sphereGeometry;
+			model_scale = 0.3;
+		} else if (g === 'moon'){
+			const sphereGeometry = new SphereGeometry(1, 132, 132);
+			nodes.Object_2.geometry = sphereGeometry;
+			model_color = 1;
+			model_scale = 0.1;
+		} else if (g === 'asteroid') {
+			const sphereGeometry = new SphereGeometry(1, 32, 32);
+			nodes.Object_2.geometry = sphereGeometry;
+			model_color = 1;
+			model_scale = 0.1;
+		} else if (g === 'neutron') {
+			model_color = 1;
+		}
+			// 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]
+				const y = positions[i + 1]
+				const z = positions[i + 2]
+				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,
+					0.6
+				)
+				color.setRGB(
+					Math.cos(normalizedDistanceToCenter),
+					THREE.MathUtils.randFloat(0, 0.8),
+					Math.sin(normalizedDistanceToCenter)
+				)
+				color.toArray(colors, i)
+			}
 
     return [positions, colors]
   }, [nodes])
 
-
   // slowly rotate the galaxy
+  
   useFrame(({ clock }) => {
-    ref.current.rotation.z = clock.getElapsedTime() / 2
     // zoom in and out
-    ref.current.scale.setScalar(Math.sin(clock.getElapsedTime() / 2) + 1.2)
+    ref.current.rotation.z = clock.getElapsedTime() / 2
+    //ref.current.scale.setScalar(0.3)
+			 ref.current.scale.setScalar(Math.sin(clock.getElapsedTime() / 10) + 1.2)
   })
 
-  //  make particles glow
+	//  make particles glow
+	// <VRMModel url="./models/ai.vrm" vrmaurl="./models/fly_a.vrma" />
+
+	var m = searchParams.get('m') ?? 't';
+	 model_path = "./models/" + m + ".vrm";
 
   return (
-    <group {...props} dispose={null} ref={ref}>
-      <pointLight
+   <group {...props} dispose={null} ref={ref}>
+
+			<Vrm url={model_path} position={[2, -4, 8]} scale={10} />
+			<pointLight
         position={[0, 0, 0]}
         ref={galaxyCenterLightRef}
         intensity={0.5}
       />
-      <Points scale={0.05} positions={positions} colors={colors}>
+      <Points scale={model_scale} positions={positions} colors={colors}>
         <pointsMaterial
           //map={starTexture}
           transparent
@@ -91,22 +274,38 @@ export function Galaxy(props: JSX.IntrinsicElements['group']) {
         />
       </EffectComposer>
 		    <ambientLight intensity={1} />
-    </group>
+			</group>
   )
 }
 
-useGLTF.preload('./models/galaxy.glb')
-
 export const ThreeFiberGalaxy = () => {
 	return (
 		<Canvas camera={{ position: [0, 12, 0], fov: 75 }}>
-		<OrbitControls enableZoom={true} enablePan={true} enableRotate={true} zoomSpeed={2} panSpeed={2} rotateSpeed={0.5} />
+		<OrbitControls
+		//minAzimuthAngle={-Math.PI / 4}
+			//maxAzimuthAngle={Math.PI / 4}
+			//minPolarAngle={Math.PI / 1}
+			maxPolarAngle={Math.PI - Math.PI / 1}
+			minDistance={11} maxDistance={15}
+			enableZoom={true} enablePan={false} enableRotate={true}
+			zoomSpeed={0.5}
+			panSpeed={0.5}
+			rotateSpeed={0.5} />	
 		<pointLight position={[10, 10, 10]} />
-		<ScrollControls pages={5}>
-		<Scroll>
+		<Suspense fallback={null}>
 		<Galaxy position={[0, 9, 0]} />
-		</Scroll>
-		</ScrollControls>
+		</Suspense>
+		<Skybox />
 		</Canvas>
 	)
 }
+
+useGLTF.preload('./models/galaxy.glb')
+//useGLTF.preload('./models/ai.glb')
+//<color attach="background" args={['#fff']} />
+//<Model url="./models/ai.vrm" position={[0, 0, 0]} scale={1} />
+//<Vrm url="./models/ai.vrm" position={[0, 0, 0]} scale={1} />
+//<ScrollControls pages={2}>
+//<Scroll>
+//</Scroll>
+//</ScrollControls>
