easy-three
Eng日本語

load.background

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

url - 背景テクスチャのURL。
props - 設定オブジェクト。
  • background (Boolean) : 背景に設定するか (デフォルト : true)。
  • environment (Boolean) : 環境マップに設定するか (デフォルト : true)。
  • manager (Object) : ローダマネージャ用のコールバック関数をまとめたオブジェクト。
    • onStart (Function) : ロード開始時のコールバック関数。
    • onLoad (Function) : ロード完了時のコールバック関数。
    • onProgress (Function) : ロード中のコールバック関数。
    • onError (Function) : ロードエラー時のコールバック関数。

指定されたHDR形式の画像をロードし、シーンの背景と環境マップに設定します。

コードの例

背景と環境マップの設定

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

load.background(
  "/easy-three/texture/hdr/kloofendal_48d_partly_cloudy_puresky_1k.hdr"
);

const cube = create.cube({
  rounded: true,
  segments: 16,
  option: {
    color: 0xffffff,
    metalness: 0.9,
    roughness: 0.1,
  }
});

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