easy-three
Eng日本語

create.water

create.water(normalMap0 : String, normalMap1 : String, props : Object) : Mesh

normalMap0 - テクスチャのURL。
normalMap1 - テクスチャのURL。
props - 設定オブジェクト。
  • size (Array | Number) : サイズ (デフォルト : 1)。
  • geometry (Geometry) : ジオメトリ (デフォルト : null)。
  • color (Hex | String) : 色 (デフォルト : 0xffffff)。
  • scale (Number) : スケール (デフォルト : 4)。
  • flow (Array) : 流れ (デフォルト : [1, 1])。
  • textureSize (Array | Number) : テクスチャのサイズ (デフォルト : 512)。
  • position (Array) : 位置 (デフォルト : [0, 0, 0])。
  • rotation (Array) : 回転 (デフォルト : [-Math.PI / 2, 0, 0])。
  • autoAdd (Boolean) : 自動でシーンに追加 (デフォルト : true)。

水のようなオブジェクトを作成します。
海面を表現するには、create.ocean を使用してください。

環境マップを利用したほうが、よりリアルな水面を表現できます。
load.background で環境マップを読み込んでおくことをお勧めします。

通常、ジオメトリは PlaneGeometryを使用します。
sizeはこのジオメトリのサイズを指定します。
他のジオメトリを使用する場合は、geometryで指定してください。

水面を表現するノーマルマップは2つ必要です。
水面を表すノーマルマップの作成については、create.oceanを参照してください。

easy-three では、サンプルの水面テクスチャを2つ用意しています。
どちらもeasy-threeのオリジナル制作物であり、CC-0ライセンスで再配布を含め自由にお使いいただけます。

コードの例

水の作成

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

create.sky();

create.plane({
  size: 8,
  rotation: [-Math.PI / 2, 0, 0],
  option: {
    map: load.texture("/easy-three/texture/img/brick_diff_1k.jpg"),
  }
})

create.water(
  "/easy-three/texture/water/NormalMap-1.jpg",
  "/easy-three/texture/water/NormalMap-2.jpg",
  {
    size: 5,
    position: [0, 1, 0],
    scale: 0.4,
  }
);

animate();

ジオメトリの変更

const { camera, controls, create, animate, THREE } = init()
controls.connect();
camera.position.set(0, 4, -4);
create.ambientLight({ intensity: 1 });
create.directionalLight({ intensity: 1 });

create.sky();

create.plane({
  size: 14,
  rotation: [-Math.PI / 2, 0, 0],
  option: {
    map: load.texture("/easy-three/texture/img/brick_diff_1k.jpg"),
  }
})

create.water(
  "/easy-three/texture/water/NormalMap-1.jpg",
  "/easy-three/texture/water/NormalMap-2.jpg",
  {
    scale: 0.4,
    position: [0, 2.2, 0],
    geometry: new THREE.SphereGeometry(2, 32, 32),
  }
);

animate();