fix

galaxy-react/package.json

@@ -5,6 +5,7 @@
   "dependencies": {
     "@pixiv/three-vrm": "^3.0.0",
     "@pixiv/three-vrm-animation": "^3.0.0",
+    "@pixiv/three-vrm-materials-mtoon": "^3.0.0",
     "@pixiv/three-vrm-springbone": "^3.0.0",
     "@react-three/drei": "^9.109.2",
     "@react-three/fiber": "^8.16.8",

galaxy-react/src/index.css

@@ -3,7 +3,7 @@ html {
 }
 
 body {
-	background-color: #343434;
+	background-color: #fff;
 	background-color: #000;
 	margin: 0;
 	height: 100%;

galaxy-react/src/pages/galaxy.tsx

@@ -1,5 +1,5 @@
 import * as THREE from 'three'
-import { Points, useGLTF, OrbitControls, ScrollControls, Scroll } from '@react-three/drei'
+import { Points, useGLTF, OrbitControls } from '@react-three/drei'
 import { GLTF } from 'three-stdlib'
 import { useFrame, Canvas, useThree } from '@react-three/fiber'
 import { useMemo, useRef, Suspense, useState, useEffect } from 'react'
@@ -7,50 +7,17 @@ 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';
+import { SphereGeometry } from 'three';
-
-// 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));
@@ -69,10 +36,7 @@ const Vrm: React.FC<ModelPropsVrm> = ({ url, position = [0, 0, 0], scale  = 1})
 				vrmModel.scene.position.set(...position);
 				vrmModel.scene.scale.setScalar(scale);
 			}
-			// Spring Boneの設定を調整
+
-			if (vrmModel.springBoneManager) {
-				adjustSpringBones(vrmModel.springBoneManager);
-			}
 		}
 	}, [gltf, position, scale]);
 	useFrame((state, delta) => {
@@ -84,82 +48,8 @@ const Vrm: React.FC<ModelPropsVrm> = ({ url, position = [0, 0, 0], scale  = 1})
 	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: {
     Object_2: THREE.Mesh
@@ -251,7 +141,6 @@ export function Galaxy(props: JSX.IntrinsicElements['group']) {
 
   return (
    <group {...props} dispose={null} ref={ref}>
-
 			<Vrm url={model_path} position={[2, -4, 8]} scale={10} />
 			<pointLight
         position={[0, 0, 0]}
@@ -284,7 +173,28 @@ export function Galaxy(props: JSX.IntrinsicElements['group']) {
 
 export const ThreeFiberGalaxy = () => {
 	return (
-		<Canvas camera={{ position: [0, 12, 0], fov: 75 }}>
+		<Canvas camera={{ position: [0, 12, 0], fov: 75 }}
+		shadows
+		gl={{
+			//toneMapping: THREE.ACESFilmicToneMapping,
+			//toneMapping: THREE.ReinhardToneMapping,
+			toneMapping: THREE.NeutralToneMapping,
+				toneMappingExposure: 1.5,
+				alpha: true,
+				powerPreference: "high-performance",
+				antialias: true,
+				//stencil: false,
+				//depth: false
+		}}
+		>
+		<ambientLight intensity={1} />
+		<pointLight position={[10, 10, 10]} />
+		<directionalLight 
+		color="white" 
+		castShadow 
+		position={[0, 10, 0]} 
+		intensity={1.5} 
+		shadow-mapSize={[1024, 1024]}/>
 		<OrbitControls
 		//minAzimuthAngle={-Math.PI / 4}
 			//maxAzimuthAngle={Math.PI / 4}
@@ -299,17 +209,10 @@ export const ThreeFiberGalaxy = () => {
 		<Suspense fallback={null}>
 		<Galaxy position={[0, 9, 0]} />
 		</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>