RainMeshDesc

The RainMeshDesc class is a mesh descriptor that displays rain particle effects. It creates realistic rainfall effects using a shader-based particle system.

In addition to the properties below, the common properties from the base class (position, rotation, scale, matrix, matrixWorld, visible) are available. See MeshDesc for details.

Common Properties

position

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

Description: Specifies the center position of the rain particle effect in the ECEF coordinate system. You can convert from latitude/longitude using the geodeticToVector3 function.

Example:

import { geodeticToVector3, degreeToRadian, LLE } from "@navaramap/three";

const position = geodeticToVector3(
  new LLE(
    degreeToRadian(35.67564356091717),  // Latitude
    degreeToRadian(139.74511454748298), // Longitude
    10,                                  // Altitude
  ),
);

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

visible

Type: boolean

Description: Controls the visibility of the object.

Default: true

Example:

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

Rain Properties

particleCount

Type: number

Description: Specifies the number of raindrop particles.

Default: 5000

Example:

{
  rain: {
    particleCount: 10000,
  }
}

speed

Type: number

Description: Specifies the falling speed of the raindrops.

Default: 0.0015

Example:

{
  rain: {
    speed: 0.002,
  }
}

color

Type: number

Description: The color of the raindrops.

Default: 0xffffff

Example:

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

{
  rain: {
    // Use toHex() when specifying from a Color
    color: new Color().setStyle("#aaaaff").toHex(),
  }
}

areaWidth

Type: number

Description: Specifies the width of the rainfall area.

Default: 500

Example:

{
  rain: {
    areaWidth: 800,
  }
}

areaHeight

Type: number

Description: Specifies the height of the rainfall area.

Default: 1000

Example:

{
  rain: {
    areaHeight: 1500,
  }
}

width

Type: number

Description: Specifies the width of individual raindrops, measured against baseFov. The on-screen size is held constant relative to that reference fov, so the actual rendered width scales with the camera’s current fov.

Default: 2.0

Example:

{
  rain: {
    width: 5.0,
  }
}

height

Type: number

Description: Specifies the height of individual raindrops.

Default: 60

Example:

{
  rain: {
    height: 80,
  }
}

radius

Type: number

Description: Specifies the radius of the rainfall area.

Default: 10

Example:

{
  rain: {
    radius: 20,
  }
}

opacity

Type: number

Description: Specifies the opacity of the raindrops.

Default: 0.5

Example:

{
  rain: {
    opacity: 0.7,
  }
}

alphaMax

Type: number

Description: Specifies the maximum alpha value of raindrops on the lit side.

Default: 0.5

Example:

{
  rain: {
    alphaMax: 0.7,
  }
}

alphaMin

Type: number

Description: Specifies the minimum alpha value of raindrops on the shadowed side.

Default: 0.05

Example:

{
  rain: {
    alphaMin: 0.1,
  }
}

followCamera

Type: boolean

Description: Specifies whether the mesh follows the camera. This creates the effect of the mesh being rendered infinitely.

Default: true

Example:

{
  rain: {
    followCamera: false,
  }
}

maxHeight

Type: number

Description: Specifies the maximum altitude at which opacity decreases proportionally with camera height.

Default: 3000

Example:

{
  rain: {
    maxHeight: 5000,
  }
}

baseFov

Type: number

Description: Reference field of view in degrees at which width and height look as authored. The raindrop’s on-screen size is held constant relative to this fov: when the active perspective camera’s fov differs, particle sizes are rescaled by tan(fov/2) / tan(baseFov/2) so they keep their intended apparent size regardless of zoom.

Default: 45

Example:

{
  rain: {
    baseFov: 60,
  }
}

Usage Examples

Basic Usage

import ThreeView, { Color } from "@navaramap/three";
import { RainMeshDesc } from "@navaramap/three_default_descs";

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

// Add a 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,
  },
});

Placing Rain at a Specific Location

import ThreeView, { geodeticToVector3, degreeToRadian, LLE } from "@navaramap/three";
import { RainMeshDesc } from "@navaramap/three_default_descs";

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

// Calculate the position of Tokyo
const position = geodeticToVector3(
  new LLE(
    degreeToRadian(35.67564356091717),
    degreeToRadian(139.74511454748298),
    10,
  ),
);

// Add a RainMeshDesc at a specific position
const rainDesc = view.addMesh<RainMeshDesc>({
  visible: true,
  position: position,
  rain: {
    particleCount: 5000,
    speed: 0.0015,
    opacity: 0.5,
  },
});

// Toggle visibility
rainDesc.visible = false;