THREE Streamlines

Visualise three dimensional vector fields in browser using stream lines.

Uses ThreeJS/WebGL for 3D rendering.

Check out the examples:

• Basic (source)
• Viewer (source)

Quick start

import Streamlines from 'three-streamlines';

or

<script src="//unpkg.com/three-streamlines"></script>

then

const streamlines = new Streamlines(data, bounds, options);
scene.add(streamlines.object());

API reference

data

| Parameter | Description | | ------------ | ----------------------------------------------------------------- | | u | 3D array of x component of velocity, dims (y,x,z) | | v | 3D array of y component of velocity, dims (y,x,z) | | w | 3D array of z component of velocity, dims (y,x,z) | | x (optional) | 1D array of x coordinates (not required if spacing in grid fixed) | | y (optional) | 1D array of y coordinates (not required if spacing in grid fixed) | | z (optional) | 1D array of z coordinates (not required if spacing in grid fixed) |

{
    "u": [
            [
                [...],
                ...,
                [...]
            ]
            ,...,
            [
                [...],
                ...,
                [...]
            ]
        ],
    "v": [
            [
                [...],
                ...,
                [...]
            ]
            ,...,
            [
                [...],
                ...,
                [...]
            ]
        ],
    "w": [
            [
                [...],
                ...,
                [...]
            ]
            ,...,
            [
                [...],
                ...,
                [...]
            ]
        ],
    "x": [...],
    "y": [...],
    "z": [...],
}

bounds

| Parameter | Description | | --------- | ------------------------------------------------------------------ | | xMin | Min x coordinate (required if array of x coordinates not included) | | xMax | Max x coordinate (required if array of x coordinates not included) | | yMin | Min y coordinate (required if array of y coordinates not included) | | yMax | Max y coordinate (required if array of y coordinates not included) | | zMin | Min z coordinate (required if array of z coordinates not included) | | zMax | Max z coordinate (required if array of z coordinates not included) |

{
    "xMin": 0,
    "xMax": 1,
    "yMin": 0,
    "yMax": 1,
    "zMin": 0,
    "zMax": 1,
}

options

| Option | Description | Default | | ----------------- | --------------------------------------------------------- | -------- | | noParticles | Number of streams to be plotted | 10000 | | maxAge | Maximum age (number of animation timesteps) of any stream | 200 | | fadeOutPercentage | Percentage of stream to fade out | 0.1 | | individualColors | Number of individual colors in color ramp | 100 | | velocityFactor | Unitless velocity factor to speed up/ slow down streams | 0.1 | | min | Minimum value for color range | Data min | | max | Maximum value for color range | Data max | | nodata | Custom no data value | null | | colorSource | Use velocity magnitude or use data.m as color | false | | colors | Color range | {} |

{
    "noParticles": 10000,
    "maxAge": 200,
    "fadeOutPercentage": 0.1,
    "individualColors": 100,
    "velocityFactor": 0.1,
    "min": 0,
    "max": 0.1,
    "nodata": null,
    "colorSource": false,
    "colors": [
      { color: "#000000", point: 0.0 },
      { color: "#550088", point: 0.14285714285714285 },
      { color: "#0000ff", point: 0.2857142857142857 },
      { color: "#00ffff", point: 0.42857142857142855 },
      { color: "#00ff00", point: 0.5714285714285714 },
      { color: "#ffff00", point: 0.7142857142857143 },
      { color: "#ff8c00", point: 0.8571428571428571 },
      { color: "#ff0000", point: 1.0 },
    ];
}