マテリアル

マテリアルは 3D グラフィックスの基本です。ライトで照らされたときの 3D オブジェクトの見た目と性質を定義します。

React では 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>
  )
}

下の例では、useMaterial でマテリアルを作成し Render コンポーネントに適用しています。また Entity に onClick を付け、キューブをクリックしたときにマテリアルのプロパティを変えます。

Demo
Code

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>
  );
};

基本プロパティ

フックは StandardMaterial クラスのプロパティに近いオブジェクトを受け取ります。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} />
}

Demo
Code

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

基本プロパティ​

テクスチャ​

関連​

基本プロパティ

テクスチャ

関連