ai/vrm
1
0
Fork 0
Code Activity

fix

Browse Source
This commit is contained in:
syui
2024-08-06 21:59:56 +09:00
parent d46df3c003
commit f079dfa1d6
1 changed files with 32 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
planet/src/pages/vrm_model.tsx
View File

@ -45,7 +45,7 @@ const VRMModel: React.FC<ModelProps> = ({ url = "./models/ai.vrm", url_anim="./m
} }
}); });
}); });
}, [url, url_anim, position, scale]); }, [url, url_anim, position, scale, rotation]);
useFrame((state, delta) => { useFrame((state, delta) => {
if (mixerRef.current) mixerRef.current.update(delta); if (mixerRef.current) mixerRef.current.update(delta);
@ -65,6 +65,7 @@ interface ModelGlbProps {
const GlbModel: React.FC<ModelGlbProps> = ({ url = "./models/solar_system_animation.glb", position = [0, 0, 0], scale = 1, rotation = [0, 0, 0] }) => { 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) const { scene } = useGLTF(url)
scene.scale.setScalar(scale); scene.scale.setScalar(scale);
scene.position.set(...position);
return <primitive object={scene} /> return <primitive object={scene} />
} }
@ -86,11 +87,11 @@ export function Galaxy(props: JSX.IntrinsicElements['group']) {
var model_custom = "./models/ai.vrm" var model_custom = "./models/ai.vrm"
var model_scale = 0.01; var model_scale = 0.01;
var position_custom = [-0.2, -0.8, -0.3] as [number, number, number]; 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 sphereGeometry = new SphereGeometry(1, 332, 332);
var anim_custom = "./models/emote.vrma"; var anim_custom = "./models/emote.vrma";
const { nodes } = useGLTF(model_galaxy) as GLTFResult const { nodes } = useGLTF(model_galaxy) as GLTFResult
var model_color = 100; var model_color = 100;
const [positions, colors] = useMemo(() => {
nodes.Object_2.geometry.center() nodes.Object_2.geometry.center()
if (g === 'sun'){ if (g === 'sun'){
sphereGeometry = new SphereGeometry(1, 332, 332); sphereGeometry = new SphereGeometry(1, 332, 332);
@ -115,14 +116,13 @@ export function Galaxy(props: JSX.IntrinsicElements['group']) {
} else if (g === 'neutron') { } else if (g === 'neutron') {
model_color = 1; model_color = 1;
} }
const [positions, colors] = useMemo(() => {
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)
// make colors closer to 0,0,0 be more reddish and colors further away be more blueish
const color = new THREE.Color() const color = new THREE.Color()
for (let i = 0; i < positions.length; i += 3) { for (let i = 0; i < positions.length; i += 3) {
const x = positions[i] const x = positions[i]
@ -130,7 +130,6 @@ export function Galaxy(props: JSX.IntrinsicElements['group']) {
const z = positions[i + 1] const z = positions[i + 1]
const distanceToCenter = getDistanceToCenter(x, y, z) const distanceToCenter = getDistanceToCenter(x, y, z)
const normalizedDistanceToCenter = distanceToCenter / model_color 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( color.setHSL(
(0.15 * (0.21 + Math.cos(distanceToCenter * 0.02))) / 2, (0.15 * (0.21 + Math.cos(distanceToCenter * 0.02))) / 2,
0.75, 0.75,
@ -145,7 +144,7 @@ export function Galaxy(props: JSX.IntrinsicElements['group']) {
} }
return [positions, colors] return [positions, colors]
}, [nodes]) }, [nodes, model_color])
useFrame(({ clock }) => { useFrame(({ clock }) => {
ref.current.rotation.y = clock.getElapsedTime() / 2 ref.current.rotation.y = clock.getElapsedTime() / 2
@ -154,8 +153,10 @@ export function Galaxy(props: JSX.IntrinsicElements['group']) {
return ( return (
<group {...props} dispose={null} ref={ref}> <group {...props} dispose={null} ref={ref}>
<VRMModel url={model_custom} url_anim={anim_custom} position={position_custom} scale={1}/> <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 === '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 <pointLight
position={[0, 0, 0]} position={[0, 0, 0]}
ref={galaxyCenterLightRef} ref={galaxyCenterLightRef}