Skip to content

Instantly share code, notes, and snippets.

@artokun
Last active August 20, 2024 16:00
Show Gist options
  • Save artokun/fb7f0c68a01ba5d9813abb3ccce254c4 to your computer and use it in GitHub Desktop.
Save artokun/fb7f0c68a01ba5d9813abb3ccce254c4 to your computer and use it in GitHub Desktop.
import * as THREE from 'three'
import { Points, useGLTF } from '@react-three/drei'
import { GLTF } from 'three-stdlib'
import { useFrame, useLoader } from '@react-three/fiber'
import { useMemo, useRef } from 'react'
import { EffectComposer, SelectiveBloom } from '@react-three/postprocessing'
type GLTFResult = GLTF & {
nodes: {
Object_2: THREE.Mesh
}
materials: {
['Scene_-_Root']: THREE.PointsMaterial
}
}
export function Galaxy(props: JSX.IntrinsicElements['group']) {
const ref = useRef<THREE.Group>(null!)
const galaxyCenterLightRef = useRef<THREE.PointLight>(null!)
const { nodes } = useGLTF('/models/galaxy.glb') as GLTFResult
const [positions, colors] = useMemo(() => {
nodes.Object_2.geometry.center()
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 + 2]
const distanceToCenter = getDistanceToCenter(x, y, z)
const normalizedDistanceToCenter = distanceToCenter / 100
// 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]
}, [nodes])
const starTexture = useLoader(THREE.TextureLoader, '/star.png')
// slowly rotate the galaxy
useFrame(({ clock }) => {
ref.current.rotation.z = clock.getElapsedTime() / 5
// zoom in and out
ref.current.scale.setScalar(Math.sin(clock.getElapsedTime() / 2) + 1.5)
})
// make particles glow
return (
<group {...props} dispose={null} ref={ref}>
<pointLight
position={[0, 0, 0]}
ref={galaxyCenterLightRef}
intensity={0.5}
/>
<Points scale={0.05} positions={positions} colors={colors}>
<pointsMaterial
map={starTexture}
transparent
depthWrite={false}
vertexColors
opacity={0.4}
depthTest
size={0.01}
/>
</Points>
<EffectComposer autoClear={false}>
<SelectiveBloom
intensity={2}
luminanceThreshold={0.001}
luminanceSmoothing={0.225}
lights={[galaxyCenterLightRef]}
/>
</EffectComposer>
</group>
)
}
useGLTF.preload('/models/galaxy.glb')
@genetek9999
Copy link

u save me bro!

@atis02
Copy link

atis02 commented Jun 12, 2024

it's a amazing!!. Bro can u do it in react js? Please it is need for work

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment