1
0
This commit is contained in:
syui 2024-10-02 13:18:13 +09:00
parent 49bc20b30c
commit b4c67796b7
Signed by: syui
GPG Key ID: 5417CFEBAD92DF56
3 changed files with 31 additions and 127 deletions

View File

@ -5,6 +5,7 @@
"dependencies": { "dependencies": {
"@pixiv/three-vrm": "^3.0.0", "@pixiv/three-vrm": "^3.0.0",
"@pixiv/three-vrm-animation": "^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", "@pixiv/three-vrm-springbone": "^3.0.0",
"@react-three/drei": "^9.109.2", "@react-three/drei": "^9.109.2",
"@react-three/fiber": "^8.16.8", "@react-three/fiber": "^8.16.8",

View File

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

View File

@ -1,5 +1,5 @@
import * as THREE from 'three' 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 { GLTF } from 'three-stdlib'
import { useFrame, Canvas, useThree } from '@react-three/fiber' import { useFrame, Canvas, useThree } from '@react-three/fiber'
import { useMemo, useRef, Suspense, useState, useEffect } from 'react' 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 { useLoader } from '@react-three/fiber'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader' import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
import { CubeTextureLoader } from 'three' 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 { 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 { interface ModelPropsVrm {
url: string url: string
position?: [number, number, number] position?: [number, number, number]
scale?: 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 Vrm: React.FC<ModelPropsVrm> = ({ url, position = [0, 0, 0], scale = 1}) => {
const gltf = useLoader(GLTFLoader, url, (loader) => { const gltf = useLoader(GLTFLoader, url, (loader) => {
loader.register((parser) => new VRMLoaderPlugin(parser)); loader.register((parser) => new VRMLoaderPlugin(parser));
loader.register((parser) => new VRMSpringBoneLoaderPlugin(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.position.set(...position);
vrmModel.scene.scale.setScalar(scale); vrmModel.scene.scale.setScalar(scale);
} }
// Spring Boneの設定を調整
if (vrmModel.springBoneManager) {
adjustSpringBones(vrmModel.springBoneManager);
}
} }
}, [gltf, position, scale]); }, [gltf, position, scale]);
useFrame((state, delta) => { 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; 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; 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 & { type GLTFResult = GLTF & {
nodes: { nodes: {
Object_2: THREE.Mesh Object_2: THREE.Mesh
@ -251,7 +141,6 @@ export function Galaxy(props: JSX.IntrinsicElements['group']) {
return ( return (
<group {...props} dispose={null} ref={ref}> <group {...props} dispose={null} ref={ref}>
<Vrm url={model_path} position={[2, -4, 8]} scale={10} /> <Vrm url={model_path} position={[2, -4, 8]} scale={10} />
<pointLight <pointLight
position={[0, 0, 0]} position={[0, 0, 0]}
@ -284,7 +173,28 @@ export function Galaxy(props: JSX.IntrinsicElements['group']) {
export const ThreeFiberGalaxy = () => { export const ThreeFiberGalaxy = () => {
return ( 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 <OrbitControls
//minAzimuthAngle={-Math.PI / 4} //minAzimuthAngle={-Math.PI / 4}
//maxAzimuthAngle={Math.PI / 4} //maxAzimuthAngle={Math.PI / 4}
@ -299,17 +209,10 @@ export const ThreeFiberGalaxy = () => {
<Suspense fallback={null}> <Suspense fallback={null}>
<Galaxy position={[0, 9, 0]} /> <Galaxy position={[0, 9, 0]} />
</Suspense> </Suspense>
<Skybox />
</Canvas> </Canvas>
) )
} }
useGLTF.preload('./models/galaxy.glb') 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>