【React Three Fiber】Reactで作る３D【#１６PointMaterial】

【#１６PointMaterial】

YouTube:https://youtu.be/m6f53MtvlnU

https://youtu.be/m6f53MtvlnU

今回は「@react-three/drei」から

「Point」
「Points」
「PointMaterial」

をインポートしてパーティクルを実装します。

src/components/GeoParticles.tsx

import { Point, Points, PointMaterial } from '@react-three/drei'
import { useThree } from '@react-three/fiber'
import { MathUtils } from 'three'

const pColors = ['red', 'yellow', 'orange', 'blue', 'green', 'white']

const GeoParticles = ({ count = 5000 }) => {
  const { width, height } = useThree((state) => state.viewport)

  return (
    <Points limit={count}>
      <PointMaterial size={0.05} vertexColors />
      {Array.from({ length: count }).map((_, i) => (
        <Point
          key={i}
          position={[
            (0.5 - Math.random()) * width * 2,
            (0.5 - Math.random()) * height,
            (0.5 - Math.random()) * 25,
          ]}
          // position={[
          //   MathUtils.randFloatSpread(10),
          //   MathUtils.randFloatSpread(10),
          //   MathUtils.randFloatSpread(10),
          // ]}
          color={pColors[Math.floor(Math.random() * (pColors.length - 1))]}
        />
      ))}
    </Points>
  )
}

export default GeoParticles

ここまでできましたら、
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'
import GeoParticles from './components/GeoParticles'

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 /> */}
        <GeoParticles />
        <OrbitControls />
      </Canvas>
    </div>
  )
}

export default App