ai/star
ai/star
1
0
Fork 0
Code

fix

Browse Source
This commit is contained in:
syui 2024-08-03 15:41:16 +09:00
parent 462e851aab
commit 0b6ba63320
Signed by: syui
GPG Key ID: 5417CFEBAD92DF56
5 changed files with 260 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
galaxy-react/package.json
View File

@ -3,6 +3,9 @@
"version": "0.1.0", "version": "0.1.0",
"private": true, "private": true,
"dependencies": { "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/drei": "^9.109.2",
"@react-three/fiber": "^8.16.8", "@react-three/fiber": "^8.16.8",
"@react-three/postprocessing": "^2.16.2", "@react-three/postprocessing": "^2.16.2",
@ -16,6 +19,7 @@
"@types/three": "^0.167.1", "@types/three": "^0.167.1",
"react": "^18.3.1", "react": "^18.3.1",
"react-dom": "^18.3.1", "react-dom": "^18.3.1",
"react-router-dom": "^6.26.0",
"react-scripts": "5.0.1", "react-scripts": "5.0.1",
"three": "^0.167.1", "three": "^0.167.1",
"three-stdlib": "^2.30.5", "three-stdlib": "^2.30.5",

6
galaxy-react/public/index.html
View File

@ -2,19 +2,19 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <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="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" /> <meta name="theme-color" content="#000000" />
<meta <meta
name="description" name="description"
content="Web site created using create-react-app" 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 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/ 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. Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build. It will be replaced with the URL of the `public` folder during the build.

3
galaxy-react/src/App.css
View File

@ -1,5 +1,6 @@
.App { .App {
text-align: center; text-align: center;
} }
.App-logo { .App-logo {
@ -36,3 +37,5 @@
transform: rotate(360deg); transform: rotate(360deg);
} }
} }

14
galaxy-react/src/index.css
View File

@ -3,14 +3,10 @@ html {
} }
body { body {
background-color: #343434;
background-color: #000; background-color: #000;
margin: 0; margin: 0;
height: 100%; 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{ div#root{
@ -18,6 +14,6 @@ div#root{
} }
code { code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace; monospace;
} }

291
galaxy-react/src/pages/galaxy.tsx
View File

@ -1,9 +1,164 @@
import * as THREE from 'three' import * as THREE from 'three'
import { Points, useGLTF, OrbitControls, ScrollControls, Scroll } from '@react-three/drei' import { Points, useGLTF, OrbitControls, ScrollControls, Scroll } from '@react-three/drei'
import { GLTF } from 'three-stdlib' import { GLTF } from 'three-stdlib'
import { useFrame, Canvas } from '@react-three/fiber' import { useFrame, Canvas, useThree } from '@react-three/fiber'
import { useMemo, useRef } from 'react' import { useMemo, useRef, Suspense, useState, useEffect } from 'react'
import { EffectComposer, SelectiveBloom } from '@react-three/postprocessing' 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 & { type GLTFResult = GLTF & {
nodes: { nodes: {
@ -15,63 +170,91 @@ type GLTFResult = GLTF & {
} }
export function Galaxy(props: JSX.IntrinsicElements['group']) { export function Galaxy(props: JSX.IntrinsicElements['group']) {
const ref = useRef<THREE.Group>(null!) const ref = useRef<THREE.Group>(null!)
const galaxyCenterLightRef = useRef<THREE.PointLight>(null!) const galaxyCenterLightRef = useRef<THREE.PointLight>(null!)
const { nodes } = useGLTF('./models/galaxy.glb') as GLTFResult const searchParams = new URLSearchParams(window.location.search);
const [positions, colors] = useMemo(() => { var g = searchParams.get('g') ?? 'galaxy';
nodes.Object_2.geometry.center() 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( const positions = new Float32Array(
nodes.Object_2.geometry.attributes.position.array.buffer nodes.Object_2.geometry.attributes.position.array.buffer
) )
const colors = new Float32Array(positions.length) const colors = new Float32Array(positions.length)
const getDistanceToCenter = (x: number, y: number, z: number) => const getDistanceToCenter = (x: number, y: number, z: number) =>
Math.sqrt(x * x + y * y + z * z) Math.sqrt(x * x + y * y + z * z)
var model_color = 100;
// make colors closer to 0,0,0 be more reddish and colors further away be more blueish if (g === 'sun'){
const color = new THREE.Color() const sphereGeometry = new SphereGeometry(1, 232, 232);
for (let i = 0; i < positions.length; i += 3) { nodes.Object_2.geometry = sphereGeometry;
const x = positions[i] model_scale = 0.3;
const y = positions[i + 1] } else if (g === 'moon'){
const z = positions[i + 2] const sphereGeometry = new SphereGeometry(1, 132, 132);
const distanceToCenter = getDistanceToCenter(x, y, z) nodes.Object_2.geometry = sphereGeometry;
const normalizedDistanceToCenter = distanceToCenter / 100 model_color = 1;
model_scale = 0.1;
// make colors closer to 0,0,0 be more reddish and colors further away be more blueish (do not use hsl) } else if (g === 'asteroid') {
color.setHSL( const sphereGeometry = new SphereGeometry(1, 32, 32);
(0.15 * (0.21 + Math.cos(distanceToCenter * 0.02))) / 2, nodes.Object_2.geometry = sphereGeometry;
0.75, model_color = 1;
0.6 model_scale = 0.1;
) } else if (g === 'neutron') {
color.setRGB( model_color = 1;
Math.cos(normalizedDistanceToCenter), }
THREE.MathUtils.randFloat(0, 0.8), // make colors closer to 0,0,0 be more reddish and colors further away be more blueish
Math.sin(normalizedDistanceToCenter) const color = new THREE.Color()
) for (let i = 0; i < positions.length; i += 3) {
color.toArray(colors, i) 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] return [positions, colors]
}, [nodes]) }, [nodes])
// slowly rotate the galaxy // slowly rotate the galaxy
useFrame(({ clock }) => { useFrame(({ clock }) => {
ref.current.rotation.z = clock.getElapsedTime() / 2
// zoom in and out // 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 ( return (
<group {...props} dispose={null} ref={ref}> <group {...props} dispose={null} ref={ref}>
<pointLight
<Vrm url={model_path} position={[2, -4, 8]} scale={10} />
<pointLight
position={[0, 0, 0]} position={[0, 0, 0]}
ref={galaxyCenterLightRef} ref={galaxyCenterLightRef}
intensity={0.5} intensity={0.5}
/> />
<Points scale={0.05} positions={positions} colors={colors}> <Points scale={model_scale} positions={positions} colors={colors}>
<pointsMaterial <pointsMaterial
//map={starTexture} //map={starTexture}
transparent transparent
@ -91,22 +274,38 @@ export function Galaxy(props: JSX.IntrinsicElements['group']) {
/> />
</EffectComposer> </EffectComposer>
<ambientLight intensity={1} /> <ambientLight intensity={1} />
</group> </group>
) )
} }
useGLTF.preload('./models/galaxy.glb')
export const ThreeFiberGalaxy = () => { export const ThreeFiberGalaxy = () => {
return ( return (
<Canvas camera={{ position: [0, 12, 0], fov: 75 }}> <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]} /> <pointLight position={[10, 10, 10]} />
<ScrollControls pages={5}> <Suspense fallback={null}>
<Scroll>
<Galaxy position={[0, 9, 0]} /> <Galaxy position={[0, 9, 0]} />
</Scroll> </Suspense>
</ScrollControls> <Skybox />
</Canvas> </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>