easy-three
Eng日本語

create.material

create.material(props : Object) : Material

props - 設定オブジェクト。
  • material (String) : マテリアルタイプ、またはマテリアルオブジェクト、またはマテリアルオブジェクトの配列 (デフォルト :Default.material)。
  • doubleSide (Boolean) : 両面表示にするか？ (デフォルト : false)。
  • upsideDown (Boolean) : 裏面表示にするか？ (デフォルト : false)。

マテリアルを作成して返します。

doubleSide と upsideDown は、マテリアルの side プロパティを設定するためのショートカットです。

doubleSide が true の場合、side は THREE.DoubleSide に設定されます。
upsideDown が true の場合、side は THREE.BackSide に設定されます。
どちらも false の場合、side は THREE.FrontSide に設定されます。

それ以外の props に指定できるものは、Three.js のマテリアルのプロパティと同じです。
例えば eas-three のデフォルトのマテリアルは、THREE.MeshStandardMaterial なので、 以下のものが指定できます(他にもたくさんあります)。

  • color (Number) : 色 (デフォルト : Default.color)。
  • map (Texture) : テクスチャ (デフォルト : null)。
  • normalMap (Texture) : 法線マップ (デフォルト : null)。
  • bumpMap (Texture) : バンプマップ (デフォルト : null)。
  • transmission (Number) : 透過率 (デフォルト : 0)。
  • roughness (Number) : 粗さ (デフォルト : 1)。
  • metalness (Number) : 金属度 (デフォルト : 0)。

詳細はThree.js のドキュメントを参照してください。

コードの例

マテリアルの作成

const { camera, create, controls, animate } = init()
camera.position.set(1, 1, 2)
controls.connect()

create.ambientLight()
create.directionalLight()

const material = create.material({
  color: 0x00ff00,
})

create.cube({
  material: material,
})

animate()

各面に違うマテリアルを設定する

const { camera, create, controls, animate } = init()
camera.position.set(1, 1, 2)
controls.connect()

create.ambientLight()
create.directionalLight()

const redMaterial = create.material({ color: 0xff0000 });
const greenMaterial = create.material({ color: 0x00ff00 });
const blueMaterial = create.material({ color: 0x0000ff });

create.cube({
  material: [
    redMaterial,
    greenMaterial,
    blueMaterial,
    redMaterial,
    greenMaterial,
    blueMaterial
  ],
});

animate()