React-Three-Fiber — let’s create a dice

A nice dice

This article is outdated. To apply multiple textures on one object, refer to https://github.com/pmndrs/react-three-fiber/discussions/744#discussioncomment-3041660

In this article I want to show you how simple it is to create a mesh with different textures on each surface. It can even be multiple materials. You’ll learn how to load textures and display them on a cube.

Start with a basic react-three-fiber setup. Just fork the demo below.

Next, in the Box function we copy the material 6 times. One material for each side.

Inside our public folder, create a folder called textures.

Upload these images into textures.

Next, we need a Texture Loader. It comes with three.js, so we have to import that. On top of our document:

import { TextureLoader } from ‘three/src/loaders/TextureLoader.js’;

and now, inside our Box() function, we can use that loader.

const texture_1 = useLoader(TextureLoader, 'textures/dice_1.jpg');

To use the loader, we also have to import a useLoader function from react-three.

import { Canvas, useFrame, useLoader } from 'react-three-fiber'

If we look at the output of this function, we can see it’s all gut. Wait, no, it’s not all gut:

React wants us to display something else while the texture is loading. Ok, why not.

Import Suspense from react.

import React, { useRef, Suspense } from ‘react’

And in our Canvas output, put the box inside a Suspense component.

With Suspense you are able to show a loading indicator. Here is more information: https://reactjs.org/docs/concurrent-mode-suspense.html

Now it’s working, and our console shows the following:

console imported texture

Add a const for every texture and use it for each dice side.

But wait… now we only see one texture applied.

To fix that we have to replace

attach=”material” 

with

attachArray=”material” 

And voila, it creates a texture for each surface.

A nice dice.