Skip to content


 Zabbix
 Grafana
 Prometheus
 React Three Fiber
 Threejs and TypeScript
 SocketIO and TypeScript
 Blender Topological Earth
 Sweet Home 3D
 Design Patterns Python
 Design Patterns TypeScript
   
 Course Coupon Codes
Three.js and TypeScript
Kindle Edition
$6.99 $9.99 Paperback 
$22.99 $29.99




Design Patterns in TypeScript
Kindle Edition
$6.99 $9.99 Paperback
$11.99 $19.99




Design Patterns in Python
Kindle Edition
$6.99 $9.99 Paperback
$11.99 $19.99




useLoader Hook

Import

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

Video Lecture

Section Video Links
useLoader Hook useLoader Hook useLoader Hook

Description

The useLoader hook is used in React Three Fiber to pre-cache any assets in memory, such as images or 3D models for later use in the scene.

The useLoader hook, uses any Three.js loader module as its first argument. In this example, we will pass it the THREE.TextureLoader module. This will be used to texture our icosahedrons rather than using a single color as we've seen so far.

const texture = useLoader(THREE.TextureLoader, './img/grid.png')

The second argument is the URL of the image to use. The URL in the above example, points to a relative location from the perspective of our web server serving our application code.

We will need to add this image to our project.

Create a new folder named img under the existing ./public/ folder.

Right-click the grid image below, and use the option Save image as, to save it into the new folder ./public/img/.

grid.png

After the image is loaded, we can assign it to the materials map property.

There are several ways to do this. For example, if using a meshBasicMaterial.

<meshBasicMaterial map="{texture}"></meshBasicMaterial>
material={new THREE.MeshBasicMaterial({ map: texture })}
const material = new THREE.MeshBasicMaterial()
material.map = texture

Note that any assets loaded with useLoader are cached by default. The URLs act as cache-keys. This allows you to re-use the same asset anywhere within the component tree.

./src/App.jsx

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
import Polyhedron from './Polyhedron'
import * as THREE from 'three'
import { Stats, OrbitControls } from '@react-three/drei'
import { Canvas, useLoader } from '@react-three/fiber'
import { useControls } from 'leva'
import { useRef } from 'react'
import Floor from './Floor'

function Lights() {
  const directionalRef = useRef()

  useControls('Directional Light', {
    intensity: {
      value: 1,
      min: 0,
      max: 5,
      step: 0.1,
      onChange: (v) => {
        directionalRef.current.intensity = v
      },
    },

    position: {
      x: 3.3,
      y: 1.0,
      z: 4.4,
      onChange: (v) => {
        directionalRef.current.position.copy(v)
      },
    },
  })

  return <directionalLight ref={directionalRef} castShadow />
}

export default function App() {
  const texture = useLoader(THREE.TextureLoader, './img/grid.png')

  return (
    <Canvas camera={{ position: [4, 4, 1.5] }} shadows>
      <Lights />
      <Polyhedron
        name="meshBasicMaterial"
        position={[-3, 1, 0]}
        material={new THREE.MeshBasicMaterial({ map: texture })}
      />
      <Polyhedron
        name="meshNormalMaterial"
        position={[-1, 1, 0]}
        material={
          new THREE.MeshNormalMaterial({
            flatShading: true,
          })
        }
      />
      <Polyhedron
        name="meshPhongMaterial"
        position={[1, 1, 0]}
        material={
          new THREE.MeshPhongMaterial({
            flatShading: true,
            map: texture,
          })
        }
      />
      <Polyhedron
        name="meshStandardMaterial"
        position={[3, 1, 0]}
        material={
          new THREE.MeshStandardMaterial({
            flatShading: true,
            map: texture,
          })
        }
      />
      <Floor />
      <OrbitControls target={[0, 1, 0]} />
      <axesHelper args={[5]} />
      <Stats />
    </Canvas>
  )
}
useLoader docs.pmnd.rs codesandbox.io

Working Example