🌟

【React Three Fiber】Reactで作る３D【#１７Maath】

2023/04/10に公開

React

Three.js

React Three Fiber

tech

【#１７Maath】

YouTube:https://youtu.be/zFcrzeOlJ78

https://youtu.be/zFcrzeOlJ78

今回は「maath」というライブラリを使用して、
パーティクルの実装を行います。

https://github.com/pmndrs/maath

npm i maath

「src」->「components」フォルダに「GeoMaath.tsx」というファイルを作成します。

「Points」の「positions」に「box」を渡すとパーティクルがボックス上に、
「sphere」を渡すと球体上にパーティクルを配置できます。

src/components/GeoMaath.tsx

import { Points } from '@react-three/drei'
import * as random from 'maath/random'
import { useState } from 'react'

const GeoMaath = (props: any) => {
  const [{ box, sphere }] = useState(() => {
    const box = random.inBox(new Float32Array(10000), { sides: [1, 2, 1] })
    const sphere = random.inSphere(box.slice(0), { radius: 0.75 })
    return { box, sphere }
  })

  return (
    <Points positions={sphere} stride={3} {...props}>
      <pointsMaterial size={0.01} />
    </Points>
  )
}

export default GeoMaath

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

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

export default App

「maath」を使用するとサンプルのようなアニメーションの実装も可能です。

【#１７Maath】

Discussion