材质

材质定义三维物体在光照下的表面外观。

通过 useMaterial 取得 StandardMaterial，再应用到 <Render/>。

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

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

下例创建材质并赋给 Render，通过 Entity 的 onClick 修改材质：

演示
代码

materials.jsx
import { useState } from 'react';
import { Entity } from '@playcanvas/react';
import { Render } from '@playcanvas/react/components';
import { useMaterial } from '@playcanvas/react/hooks';

const orange = {
    diffuse: 'orange',
    emissive: 'black'
};

const red = {
    diffuse: 'red',
    emissive: 'gray'
};

const powderblue = {
    diffuse: 'powderblue',
    emissive: 'orange'
};

const materials = [orange, red, powderblue];

export const Materials = () => {

  const [materialProps, setMaterialProps] = useState(orange);
  const material = useMaterial(materialProps);

  const onRequestRandomColor = () => {
    const randomMaterial = materials[Math.floor(Math.random() * materials.length)];
    setMaterialProps(randomMaterial);
  };

  return (
    <Entity onClick={onRequestRandomColor} >
      <Render type="box" material={material} />
    </Entity>
  );
};

基本属性

Hook 接受与 StandardMaterial 接近的配置对象，返回可赋给 Render 的实例。

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} />
}

纹理

可通过 useTexture 加载纹理，尝试切换不同集合和参数：

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} />
}

演示
代码

material-textures.jsx
// ↑ imports hidden
export const MaterialTextures = () => {
    const { materialSet, roughness, ...materialProps } = useControls(vars);

    // Load Textures
    const { asset: diffuseMap } = useTexture(materialSet.diffuse);
    const { asset: normalMap } = useTexture(materialSet.normal);
    const { asset: roughnessMap } = useTexture(materialSet.roughness);
    const { asset: aoMap } = useTexture(materialSet.ao);
    
    const material = useMaterial({
        diffuseMap: diffuseMap?.resource, 
        normalMap: normalMap?.resource, 
        roughnessMap: roughnessMap?.resource, 
        aoMap: aoMap?.resource,
        useMetalness: true,
        glossInvert: true,
        gloss: roughness,
        ...materialProps
    });
    
    return <Entity>
        <Render type="sphere" material={material} />
    </Entity>
};

基本属性​

纹理​

相关内容​

基本属性

纹理

相关内容