easy-three
Eng日本語

create.ocean

create.ocean(texture : String, props : Object) : {mesh : Mesh, update : Function}

texture - テクスチャのURL。
props - 設定オブジェクト。
  • size (Array | Number) : サイズ (デフォルト : 100)。
  • geometry (Geometry) : ジオメトリ (デフォルト : null)。
  • sunDirection (Vector3) : 太陽の方向 (デフォルト : new THREE.Vector3(1, 1, 1))。
  • sunColor (Color) : 太陽の色 (デフォルト : 0xffffff)。
  • waterColor (Color) : 水の色 (デフォルト : 0x001e0f)。
  • distortionScale (Number) : 歪みのスケール (デフォルト : 3.7)。
  • textureSize (Array | Number) : テクスチャのサイズ (デフォルト : 512)。
  • fog (Boolean) : フォグ (デフォルト : false)。
  • position (Array) : 位置 (デフォルト : [0, 0, 0])。
  • rotation (Array) : 回転 (デフォルト : [-Math.PI / 2, 0, 0])。
  • autoAdd (Boolean) : 自動でシーンに追加 (デフォルト : true)。

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

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

sizeには十分大きな値を指定してください。

phi は太陽の方位角、theta は太陽の頂点からの角度を指定します。

戻り値はメッシュと、update関数です。
update関数は、deltaを引数に取ります。
update関数をanimateの中で呼ぶことで、海の動きを更新します。

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

テクスチャは、水面を表すためのノーマルマップを指定してください。
自作する場合は、Processingのnoise()などでパーリンノイズのグレースケール画像を作成し、NormalMap-Onlineなどのツールでノーマルマップに変換してください。
シームレスなノーマルマップにするには、GIMPのフィルターを使用すると便利です。

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

コードの例

海の作成

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

create.sky();

const cube = create.cube({ position: [0, 2, 0] });

const ocean = create.ocean("/easy-three/texture/water/NormalMap-1.jpg");

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

ジオメトリの変更

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

create.sky();

const ocean = create.ocean("/easy-three/texture/water/NormalMap-2.jpg", {
  geometry: new THREE.SphereGeometry(3, 32, 32),
});

animate(({ delta }) => {
  ocean.update(delta)
});