Skip to main content

Materials

Materials are a fundamental part of 3D graphics. They define the appearance and properties of 3D objects when lit.

You work with materials in React using the useMaterial hook which returns a StandardMaterial instance. You can then apply it to a <Render/> component.

import { useMaterial } from '@playcanvas/react/hooks'

export const RedBox = () => {
const material = useMaterial({ diffuse: 'red' });
return (
<Entity>
<Render type="box" material={material} />
</Entity>
)
}

In the example below, we're using the useMaterial hook to create a material and applying it to a Render component. We also add a onClick event to the Entity to change the material properties when the cube is clicked.

Basic Properties

The hook accepts an object of properties that closely match those of the StandardMaterial class. It will return a StandardMaterial instance which can be applied to a <Render/> component.

import { useMaterial } from '@playcanvas/react/hooks'

function BasicMaterialExample() {
const material = useMaterial({
diffuse: 'blue', // Base color
opacity: 0.7, // Transparency (0-1)
metalness: 0.8, // Metallic property (0-1)
roughness: 0.2, // Surface roughness (0-1)
emissive: 'green', // Emissive color
emissiveIntensity: 0.5 // Emissive strength
})

return <Render type="box" material={material} />
}

Textures

You can also use textures with the material by loading them with the useTexture hook. Try switching between different texture sets and adjusting the material properties:

import { useMaterial } from '@playcanvas/react/hooks'
import { useTexture } from '@playcanvas/react/hooks'

function TexturedMaterialExample() {
const { asset: diffuseMap } = useTexture('diffuse.jpg')
const material = useMaterial({ diffuseMap })

return <Render type="box" material={material} />
}