ai/vrm
1
0
Fork 0
Code Activity

fix

Browse Source
This commit is contained in:
syui
2024-08-05 18:40:46 +09:00
parent f5fa7a9a0c
commit 602ffa7550
2 changed files with 67 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
planet/src/index.css
View File

@ -1,19 +1,19 @@
body { html {
background-color: #000;
height: 100%; height: 100%;
}
body {
background-color: #fff;
background-color: #000;
margin: 0; margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', height: 100%;
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', }
sans-serif;
-webkit-font-smoothing: antialiased; div#root{
-moz-osx-font-smoothing: grayscale; height: 100%;
} }
code { code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace; monospace;
} }
html {
height: 100%;
}

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

@ -12,9 +12,12 @@ import { GLTF } from 'three-stdlib'
interface ModelProps { interface ModelProps {
url: string url: string
url_anim: 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" }) => { const VRMModel: React.FC<ModelProps> = ({ url = "./models/ai.vrm", url_anim="./models/default.vrma", position = [0, 0, 0], scale = 1, rotation = [0, 0, 0] }) => {
const [vrm, setVrm] = useState<VRM | null>(null); const [vrm, setVrm] = useState<VRM | null>(null);
const mixerRef = useRef<THREE.AnimationMixer | null>(null); const mixerRef = useRef<THREE.AnimationMixer | null>(null);
@ -27,6 +30,11 @@ const VRMModel: React.FC<ModelProps> = ({ url = "./models/ai.vrm", url_anim="./m
const vrmModel = gltf.userData.vrm as VRM; const vrmModel = gltf.userData.vrm as VRM;
VRMUtils.removeUnnecessaryJoints(vrmModel.scene); VRMUtils.removeUnnecessaryJoints(vrmModel.scene);
setVrm(vrmModel); 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); const mixer = new THREE.AnimationMixer(vrmModel.scene);
mixerRef.current = mixer; mixerRef.current = mixer;
loader.load(url_anim, (animGltf) => { loader.load(url_anim, (animGltf) => {
@ -37,7 +45,7 @@ const VRMModel: React.FC<ModelProps> = ({ url = "./models/ai.vrm", url_anim="./m
} }
}); });
}); });
}, [url, url_anim]); }, [url, url_anim, position, scale]);
useFrame((state, delta) => { useFrame((state, delta) => {
if (mixerRef.current) mixerRef.current.update(delta); if (mixerRef.current) mixerRef.current.update(delta);
@ -61,47 +69,49 @@ export function Galaxy(props: JSX.IntrinsicElements['group']) {
const galaxyCenterLightRef = useRef<THREE.PointLight>(null!) const galaxyCenterLightRef = useRef<THREE.PointLight>(null!)
const searchParams = new URLSearchParams(window.location.search); const searchParams = new URLSearchParams(window.location.search);
var g = searchParams.get('g') ?? 'galaxy'; var g = searchParams.get('g') ?? 'galaxy';
var model_path = "./models/" + g + ".glb" var model_galaxy = "./models/galaxy.glb"
var model_scale = 0.05; var model_scale = 0.01;
var position_custom = [-0.3, -0.7, -0.2] as [number, number, number];
const { nodes } = useGLTF(model_path) as GLTFResult 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(() => { 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( 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)
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 // 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]
const y = positions[i + 1] const y = positions[i + 1]
const z = positions[i + 2] 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) // 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]) }, [nodes])
useFrame(({ clock }) => { useFrame(({ clock }) => {
// zoom in and out ref.current.rotation.y = clock.getElapsedTime() / 2
ref.current.rotation.z = clock.getElapsedTime() / 2 ref.current.scale.setScalar(Math.sin(clock.getElapsedTime() / 2) + 1.2)
ref.current.scale.setScalar(Math.sin(clock.getElapsedTime() / 10) + 1.2)
}) })
return ( return (
<group {...props} dispose={null} ref={ref}> <group {...props} dispose={null} ref={ref}>
<VRMModel url="./models/ai.vrm" url_anim={anim_custom} position={position_custom} scale={1}/>
<pointLight <pointLight
position={[0, 0, 0]} position={[0, 0, 0]}
ref={galaxyCenterLightRef} ref={galaxyCenterLightRef}
intensity={0.5} intensity={0.1}
/> />
<Points scale={model_scale} positions={positions} colors={colors}> <Points scale={model_scale} positions={positions} colors={colors} rotation={[1.5,0,0]}>
<pointsMaterial <pointsMaterial
//map={starTexture} //map={starTexture}
transparent transparent
@ -160,13 +170,11 @@ export function Galaxy(props: JSX.IntrinsicElements['group']) {
export const VRMModelCanvas = () => { export const VRMModelCanvas = () => {
return ( return (
<div style={{ height: '100vh', width: '100vw' }}>
<Canvas <Canvas
shadows shadows
gl={{ gl={{
toneMapping: THREE.NeutralToneMapping, toneMapping: THREE.NeutralToneMapping,
toneMappingExposure: 1.5, toneMappingExposure: 1.1,
alpha: true, alpha: true,
powerPreference: "high-performance", powerPreference: "high-performance",
antialias: true, antialias: true,
@ -177,16 +185,20 @@ export const VRMModelCanvas = () => {
color="white" color="white"
castShadow castShadow
position={[0, 10, 0]} position={[0, 10, 0]}
intensity={1.5} intensity={0.4}
shadow-mapSize={[1024, 1024]}/> shadow-mapSize={[1024, 1024]}/>
<OrbitControls /> <OrbitControls
minDistance={2} maxDistance={3}
enableZoom={true} enablePan={false} enableRotate={true}
zoomSpeed={0.5}
panSpeed={0.5}
rotateSpeed={0.5} />
<ambientLight intensity={1} /> <ambientLight intensity={1} />
<pointLight position={[10, 10, 10]} /> <pointLight position={[10, 10, 10]} />
<VRMModel url="./models/ai.vrm" url_anim="./models/default.vrma" /> <Galaxy position={[0, 0, 0]} />
<Galaxy position={[0, 9, 0]} />
</Canvas> </Canvas>
</div>
) )
} }
export default VRMModelCanvas; export default VRMModelCanvas;