【React Three Fiber】Reactで作る３D【#１５Particles Stars】で演習した際の覚書き

import { Stars } from "@react-three/drei"

const Geostars = () => {
  return (
    <>
      <Stars />
    </>
  )
}

export default Geostars

import { Canvas } from "@react-three/fiber";
import { OrbitControls } from "@react-three/drei"
import GeoBox from './components/GeoBox'
import GeoText from './components/GeoText'
import GeoText3d from './components/GeoText3d'
import GeoTexture from "./components/GeoTexture";
import GeoEnv from "./components/GeoEnv";
import GeoGltf from './components/GeoGltf';
import Geostars from "./components/Geostars";

function App() {
  return (
    <div className=" w-full h-screen">
      helloooooooo
      <Canvas shadows 
      camera={{ position: [0,0,10] }}
      >
        <ambientLight intensity={0.5} />
        <directionalLight position={[0, 0, 5]} castShadow/>
        {/* <GeoBox /> */}
        {/* <GeoText /> */}
        {/* <GeoText3d /> */}
        {/* <GeoTexture/> */}
        {/* <GeoEnv /> */}
        {/* <GeoGltf /> */}
        <Geostars />
        <OrbitControls />
      </Canvas>
    </div>
  );
}

export default App;

import { Stars } from "@react-three/drei"
import { useFrame } from "@react-three/fiber"
import { useRef } from "react"
import { Group } from "three"

const Geostars = () => {
  const starRef = useRef<Group>(null!)

  useFrame(() => {
    starRef.current.rotation.y += 0.001
  })
  return (
    <>
      <group ref={starRef}>
        <Stars />
      </group>
    </>
  )
}

export default Geostars