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 },
    ];
}