本文へスキップ

材料

はじめに​

このセクションでは、スタジオでのマテリアルの使用方法について説明します。

素材の種類​

素材または標準素材​

標準的なPBR素材。

物件を見る こちら.

照明なし素材​

照明や影の影響を受けない素材。 カラーは一貫性を保ち、フィジカル・ベース・レンダリング（PBR）はサポートしない。

物件を見る こちら.

材料特性​

マテリアルはコードを通して、またはエディターのMeshコンポーネント内で直接設定することができます。

コードによる素材の設定​

ecs.Material.set(world, component.eid, {
  r: 255,
  g: 128,
  b: 64,
  roughness: 0.5,
  metalness: 0.8,
  opacity: 1.0,
  side: "front"
})

ecs.UnlitMaterial.set(world, component.eid, {
  r: 255,
  g: 0,
  b: 128,
  opacity: 1.0,
  side: "double"
})

テクスチャを読み込む​

テクスチャを読み込むには、アセットまたは画像を提供する独立したURLが必要です。 サポートされているさまざまなタイプのテクスチャマップの詳細については、マテリアルとアンライトマテリアルのAPIセクションを参照してください。

import * as ecs from '@8thwall/ecs'

ecs.registerComponent({
    name: 'apply-texture-to-material',
    schema: {
        // @asset
        myTexture: ecs.string,
    },
    add: (world, component) => {
        const { myTexture } = component.schemaAttribute.get(component.eid)
        ecs.assets.load({ url: myTexture })
            .then((result) => {
                ecs.Material.set(world, component.eid, {
                    r: 255,
                    g: 128,
                    b: 64,
                    textureSrc: `${result.remoteUrl}`,
                    roughness: 0.5,
                    metalness: 0.8,
                    opacity: 1.0,
                    side: "back"
                })
            })
            .catch((error) => {
                console.error('Failed to load texture:', error)
            })
    }
})

特殊素材​

シャドー素材​

影が投影されたときだけレンダリングされる素材。

ecs.ShadowMaterial.set(world, component.eid, {r: 0, g: 250, b: 0, opacity: 1, side: 'front', depthTest: true, depthWrite: true})

ハイダー素材​

背後のオブジェクトを隠す素材。

ecs.HiderMaterial.set(world, component.eid)