223 lines
6.7 KiB
TypeScript
223 lines
6.7 KiB
TypeScript
import * as THREE from 'three'
|
|
import React, { useState, useEffect, useRef, useMemo } from 'react';
|
|
import { Points, OrbitControls, useGLTF } from '@react-three/drei'
|
|
import { useFrame, Canvas } from '@react-three/fiber';
|
|
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
|
|
import { VRM, VRMUtils, VRMLoaderPlugin } from '@pixiv/three-vrm';
|
|
import { VRMAnimationLoaderPlugin, VRMAnimation, createVRMAnimationClip } from "@pixiv/three-vrm-animation";
|
|
import { EffectComposer, SelectiveBloom } from '@react-three/postprocessing'
|
|
import { SphereGeometry } from 'three';
|
|
import { GLTF } from 'three-stdlib'
|
|
|
|
interface ModelProps {
|
|
url: string
|
|
url_anim: string
|
|
position?: [number, number, number]
|
|
rotation?: [number, number, number]
|
|
scale?: number
|
|
}
|
|
|
|
const VRMModel: React.FC<ModelProps> = ({ url = "./models/ai.vrm", url_anim="./models/default.vrma", position = [0, 0, 0], scale = 1, rotation = [0, 1.5, 0] }) => {
|
|
|
|
const [vrm, setVrm] = useState<VRM | null>(null);
|
|
const mixerRef = useRef<THREE.AnimationMixer | null>(null);
|
|
|
|
useEffect(() => {
|
|
const loader = new GLTFLoader();
|
|
loader.register((parser) => new VRMLoaderPlugin(parser));
|
|
loader.register((parser) => new VRMAnimationLoaderPlugin(parser));
|
|
loader.load(url, (gltf) => {
|
|
const vrmModel = gltf.userData.vrm as VRM;
|
|
VRMUtils.removeUnnecessaryJoints(vrmModel.scene);
|
|
setVrm(vrmModel);
|
|
if (vrmModel) {
|
|
vrmModel.scene.rotation.set(...rotation);
|
|
vrmModel.scene.position.set(...position);
|
|
vrmModel.scene.scale.setScalar(scale);
|
|
}
|
|
const mixer = new THREE.AnimationMixer(vrmModel.scene);
|
|
mixerRef.current = mixer;
|
|
loader.load(url_anim, (animGltf) => {
|
|
const vrmAnimations = animGltf.userData.vrmAnimations as VRMAnimation[];
|
|
if (vrmAnimations && vrmAnimations.length > 0) {
|
|
const clip = createVRMAnimationClip(vrmAnimations[0], vrmModel);
|
|
mixer.clipAction(clip).play();
|
|
}
|
|
});
|
|
});
|
|
}, [url, url_anim, position, scale, rotation]);
|
|
|
|
useFrame((state, delta) => {
|
|
if (mixerRef.current) mixerRef.current.update(delta);
|
|
if (vrm) vrm.update(delta);
|
|
});
|
|
|
|
return vrm ? <primitive object={vrm.scene} /> : null;
|
|
};
|
|
|
|
interface ModelGlbProps {
|
|
url: string
|
|
position?: [number, number, number]
|
|
rotation?: [number, number, number]
|
|
scale?: number
|
|
}
|
|
|
|
const GlbModel: React.FC<ModelGlbProps> = ({ url = "./models/solar_system_animation.glb", position = [0, 0, 0], scale = 1, rotation = [0, 0, 0] }) => {
|
|
const { scene } = useGLTF(url)
|
|
scene.scale.setScalar(scale);
|
|
scene.position.set(...position);
|
|
return <primitive object={scene} />
|
|
}
|
|
|
|
type GLTFResult = GLTF & {
|
|
nodes: {
|
|
Object_2: THREE.Mesh
|
|
}
|
|
materials: {
|
|
['Scene_-_Root']: THREE.PointsMaterial
|
|
}
|
|
}
|
|
|
|
export function Galaxy(props: JSX.IntrinsicElements['group']) {
|
|
const ref = useRef<THREE.Group>(null!)
|
|
const galaxyCenterLightRef = useRef<THREE.PointLight>(null!)
|
|
const searchParams = new URLSearchParams(window.location.search);
|
|
var g = searchParams.get('g') ?? 'galaxy';
|
|
var model_galaxy = "./models/galaxy.glb"
|
|
var model_custom = "./models/ai.vrm"
|
|
var model_scale = 0.01;
|
|
var position_custom = [-0.2, -0.8, -0.3] as [number, number, number];
|
|
var rotation_custom = [0, 1.5, 0] as [number, number, number];
|
|
var sphereGeometry = new SphereGeometry(1, 332, 332);
|
|
var anim_custom = "./models/emote.vrma";
|
|
const { nodes } = useGLTF(model_galaxy) as GLTFResult
|
|
var model_color = 100;
|
|
nodes.Object_2.geometry.center()
|
|
if (g === 'sun'){
|
|
sphereGeometry = new SphereGeometry(1, 332, 332);
|
|
nodes.Object_2.geometry = sphereGeometry;
|
|
model_scale = 1;
|
|
} else if (g === 'moon'){
|
|
sphereGeometry = new SphereGeometry(1, 132, 132);
|
|
nodes.Object_2.geometry = sphereGeometry;
|
|
model_color = 1;
|
|
model_scale = 0.01;
|
|
position_custom = [-0.5,-1,0];
|
|
anim_custom = "./models/fly.vrma";
|
|
model_custom = "./models/ai_default.vrm";
|
|
} else if (g === 'earth'){
|
|
sphereGeometry = new SphereGeometry(1, 232, 232);
|
|
nodes.Object_2.geometry = sphereGeometry;
|
|
model_color = 0.5;
|
|
model_scale = 0.3;
|
|
position_custom = [-1,-1,0];
|
|
anim_custom = "./models/fly.vrma";
|
|
model_custom = "./models/ai_default.vrm";
|
|
} else if (g === 'neutron') {
|
|
model_color = 1;
|
|
}
|
|
const [positions, colors] = useMemo(() => {
|
|
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)
|
|
const color = new THREE.Color()
|
|
for (let i = 0; i < positions.length; i += 3) {
|
|
const x = positions[i]
|
|
const y = positions[i + 1]
|
|
const z = positions[i + 1]
|
|
const distanceToCenter = getDistanceToCenter(x, y, z)
|
|
const normalizedDistanceToCenter = distanceToCenter / model_color
|
|
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]
|
|
}, [nodes, model_color])
|
|
|
|
useFrame(({ clock }) => {
|
|
ref.current.rotation.y = clock.getElapsedTime() / 2
|
|
ref.current.scale.setScalar(Math.sin(clock.getElapsedTime() / 2) + 1.2)
|
|
})
|
|
|
|
return (
|
|
<group {...props} dispose={null} ref={ref}>
|
|
<VRMModel url={model_custom} url_anim={anim_custom} position={position_custom} scale={1} rotation={rotation_custom} />
|
|
{g === 'sun' && <GlbModel url="./models/solar-system.glb" scale={10} />}
|
|
{g === 'galaxy' && <GlbModel url="./models/solar-system.glb" scale={1} position={[0,0.5,2]}/>}
|
|
|
|
<pointLight
|
|
position={[0, 0, 0]}
|
|
ref={galaxyCenterLightRef}
|
|
intensity={0.2}
|
|
/>
|
|
<Points scale={model_scale} positions={positions} colors={colors} rotation={[1.5,0,0]}>
|
|
<pointsMaterial
|
|
//map={starTexture}
|
|
transparent
|
|
depthWrite={false}
|
|
vertexColors
|
|
opacity={0.4}
|
|
depthTest
|
|
size={0.01}
|
|
/>
|
|
</Points>
|
|
<EffectComposer autoClear={false}>
|
|
<SelectiveBloom
|
|
intensity={5}
|
|
luminanceThreshold={0.01}
|
|
luminanceSmoothing={0.225}
|
|
lights={[galaxyCenterLightRef]}
|
|
/>
|
|
</EffectComposer>
|
|
<ambientLight intensity={1} />
|
|
</group>
|
|
)
|
|
}
|
|
|
|
export const VRMModelCanvas = () => {
|
|
return (
|
|
<Canvas
|
|
shadows
|
|
gl={{
|
|
toneMapping: THREE.NeutralToneMapping,
|
|
toneMappingExposure: 1.1,
|
|
alpha: true,
|
|
powerPreference: "high-performance",
|
|
antialias: true,
|
|
}}
|
|
camera={{ position: [1, 1, 1] }}>
|
|
|
|
<directionalLight
|
|
color="white"
|
|
castShadow
|
|
position={[0, 10, 0]}
|
|
intensity={0.4}
|
|
shadow-mapSize={[1024, 1024]}/>
|
|
|
|
<OrbitControls
|
|
minDistance={2} maxDistance={3}
|
|
enableZoom={true} enablePan={false} enableRotate={true}
|
|
zoomSpeed={0.5}
|
|
panSpeed={0.5}
|
|
rotateSpeed={0.5} />
|
|
<ambientLight intensity={1} />
|
|
<pointLight position={[10, 10, 10]} />
|
|
<Galaxy position={[0, 0, 0]} />
|
|
</Canvas>
|
|
)
|
|
}
|
|
|
|
export default VRMModelCanvas;
|