useMaterial
Materials are a fundamental part of 3D graphics. They define the appearance of 3D objects and are used to create realistic lighting effects. Materials can be applied to Render components to change the appearance of 3D objects. They accept a wide range of properties to control the appearance of the material.
The useMaterial hook returns a StandardMaterial instance. This is useful if you need to create materials and apply them to Render components.
use-material.jsx
import { useMaterial } from '@playcanvas/react/hooks'
/**
* Create a red glowing box with a grain texture
*/
const RedGlowingBox = () => {
// load a texture
const { asset: grainTexture } = useTexture('./grain.jpg');
// create a material with the texture
const material = useMaterial({
diffuse: 'red',
emissive: 'red',
emissiveIntensity: 10,
diffuseMap: grainTexture,
});
// return a box with the material
return <Entity>
<Render type="box" material={material} />
</Entity>
};Props
The StandardMaterial accepts many different props which can be found here .
Last updated on