diff --git a/planet/src/pages/vrm_model.tsx b/planet/src/pages/vrm_model.tsx index 605f791e8..bfe1ab833 100644 --- a/planet/src/pages/vrm_model.tsx +++ b/planet/src/pages/vrm_model.tsx @@ -17,7 +17,7 @@ interface ModelProps { scale?: number } -const VRMModel: React.FC = ({ url = "./models/ai.vrm", url_anim="./models/default.vrma", position = [0, 0, 0], scale = 1, rotation = [0, 0, 0] }) => { +const VRMModel: React.FC = ({ url = "./models/ai.vrm", url_anim="./models/default.vrma", position = [0, 0, 0], scale = 1, rotation = [0, 1.5, 0] }) => { const [vrm, setVrm] = useState(null); const mixerRef = useRef(null); @@ -31,7 +31,7 @@ const VRMModel: React.FC = ({ url = "./models/ai.vrm", url_anim="./m VRMUtils.removeUnnecessaryJoints(vrmModel.scene); setVrm(vrmModel); if (vrmModel) { - vrmModel.scene.rotation.set(0,1.5,0); + vrmModel.scene.rotation.set(...rotation); vrmModel.scene.position.set(...position); vrmModel.scene.scale.setScalar(scale); } @@ -56,12 +56,12 @@ const VRMModel: React.FC = ({ url = "./models/ai.vrm", url_anim="./m }; type GLTFResult = GLTF & { - nodes: { - Object_2: THREE.Mesh - } - materials: { - ['Scene_-_Root']: THREE.PointsMaterial - } + nodes: { + Object_2: THREE.Mesh + } + materials: { + ['Scene_-_Root']: THREE.PointsMaterial + } } export function Galaxy(props: JSX.IntrinsicElements['group']) { @@ -70,8 +70,9 @@ export function Galaxy(props: JSX.IntrinsicElements['group']) { 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.3, -0.7, -0.2] as [number, number, number]; + var position_custom = [-0.2, -0.8, -0.3] as [number, number, number]; var sphereGeometry = new SphereGeometry(1, 332, 332); var anim_custom = "./models/emote.vrma"; const { nodes } = useGLTF(model_galaxy) as GLTFResult @@ -89,6 +90,7 @@ export function Galaxy(props: JSX.IntrinsicElements['group']) { 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; @@ -96,76 +98,77 @@ export function Galaxy(props: JSX.IntrinsicElements['group']) { 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] - const y = positions[i + 1] - 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, - 0.6 - ) - color.setRGB( - Math.cos(normalizedDistanceToCenter), - THREE.MathUtils.randFloat(0, 0.8), - Math.sin(normalizedDistanceToCenter) - ) - color.toArray(colors, i) - } + 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) - return [positions, colors] - }, [nodes]) - - useFrame(({ clock }) => { - ref.current.rotation.y = clock.getElapsedTime() / 2 - ref.current.scale.setScalar(Math.sin(clock.getElapsedTime() / 2) + 1.2) - }) + // 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] + const y = positions[i + 1] + 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, + 0.6 + ) + color.setRGB( + Math.cos(normalizedDistanceToCenter), + THREE.MathUtils.randFloat(0, 0.8), + Math.sin(normalizedDistanceToCenter) + ) + color.toArray(colors, i) + } - return ( - - - - - - - - - - - - ) + return [positions, colors] + }, [nodes]) + + useFrame(({ clock }) => { + ref.current.rotation.y = clock.getElapsedTime() / 2 + ref.current.scale.setScalar(Math.sin(clock.getElapsedTime() / 2) + 1.2) + }) + + return ( + + + + + + + + + + + + ) } export const VRMModelCanvas = () => { @@ -189,11 +192,11 @@ export const VRMModelCanvas = () => { shadow-mapSize={[1024, 1024]}/> + minDistance={2} maxDistance={3} + enableZoom={true} enablePan={false} enableRotate={true} + zoomSpeed={0.5} + panSpeed={0.5} + rotateSpeed={0.5} />