RainMeshDesc

RainMeshDescクラスは、雨のパーティクルエフェクトを表示するメッシュです。シェーダーベースのパーティクルシステムを使用して、リアルな降雨効果を作成します。

以下のプロパティに加えて、基底クラスの共通プロパティ（position、rotation、scale、matrix、matrixWorld、geodetic、visible）が利用できます。詳細は MeshDesc を参照してください。

Common Properties

position

Type: { x: number, y: number, z: number } | Vector3

Description: 雨のパーティクルエフェクトの中心位置をECEF座標系で指定します。geodeticToVector3関数を使用して緯度経度から変換できます。

Example:

import { geodeticToVector3 } from "@navaramap/three";

const position = geodeticToVector3({
  lat: 35.67564356091717,
  lng: 139.74511454748298,
  height: 10,
});

{
  position: position,
  rain: { ... }
}

visible

Type: boolean

Description: オブジェクトの表示/非表示を制御します。

Default: true

Example:

{
  visible: false,
  rain: { ... }
}

Rain Properties

particleCount

Type: number

Description: 雨滴のパーティクル数を指定します。

Default: 5000

Example:

{
  rain: {
    particleCount: 10000,
  }
}

speed

Type: number

Description: 雨滴の落下速度を指定します。

Default: 0.0015

Example:

{
  rain: {
    speed: 0.002,
  }
}

color

Type: number

Description: 雨滴の色。

Default: 0xffffff

Example:

import { Color } from "@navaramap/three";

{
  rain: {
    // Color から指定する場合は toHex() を使用
    color: new Color().setStyle("#aaaaff").toHex(),
  }
}

areaWidth

Type: number

Description: 降雨エリアの幅を指定します。

Default: 500

Example:

{
  rain: {
    areaWidth: 800,
  }
}

areaHeight

Type: number

Description: 降雨エリアの高さを指定します。

Default: 1000

Example:

{
  rain: {
    areaHeight: 1500,
  }
}

width

Type: number

Description: 個々の雨滴の幅を baseFov を基準として指定します。画面上のサイズはこの基準 fov に対して一定に保たれるため、実際の描画幅はカメラの現在の fov に応じてスケーリングされます。

Default: 2.0

Example:

{
  rain: {
    width: 5.0,
  }
}

height

Type: number

Description: 個々の雨滴の高さを指定します。

Default: 60

Example:

{
  rain: {
    height: 80,
  }
}

radius

Type: number

Description: 降雨エリアの半径を指定します。

Default: 10

Example:

{
  rain: {
    radius: 20,
  }
}

opacity

Type: number

Description: 雨滴の不透明度を指定します。

Default: 0.5

Example:

{
  rain: {
    opacity: 0.7,
  }
}

alphaMax

Type: number

Description: 光が当たる側の雨滴の最大アルファ値を指定します。

Default: 0.5

Example:

{
  rain: {
    alphaMax: 0.7,
  }
}

alphaMin

Type: number

Description: 影になる側の雨滴の最小アルファ値を指定します。

Default: 0.05

Example:

{
  rain: {
    alphaMin: 0.1,
  }
}

followCamera

Type: boolean

Description: メッシュがカメラに追従するかどうかを指定します。これにより、メッシュが無限に描画されているような効果が得られます。

Default: true

Example:

{
  rain: {
    followCamera: false,
  }
}

maxHeight

Type: number

Description: カメラの高さに応じて不透明度が比例して減少する最大高度を指定します。

Default: 3000

Example:

{
  rain: {
    maxHeight: 5000,
  }
}

baseFov

Type: number

Description: width と height を意図通りに見せるための基準視野角（度）です。雨滴の画面上のサイズはこの fov を基準に一定に保たれ、有効な PerspectiveCamera の fov が異なる場合、パーティクルサイズは tan(fov/2) / tan(baseFov/2) で再スケーリングされるため、ズームに関わらず想定した見え方を維持できます。

Default: 45

Example:

{
  rain: {
    baseFov: 60,
  }
}

Usage Examples

基本的な使い方

import ThreeView, { Color } from "@navaramap/three";
import { RainMeshDesc } from "@navaramap/three-default-descs";

const view = new ThreeView();
view.registerMesh("rain", RainMeshDesc);
await view.init();

// RainMeshDescを追加
const rainDesc = view.addMesh<RainMeshDesc>({
  rain: {
    particleCount: 5000,
    speed: 0.002,
    color: new Color().setStyle("#aaaaff").toHex(),
    areaWidth: 500,
    areaHeight: 1000,
    opacity: 0.6,
    followCamera: true,
  },
});

特定の位置に雨を配置

import ThreeView, { geodeticToVector3 } from "@navaramap/three";
import { RainMeshDesc } from "@navaramap/three-default-descs";

const view = new ThreeView({ animation: true });
view.registerMesh("rain", RainMeshDesc);
await view.init();

// 東京の位置を計算
const position = geodeticToVector3({
  lat: 35.67564356091717,
  lng: 139.74511454748298,
  height: 10,
});

// 位置を指定してRainMeshDescを追加
const rainDesc = view.addMesh<RainMeshDesc>({
  visible: true,
  position: position,
  rain: {
    particleCount: 5000,
    speed: 0.0015,
    opacity: 0.5,
  },
});

// 表示/非表示を切り替え
rainDesc.visible = false;