fix
This commit is contained in:
@ -17,7 +17,7 @@ interface ModelProps {
|
||||
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 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);
|
||||
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<ModelProps> = ({ 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 (
|
||||
<group {...props} dispose={null} ref={ref}>
|
||||
<VRMModel url="./models/ai.vrm" url_anim={anim_custom} position={position_custom} scale={1}/>
|
||||
<pointLight
|
||||
position={[0, 0, 0]}
|
||||
ref={galaxyCenterLightRef}
|
||||
intensity={0.1}
|
||||
/>
|
||||
<Points scale={model_scale} positions={positions} colors={colors} rotation={[1.5,0,0]}>
|
||||
<pointsMaterial
|
||||
//map={starTexture}
|
||||
transparent
|
||||
depthWrite={false}
|
||||
vertexColors
|
||||
opacity={0.4}
|
||||
depthTest
|
||||
size={0.01}
|
||||
/>
|
||||
</Points>
|
||||
<EffectComposer autoClear={false}>
|
||||
<SelectiveBloom
|
||||
intensity={5}
|
||||
luminanceThreshold={0.01}
|
||||
luminanceSmoothing={0.225}
|
||||
lights={[galaxyCenterLightRef]}
|
||||
/>
|
||||
</EffectComposer>
|
||||
<ambientLight intensity={1} />
|
||||
</group>
|
||||
)
|
||||
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 (
|
||||
<group {...props} dispose={null} ref={ref}>
|
||||
<VRMModel url={model_custom} url_anim={anim_custom} position={position_custom} scale={1}/>
|
||||
<pointLight
|
||||
position={[0, 0, 0]}
|
||||
ref={galaxyCenterLightRef}
|
||||
intensity={0.2}
|
||||
/>
|
||||
<Points scale={model_scale} positions={positions} colors={colors} rotation={[1.5,0,0]}>
|
||||
<pointsMaterial
|
||||
//map={starTexture}
|
||||
transparent
|
||||
depthWrite={false}
|
||||
vertexColors
|
||||
opacity={0.4}
|
||||
depthTest
|
||||
size={0.01}
|
||||
/>
|
||||
</Points>
|
||||
<EffectComposer autoClear={false}>
|
||||
<SelectiveBloom
|
||||
intensity={5}
|
||||
luminanceThreshold={0.01}
|
||||
luminanceSmoothing={0.225}
|
||||
lights={[galaxyCenterLightRef]}
|
||||
/>
|
||||
</EffectComposer>
|
||||
<ambientLight intensity={1} />
|
||||
</group>
|
||||
)
|
||||
}
|
||||
|
||||
export const VRMModelCanvas = () => {
|
||||
@ -189,11 +192,11 @@ export const VRMModelCanvas = () => {
|
||||
shadow-mapSize={[1024, 1024]}/>
|
||||
|
||||
<OrbitControls
|
||||
minDistance={2} maxDistance={3}
|
||||
enableZoom={true} enablePan={false} enableRotate={true}
|
||||
zoomSpeed={0.5}
|
||||
panSpeed={0.5}
|
||||
rotateSpeed={0.5} />
|
||||
minDistance={2} maxDistance={3}
|
||||
enableZoom={true} enablePan={false} enableRotate={true}
|
||||
zoomSpeed={0.5}
|
||||
panSpeed={0.5}
|
||||
rotateSpeed={0.5} />
|
||||
<ambientLight intensity={1} />
|
||||
<pointLight position={[10, 10, 10]} />
|
||||
<Galaxy position={[0, 0, 0]} />
|
||||
|
||||
Reference in New Issue
Block a user