fix custom

galaxy-react/src/pages/galaxy.tsx

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