ai/vrm
1
0
Fork 0
Code Activity

fix

Browse Source
This commit is contained in:
syui
2024-08-05 19:09:38 +09:00
parent 602ffa7550
commit d5d5838953
1 changed files with 82 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -17,7 +17,7 @@ interface ModelProps {
scale?: number scale?: number
} }
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 VRMModel: React.FC<ModelProps> = ({ url = "./models/ai.vrm", url_anim="./models/default.vrma", position = [0, 0, 0], scale = 1, rotation = [0, 1.5, 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);
@ -31,7 +31,7 @@ const VRMModel: React.FC<ModelProps> = ({ url = "./models/ai.vrm", url_anim="./m
VRMUtils.removeUnnecessaryJoints(vrmModel.scene); VRMUtils.removeUnnecessaryJoints(vrmModel.scene);
setVrm(vrmModel); setVrm(vrmModel);
if (vrmModel) { if (vrmModel) {
vrmModel.scene.rotation.set(0,1.5,0); vrmModel.scene.rotation.set(...rotation);
vrmModel.scene.position.set(...position); vrmModel.scene.position.set(...position);
vrmModel.scene.scale.setScalar(scale); vrmModel.scene.scale.setScalar(scale);
} }
@ -56,12 +56,12 @@ const VRMModel: React.FC<ModelProps> = ({ url = "./models/ai.vrm", url_anim="./m
}; };
type GLTFResult = GLTF & { type GLTFResult = GLTF & {
nodes: { nodes: {
Object_2: THREE.Mesh Object_2: THREE.Mesh
} }
materials: { materials: {
['Scene_-_Root']: THREE.PointsMaterial ['Scene_-_Root']: THREE.PointsMaterial
} }
} }
export function Galaxy(props: JSX.IntrinsicElements['group']) { 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); const searchParams = new URLSearchParams(window.location.search);
var g = searchParams.get('g') ?? 'galaxy'; var g = searchParams.get('g') ?? 'galaxy';
var model_galaxy = "./models/galaxy.glb" var model_galaxy = "./models/galaxy.glb"
var model_custom = "./models/ai.vrm"
var model_scale = 0.01; 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 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
@ -89,6 +90,7 @@ export function Galaxy(props: JSX.IntrinsicElements['group']) {
model_scale = 0.01; model_scale = 0.01;
position_custom = [-0.5,-1,0]; position_custom = [-0.5,-1,0];
anim_custom = "./models/fly.vrma"; anim_custom = "./models/fly.vrma";
model_custom = "./models/ai_default.vrm";
} else if (g === 'earth'){ } else if (g === 'earth'){
sphereGeometry = new SphereGeometry(1, 232, 232); sphereGeometry = new SphereGeometry(1, 232, 232);
nodes.Object_2.geometry = sphereGeometry; nodes.Object_2.geometry = sphereGeometry;
@ -96,76 +98,77 @@ export function Galaxy(props: JSX.IntrinsicElements['group']) {
model_scale = 0.3; model_scale = 0.3;
position_custom = [-1,-1,0]; position_custom = [-1,-1,0];
anim_custom = "./models/fly.vrma"; anim_custom = "./models/fly.vrma";
model_custom = "./models/ai_default.vrm";
} else if (g === 'neutron') { } else if (g === 'neutron') {
model_color = 1; 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)
// 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 + 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) // 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,
0.6 0.6
) )
color.setRGB( color.setRGB(
Math.cos(normalizedDistanceToCenter), Math.cos(normalizedDistanceToCenter),
THREE.MathUtils.randFloat(0, 0.8), THREE.MathUtils.randFloat(0, 0.8),
Math.sin(normalizedDistanceToCenter) Math.sin(normalizedDistanceToCenter)
) )
color.toArray(colors, i) color.toArray(colors, i)
} }
return [positions, colors] return [positions, colors]
}, [nodes]) }, [nodes])
useFrame(({ clock }) => { useFrame(({ clock }) => {
ref.current.rotation.y = clock.getElapsedTime() / 2 ref.current.rotation.y = clock.getElapsedTime() / 2
ref.current.scale.setScalar(Math.sin(clock.getElapsedTime() / 2) + 1.2) ref.current.scale.setScalar(Math.sin(clock.getElapsedTime() / 2) + 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}/> <VRMModel url={model_custom} 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.1} intensity={0.2}
/> />
<Points scale={model_scale} positions={positions} colors={colors} rotation={[1.5,0,0]}> <Points scale={model_scale} positions={positions} colors={colors} rotation={[1.5,0,0]}>
<pointsMaterial <pointsMaterial
//map={starTexture} //map={starTexture}
transparent transparent
depthWrite={false} depthWrite={false}
vertexColors vertexColors
opacity={0.4} opacity={0.4}
depthTest depthTest
size={0.01} size={0.01}
/> />
</Points> </Points>
<EffectComposer autoClear={false}> <EffectComposer autoClear={false}>
<SelectiveBloom <SelectiveBloom
intensity={5} intensity={5}
luminanceThreshold={0.01} luminanceThreshold={0.01}
luminanceSmoothing={0.225} luminanceSmoothing={0.225}
lights={[galaxyCenterLightRef]} lights={[galaxyCenterLightRef]}
/> />
</EffectComposer> </EffectComposer>
<ambientLight intensity={1} /> <ambientLight intensity={1} />
</group> </group>
) )
} }
export const VRMModelCanvas = () => { export const VRMModelCanvas = () => {
@ -189,11 +192,11 @@ export const VRMModelCanvas = () => {
shadow-mapSize={[1024, 1024]}/> shadow-mapSize={[1024, 1024]}/>
<OrbitControls <OrbitControls
minDistance={2} maxDistance={3} minDistance={2} maxDistance={3}
enableZoom={true} enablePan={false} enableRotate={true} enableZoom={true} enablePan={false} enableRotate={true}
zoomSpeed={0.5} zoomSpeed={0.5}
panSpeed={0.5} panSpeed={0.5}
rotateSpeed={0.5} /> rotateSpeed={0.5} />
<ambientLight intensity={1} /> <ambientLight intensity={1} />
<pointLight position={[10, 10, 10]} /> <pointLight position={[10, 10, 10]} />
<Galaxy position={[0, 0, 0]} /> <Galaxy position={[0, 0, 0]} />