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

161
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
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 [positions, colors] // make colors closer to 0,0,0 be more reddish and colors further away be more blueish
}, [nodes]) const color = new THREE.Color()
for (let i = 0; i < positions.length; i += 3) {
useFrame(({ clock }) => { const x = positions[i]
ref.current.rotation.y = clock.getElapsedTime() / 2 const y = positions[i + 1]
ref.current.scale.setScalar(Math.sin(clock.getElapsedTime() / 2) + 1.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)
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]
<group {...props} dispose={null} ref={ref}> }, [nodes])
<VRMModel url="./models/ai.vrm" url_anim={anim_custom} position={position_custom} scale={1}/>
<pointLight useFrame(({ clock }) => {
position={[0, 0, 0]} ref.current.rotation.y = clock.getElapsedTime() / 2
ref={galaxyCenterLightRef} ref.current.scale.setScalar(Math.sin(clock.getElapsedTime() / 2) + 1.2)
intensity={0.1} })
/>
<Points scale={model_scale} positions={positions} colors={colors} rotation={[1.5,0,0]}> return (
<pointsMaterial <group {...props} dispose={null} ref={ref}>
//map={starTexture} <VRMModel url={model_custom} url_anim={anim_custom} position={position_custom} scale={1}/>
transparent <pointLight
depthWrite={false} position={[0, 0, 0]}
vertexColors ref={galaxyCenterLightRef}
opacity={0.4} intensity={0.2}
depthTest />
size={0.01} <Points scale={model_scale} positions={positions} colors={colors} rotation={[1.5,0,0]}>
/> <pointsMaterial
</Points> //map={starTexture}
<EffectComposer autoClear={false}> transparent
<SelectiveBloom depthWrite={false}
intensity={5} vertexColors
luminanceThreshold={0.01} opacity={0.4}
luminanceSmoothing={0.225} depthTest
lights={[galaxyCenterLightRef]} size={0.01}
/> />
</EffectComposer> </Points>
<ambientLight intensity={1} /> <EffectComposer autoClear={false}>
</group> <SelectiveBloom
) intensity={5}
luminanceThreshold={0.01}
luminanceSmoothing={0.225}
lights={[galaxyCenterLightRef]}
/>
</EffectComposer>
<ambientLight intensity={1} />
</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]} />