🚀

【React Three Fiber】Reactで作る３D【#１５Particles Stars】

2023/04/07に公開

React

Three.js

React Three Fiber

tech

【#１５Particles Stars】

YouTube:https://youtu.be/m6f53MtvlnU

https://youtu.be/m6f53MtvlnU

今回から何回かに分けて
パーティクルの実装方法について解説します。

やり方がいくつかあるのですが、
今回はまずは一番簡単方法で実装します。

「src」->「components」に「GeoStars.tsx」を作成します。

そして、「@react-three/drei」から「Stars」のコンポーネントをインポートします。

https://github.com/pmndrs/drei#stars

src/components/GeoStars.tsx

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

ここまでできましたら、
App.tsxに上記のコンポーネントを設定します。

src/App.tsx

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">
      <Canvas shadows camera={{ position: [0, 0, 10] }}>
        <ambientLight intensity={0.1} />
        <directionalLight position={[0, 0, 5]} castShadow />
        {/* <GeoBox /> */}
        {/* <GeoText /> */}
        {/* <GeoText3d /> */}
        {/* <GeoTexture /> */}
        {/* <GeoEnv /> */}
        {/* <GeoGltf /> */}
        <GeoStars />
        <OrbitControls />
      </Canvas>
    </div>
  )
}

export default App

「Stars」のコンポーネントはpropsで渡せる値が決まっていますので、
細かい設定が苦手です。

<Stars radius={100} depth={50} count={5000} factor={4} saturation={0} fade speed={1} />

アニメーション等を設定する場合には、
「group」のタグを使用して、
こちらに設定する方法があります。

【#１５Particles Stars】

Discussion