easy-three

load.cubeTexture

load.cubeTexture(urls : Array<String>, props : Object) : CubeTexture

urls - テクスチャのURLの配列 (サイズ : 6)。
props - 設定オブジェクト。
  • path (String) : テクスチャのパスのベース (デフォルト : "./")。

指定された6つの画像をロードし、キューブテクスチャを作成します。
キューブテクスチャは、シーンの背景や環境マップに使用できます。

コードの例

キューブテクスチャによる背景

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

scene.background = load.cubeTexture(
  [
    "red_brick_diff_1k.jpg",
    "red_brick_diff_1k.jpg",
    "red_brick_diff_1k.jpg",
    "red_brick_diff_1k.jpg",
    "red_brick_diff_1k.jpg",
    "red_brick_diff_1k.jpg",
  ],
  {
    path: "/easy-three/texture/img/",
  }
);

const cube = create.cube({
  rounded: true,
  segments: 16,
});

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