ai/star
1
0
Fork 0
Code Activity

fix custom

Browse Source
This commit is contained in:
syui
2024-08-02 10:08:21 +09:00
parent b1023a2274
commit 60752528a1
1 changed files with 28 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
galaxy-react/src/pages/galaxy.tsx
View File

@@ -1,5 +1,5 @@
import * as THREE from 'three' import * as THREE from 'three'
import { Points, useGLTF } from '@react-three/drei' import { Points, useGLTF, OrbitControls, ScrollControls, Scroll } from '@react-three/drei'
import { GLTF } from 'three-stdlib' import { GLTF } from 'three-stdlib'
import { useFrame, Canvas } from '@react-three/fiber' import { useFrame, Canvas } from '@react-three/fiber'
import { useMemo, useRef } from 'react' import { useMemo, useRef } from 'react'
@@ -38,11 +38,11 @@ export function Galaxy(props: JSX.IntrinsicElements['group']) {
const normalizedDistanceToCenter = distanceToCenter / 100 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) // 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),
@@ -57,7 +57,7 @@ export function Galaxy(props: JSX.IntrinsicElements['group']) {
// slowly rotate the galaxy // slowly rotate the galaxy
useFrame(({ clock }) => { useFrame(({ clock }) => {
ref.current.rotation.z = clock.getElapsedTime() / 5 ref.current.rotation.z = clock.getElapsedTime() / 2
// zoom in and out // zoom in and out
ref.current.scale.setScalar(Math.sin(clock.getElapsedTime() / 2) + 1.5) ref.current.scale.setScalar(Math.sin(clock.getElapsedTime() / 2) + 1.5)
}) })
@@ -84,8 +84,8 @@ export function Galaxy(props: JSX.IntrinsicElements['group']) {
</Points> </Points>
<EffectComposer autoClear={false}> <EffectComposer autoClear={false}>
<SelectiveBloom <SelectiveBloom
intensity={2} intensity={5}
luminanceThreshold={0.001} luminanceThreshold={0.01}
luminanceSmoothing={0.225} luminanceSmoothing={0.225}
lights={[galaxyCenterLightRef]} lights={[galaxyCenterLightRef]}
/> />
@@ -98,10 +98,22 @@ useGLTF.preload('./models/galaxy.glb')
export const ThreeFiberGalaxy = () => { export const ThreeFiberGalaxy = () => {
return ( return (
<Canvas> <Canvas camera={{ position: [0, 12, 0], fov: 75 }}>
<OrbitControls
enableZoom={true}
enablePan={true}
enableRotate={true}
zoomSpeed={2}
panSpeed={2}
rotateSpeed={0.5}
/>
<ambientLight /> <ambientLight />
<pointLight position={[10, 10, 10]} /> <pointLight position={[10, 10, 10]} />
<ScrollControls pages={5}>
<Scroll>
<Galaxy position={[0, 0, 0]} /> <Galaxy position={[0, 0, 0]} />
</Scroll>
</ScrollControls>
</Canvas> </Canvas>
) )
} }