easy-three

load.texture

load.texture(url : String, props : Object) : Texture

url - テクスチャのURL。
props - 設定オブジェクト。
  • wrapS (number) : テクスチャのラッピングモード (デフォルト : Default.texture.wrapping)。
  • wrapT (number) : テクスチャのラッピングモード (デフォルト : Default.texture.wrapping)。
  • repeat (Array) : テクスチャの繰り返し回数 (デフォルト : [1, 1])。
  • manager (Object) : ローダマネージャ用のコールバック関数をまとめたオブジェクト。
    • onStart (Function) : ロード開始時のコールバック関数。
    • onLoad (Function) : ロード完了時のコールバック関数。
    • onProgress (Function) : ロード中のコールバック関数。
    • onError (Function) : ロードエラー時のコールバック関数。

指定された画像をロードし、テクスチャを作成します。
テクスチャの繰り返しを有効にするには、wrapSおよびwrapTを "Repeat" または "MirroredRepeat" に設定する必要があります。

コードの例

テクスチャの適用

const { camera, create, helper, load, controls, animate } = init()
create.ambientLight({ intensity: 1 });
create.directionalLight({ intensity: 2 });
camera.position.set(0, 0, 2);
controls.connect();

const cube = create.cube({
  rounded: true,
  segments: 16,
  option: {
    map: load.texture("/easy-three/texture/img/red_brick_diff_1k.jpg"),
    normalMap: load.texture("/easy-three/texture/img/red_brick_nor_gl_1k.jpg"),
  },
});

animate(({ delta }) => {
  cube.rotation.x += delta;
  cube.rotation.y += delta;
});