How to embedded three.quarksin react-three-fiber

In this tutorial, we'll walk you through how to create a particle system in a React application using the three.quarks vfx engine with react-three-fiber a connector between three.js and react. This will allow you to add visually striking particle effects to your 3D scenes rendered in react. Let's break down the code provided:

Step 1: Setting up Dependencies

Ensure you have the required libraries installed:

npm install react-three-fiber three three.quarks

Step 2: Import Necessary Libraries

import React, { useEffect, useRef, useState } from 'react'
import ReactDOM from 'react-dom'
import { Canvas, useFrame, useThree } from 'react-three-fiber'
import { BatchedRenderer, QuarksLoader } from 'three.quarks'

Here, we are importing all the necessary dependencies to create our 3D scene and particle system.

Step 3: Create a Component

The Thing component will be the primary component where our particle system and the 3D mesh reside.

function Thing() {
  const ref = useRef()
  const [batchRenderer, setBatchRenderer] = useState(new BatchedRenderer())
}

We initiate a ref to interact with our mesh and instantiate a batchRenderer which is responsible for rendering all the particle systems in the scene.

useFrame((state, delta) => {
  ref.current.rotation.x = ref.current.rotation.y += 0.01
  batchRenderer.update(delta)
})

In the useFrame function, we are rotating our mesh and updating the batch renderer.

const { scene } = useThree()

Using useThree, we extract the current 3D scene.

useEffect(() => {
    const loader = new QuarksLoader()
    loader.setCrossOrigin('')
        loader.load(
          './atom.json',
          (obj) => {
            obj.traverse((child) => {
              if (child.type === 'ParticleEmitter') {
                batchRenderer.addSystem(child.system)
              }
            })
            obj.scale.set(0.1, 0.1, 0.1)
            scene.add(obj)
          },
          () => {},
          () => {}
        )
        scene.add(batchRenderer)
      }, []);
}

Within useEffect, we're loading the particle system from atom.json using the QuarksLoader. When the particle system is loaded, we traverse its children, add the particle emitter's system to our batchRenderer, scale it down, and add it to our scene.

atom.json contains all the information of the visual effect. You can download and create particle VFX like atom.json on quarks.art.

return (
    <mesh
      ref={ref}>
      <boxGeometry attach="geometry" args={[1, 1, 1]} />
      <meshNormalMaterial attach="material" />
    </mesh>
  )
}

Here we define a 3D mesh with event listeners and use boxGeometry and meshNormalMaterial to define its shape and appearance.

Step 4: Render the Component

ReactDOM.render(
  <Canvas>
    <Thing />
  </Canvas>,
  document.getElementById('root')
)

Finally, we render our Thing component wrapped inside a Canvas component to the DOM.

Conclusion

With the steps above, you’ve successfully set up a basic particle system using three.quarks in conjunction with react-three-fiber. Adjust the particle configurations in atom.json to get the desired particle effect for your scene.