gl-plot3d
This is the core module for 3D plotting in gl-vis. It is compatible with the following modules:
- gl-scatter3d: 3D scatter plots
- gl-line3d: 3D line plots
- gl-surface3d: 3D surface plots
- gl-mesh3d: General mesh drawing
This module (and this whole subecosystem) skew more towards the easy-side of the simple vs. easy tradeoff spectrum. It has lots of options, but has opinionated and reasonable defaults which should make it suitable for small projects like mesh viewers or knocking out one-off data visualizations. If you want more precise, low level control, check out stack.gl.
Examples
Scatter plot
var createScene = createScenevar createCamera = createCameravar createScatter = var bunny = var scene = var scatter = scene
Line plot
var createScene = createScenevar createLine = var scene = var points = forvar t = 0; t< 1000; ++t var theta = MathPI * t / 2000 points var linePlot = scene
Surfaces
var createScene = createScenevar createSurfacePlot = var ndarray = var fill = var diric = var scene = var field = var surface = scene
Parametric surfaces
var createScene = createScenevar createSurface = var ndarray = var scene = var size = 64var coords = forvar i=0; i<=2*size; ++i var theta = MathPI * i - size / size forvar j=0; j<=2*size; ++j var phi = MathPI * j - size / size coords0 coords1 coords2 var surface = scene
Meshes
var createScene = createScenevar createMesh = var bunny = var scene = var mesh = scene
Wireframe meshes
var createScene = createScenevar createMesh = var bunny = var sc = var scene = var mesh = scene
Install
npm i gl-plot3d
API
Scene Constructor
var scene = require('gl-plot3d').createScene(canvas[, options])
Creates a new scene object.
canvas
is an HTML canvas element into which the scene is inserted. (If not specified, a new fullscreen canvas is created and appended to the document)gl
is a WebGL context (If not specified, a new context is created)glOptions
is a set of options passed to the new WebGL context,gl
is not specifiedcamera
an object storing camera options. See orbiter for more detailsaxes
options passed to the axes object. See gl-axes for more detailsspikes
options passed to the axes spikes. See gl-spikes for more detailsclearColor
a length 4 array of color values for the clearfovy
the vertical field of viewzNear
near clip plane distancezFar
far clip plane distancepickRadius
the distance for mouse pickingautoBounds
a flag, if set automatically recalculates object bounds (defaulttrue
)autoScale
a flag, if set automatically scales the data set to unit length, preserving aspect ratio (defaulttrue
)autoCenter
a flag, if set translates data to the center of the coordinate system (defaulttrue
)clipToBounds
clip data points to remain within the axes boundssnapToData
snap selections to data pointsonselect
called whenever the currently highlighted data point changesonrender
called whenever the scene is drawn
Methods
scene.addObject(obj)
Adds a new object to the scene
scene.removeObject(obj)
Removes an object from the scene
scene.redraw()
Forces an immediate redraw of the scene and pick buffer. Useful if you are s
scene.dispose()
Destroys the scene and releases all associated resources. Also destroys all attached objects.
Properties
scene.selection
Information about the currently selected object in the scene.
scene.objects
A list of all objects in the scene.
scene.canvas
The canvas element associated with the scene
scene.gl
The WebGL context associated with the scene.
scene.axes
A reference to the axes object for the scene
scene.camera
A reference to the camera object for the scene
scene.bounds
Bounds for the scene
Camera Constructor
var camera = require('gl-plot3d').createCamera(element[, options])
3d-view-controls
for more info.
Please refer to https://www.npmjs.com/package/3d-view-controls https://github.com/mikolalysenko/3d-view-controls
License
(c) 2015 Mikola Lysenko. MIT License
Development support by plot.ly