fix
This commit is contained in:
parent
462e851aab
commit
0b6ba63320
GPG Key ID:
5417CFEBAD92DF56
@ -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",
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
.App {
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
|
||||
.App-logo {
|
||||
@ -36,3 +37,5 @@
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
div#root{
|
||||
|
||||
@ -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: {
|
||||
@ -17,17 +172,39 @@ 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 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)
|
||||
|
||||
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) {
|
||||
@ -35,8 +212,7 @@ export function Galaxy(props: JSX.IntrinsicElements['group']) {
|
||||
const y = positions[i + 1]
|
||||
const z = positions[i + 2]
|
||||
const distanceToCenter = getDistanceToCenter(x, y, z)
|
||||
const normalizedDistanceToCenter = distanceToCenter / 100
|
||||
|
||||
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,
|
||||
@ -54,24 +230,31 @@ export function Galaxy(props: JSX.IntrinsicElements['group']) {
|
||||
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
|
||||
// <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}>
|
||||
|
||||
<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
|
||||
@ -95,18 +278,34 @@ export function Galaxy(props: JSX.IntrinsicElements['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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user