diff --git a/planet/src/pages/vrm_model.tsx b/planet/src/pages/vrm_model.tsx index 6e2a37506..65b2a0429 100644 --- a/planet/src/pages/vrm_model.tsx +++ b/planet/src/pages/vrm_model.tsx @@ -45,7 +45,7 @@ const VRMModel: React.FC = ({ url = "./models/ai.vrm", url_anim="./m } }); }); - }, [url, url_anim, position, scale]); + }, [url, url_anim, position, scale, rotation]); useFrame((state, delta) => { if (mixerRef.current) mixerRef.current.update(delta); @@ -63,8 +63,9 @@ interface ModelGlbProps { } const GlbModel: React.FC = ({ 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.position.set(...position); return } @@ -86,43 +87,42 @@ export function Galaxy(props: JSX.IntrinsicElements['group']) { 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(() => { - 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 = 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) - - // 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) { const x = positions[i] @@ -130,7 +130,6 @@ export function Galaxy(props: JSX.IntrinsicElements['group']) { const z = positions[i + 1] 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, @@ -145,7 +144,7 @@ export function Galaxy(props: JSX.IntrinsicElements['group']) { } return [positions, colors] - }, [nodes]) + }, [nodes, model_color]) useFrame(({ clock }) => { ref.current.rotation.y = clock.getElapsedTime() / 2 @@ -154,8 +153,10 @@ export function Galaxy(props: JSX.IntrinsicElements['group']) { return ( - + {g === 'sun' && } + {g === 'galaxy' && } +