React Three Fiber utils

This is a small set of personal R3F utils I use in my projects.

Installation

npm install @keupoz/r3f-utils @react-three/fiber @react-three/drei three camera-controls

Usage

import { CameraControls, Canvas, FocusControls, Grid, Lights } from '@keupoz/r3f-utils'
import { Box, PerspectiveCamera } from '@react-three/drei'

export function App() {
  return (
    <Canvas>
      <PerspectiveCamera makeDefault position={[32, 32, 32]} />
      <CameraControls makeDefault />

      <Lights />

      <Grid color={0x252525} />

      <FocusControls>
        <Box />
      </FocusControls>
    </Canvas>
  )
}

Included components

CameraControls

Adapted version of CameraControls from Drei. It has fixes for the demand frameloop and a bit better structured code.

Canvas

Just the Canvas component from R3F with some preconfigured properties such as demand frameloop and linear color space.

FocusControls

A simple components that allows the user to focus the camera on scene object of their choice. Also includes a simple highlight of the hovered object.

How to use:

• Double click on any object to focus on them.
• Double click on empty space to reset focus.

Grid

Just the Grid component from Drei with some preconfigured properties.

Lights

A preset of scene lights.

Included utils

setFocus(controls: CameraControls, object: Object3D)

Internally used by FocusControls. Exposed to be able to set focus on any specified object.

Known issues

• CameraControls doesn't properly update when its methods are called without enabled transition. I won't bother fixing as I only need them with enabled transition.