Skip to content

useThree

Import

import { useThree } from '@react-three/fiber'

Description

The useThree hook gives you access to the state model which contains the default renderer, the scene, the camera, and many more things.

We will import it and log it to the console to see what it contains.

import { useThree } from '@react-three/fiber'
import { useEffect } from 'react'

Instantiate a constant of the useThree() hook, and add a useEffect inside the function body.

const state = useThree()

useEffect(() => {
  console.log(state)
})

You will see output similar to this below.

useThree properties

Some extra things to note here are the mouse and pointer co-ordinates, a raycaster, information about the viewport, clock and the size of the window. There is plenty to look at.

Note that in React Three Fiber, the instance of our WebGLRenderer is named gl, whereas in traditional Three.js examples, you would see it named renderer.

So with this state variable that we've created, we now have another way to modify the Three.js scene, camera and renderer dynamically in our functional components. The other ways you could do it is use the canvas's onCreated event to read and modify the state, or use the same state object that is also provided when using the useFrame hook.

E.g., Canvas onCreated event.

<Canvas onCreated={(state) => console.log(state)}>
  <App />
</Canvas>

https://docs.pmnd.rs/react-three-fiber/api/hooks#usethree

Comments