diff --git a/planet/src/index.css b/planet/src/index.css index 4e3b2b47d..110949926 100644 --- a/planet/src/index.css +++ b/planet/src/index.css @@ -1,19 +1,19 @@ +html { + height: 100%; +} + body { + background-color: #fff; background-color: #000; - height: 100%; margin: 0; - 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; + height: 100%; +} + +div#root{ + height: 100%; } code { font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; } - -html { - height: 100%; -} diff --git a/planet/src/pages/vrm_model.tsx b/planet/src/pages/vrm_model.tsx index 6e6f05aef..605f791e8 100644 --- a/planet/src/pages/vrm_model.tsx +++ b/planet/src/pages/vrm_model.tsx @@ -1,5 +1,5 @@ import * as THREE from 'three' -import React, { useState, useEffect, useRef,useMemo } from 'react'; +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'; @@ -12,9 +12,12 @@ 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 = ({ url = "./models/ai.vrm", url_anim="./models/default.vrma" }) => { +const VRMModel: React.FC = ({ url = "./models/ai.vrm", url_anim="./models/default.vrma", position = [0, 0, 0], scale = 1, rotation = [0, 0, 0] }) => { const [vrm, setVrm] = useState(null); const mixerRef = useRef(null); @@ -27,6 +30,11 @@ const VRMModel: React.FC = ({ url = "./models/ai.vrm", url_anim="./m const vrmModel = gltf.userData.vrm as VRM; VRMUtils.removeUnnecessaryJoints(vrmModel.scene); setVrm(vrmModel); + if (vrmModel) { + vrmModel.scene.rotation.set(0,1.5,0); + 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) => { @@ -37,7 +45,7 @@ const VRMModel: React.FC = ({ url = "./models/ai.vrm", url_anim="./m } }); }); - }, [url, url_anim]); + }, [url, url_anim, position, scale]); useFrame((state, delta) => { if (mixerRef.current) mixerRef.current.update(delta); @@ -61,47 +69,49 @@ export function Galaxy(props: JSX.IntrinsicElements['group']) { const galaxyCenterLightRef = useRef(null!) const searchParams = new URLSearchParams(window.location.search); var g = searchParams.get('g') ?? 'galaxy'; - var model_path = "./models/" + g + ".glb" - var model_scale = 0.05; - - const { nodes } = useGLTF(model_path) as GLTFResult + var model_galaxy = "./models/galaxy.glb" + var model_scale = 0.01; + var position_custom = [-0.3, -0.7, -0.2] 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; const [positions, colors] = useMemo(() => { - nodes.Object_2.geometry.center() + 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"; + } 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"; + } 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) - var model_color = 100; - if (g === 'sun'){ - const sphereGeometry = new SphereGeometry(1, 332, 332); - nodes.Object_2.geometry = sphereGeometry; - model_scale = 1; - } else if (g === 'moon'){ - const sphereGeometry = new SphereGeometry(1, 132, 132); - nodes.Object_2.geometry = sphereGeometry; - model_color = 1; - model_scale = 0.1; - } else if (g === 'earth'){ - const sphereGeometry = new SphereGeometry(1, 232, 232); - nodes.Object_2.geometry = sphereGeometry; - model_color = 0.5; - model_scale = 0.3; - } else if (g === 'asteroid') { - const sphereGeometry = new SphereGeometry(1, 32, 32); - nodes.Object_2.geometry = sphereGeometry; - model_color = 1; - model_scale = 0.1; - } else if (g === 'neutron') { - model_color = 1; - } + // 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 + 2] + 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) @@ -122,19 +132,19 @@ export function Galaxy(props: JSX.IntrinsicElements['group']) { }, [nodes]) useFrame(({ clock }) => { - // zoom in and out - ref.current.rotation.z = clock.getElapsedTime() / 2 - ref.current.scale.setScalar(Math.sin(clock.getElapsedTime() / 10) + 1.2) + ref.current.rotation.y = clock.getElapsedTime() / 2 + ref.current.scale.setScalar(Math.sin(clock.getElapsedTime() / 2) + 1.2) }) return ( + - + { return ( -
- { color="white" castShadow position={[0, 10, 0]} - intensity={1.5} + intensity={0.4} shadow-mapSize={[1024, 1024]}/> - + - - + -
) } + export default VRMModelCanvas;