diff --git a/galaxy-react/package.json b/galaxy-react/package.json
index 749e5a4..7f11192 100644
--- a/galaxy-react/package.json
+++ b/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",
diff --git a/galaxy-react/src/index.css b/galaxy-react/src/index.css
index 3d3147a..1109499 100644
--- a/galaxy-react/src/index.css
+++ b/galaxy-react/src/index.css
@@ -3,7 +3,7 @@ html {
}
body {
- background-color: #343434;
+ background-color: #fff;
background-color: #000;
margin: 0;
height: 100%;
diff --git a/galaxy-react/src/pages/galaxy.tsx b/galaxy-react/src/pages/galaxy.tsx
index 09b1eb3..eb08a47 100644
--- a/galaxy-react/src/pages/galaxy.tsx
+++ b/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';
+import { VRMLoaderPlugin, VRM, VRMUtils, VRMSpringBoneLoaderPlugin } from "@pixiv/three-vrm";
-// 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 Search query: {query}
;
-}
-
-const Model: React.FC = ({ url, position = [0, 0, 0], scale = 1 }) => {
- const gltf = useLoader(GLTFLoader, url)
- return (
-
-
-
- )
-}
const Vrm: React.FC = ({ 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 = ({ 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 = ({ url, position = [0, 0, 0], scale = 1})
return gltf ? : 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 = ({ 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(null);
- const [mixer, setMixer] = useState(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 ? : 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 (
-
{
return (
-