mathics-threejs-backend

Welcome to the mathics-threejs-backend documentation!

You can use mathics-threejs-backend in 2 ways:

production — a stable release. To use either use the content-development network (CDN) or host the files in your own web-server:
- to use the CDN:
```
<script src="https://cdn.jsdelivr.net/npm/@mathicsorg/mathics-threejs-backend"></script> 
```
- to host the files yourself:
  1. clone this repository:
    git clone https://github.com/Mathics3/mathics-threejs-backend
  2. copy the file bundle/index.js to your project
  3. import the library from HTML:
    <script src="path-to-index.js"></script>
development — the latest changes in GitHub. To use this version you need to:
1. clone this repository:
```
git clone https://github.com/Mathics3/mathics-threejs-backend 
```
2. copy all files from the folder src to your project
3. import the library from JavaScript:
```
import drawGraphics3d from './path-to-index.js' 
```

The main function of mathics-threejs-backend is drawGraphics3d, takes the following arguments:

container (type: container)
data (type: object) — object with the following properties:
- autoRescale (type: bool) — whether the plot should be rescaled after spin. Default: true
- axes (type: object) — default: {}, object with the following properties:
  - hasaxes (type: bool|bool[3]) — default: false
  - ticks (type: [number[], number[], string[]][3]) — array containing the ticks’ information for, respectively, x, y and z axes. The ticks’ information is an array of three elements: big ticks’ 0-1 coordinates, small ticks’ 0-1 coordinates, big ticks’ labels. Default: []
  - ticks_style (type: color[3]) — array containing the ticks’ colors for, respectively, x, y and z axes. Default: [[0, 0, 0], [0, 0, 0], [0, 0, 0]] (all ticks are black)
- elements (type: element[] — array of primitives, default: []
- extent (type: object) — the size of the bounding box. This is optional, only use this if you don’t want the default behavior. This is an object with the following properties:
  - xmin (type: number)
  - ymin (type: number)
  - zmin (type: number)
  - xmax (type: number)
  - ymax (type: number)
  - zmax (type: number)
- lighting (type: element[]) — array of lights, default: []
- viewpoint (type: number[3]) — the normalized camera coordinate (normalized means that the coordinate is going to be scaled, e.g. [1, 1, 1] is the upper back right corner of the bounding box independently from its size). Default: [1.3, -2.4, 2]
- protocol (type: string) — protocol version (current is 1.3), if it isn’t compatible a warning is shown instead of the graphics. Only available in production version

Examples

drawGraphics3d( document.getElementById('graphics-container'), { axes: { hasaxes: true, ticks: [ [ // x ticks [0, 0.5, 1], // big ticks [0.05, 0.1, 0.15, 0.25, 0.3, 0.35, 0.45, 0.55, 0.65, 0.7, 0.75, 0.85, 0.9, 0.95], // small ticks ['0', '5', '10'] // big ticks labels ], [ // y ticks [0, 0.5, 1], // big ticks [0.05, 0.1, 0.15, 0.25, 0.3, 0.35, 0.45, 0.55, 0.65, 0.7, 0.75, 0.85, 0.9, 0.95], // small ticks ['0', '5', '10'] // big ticks labels ], [ // z ticks [0, 0.5, 1], // big ticks [0.05, 0.1, 0.15, 0.25, 0.3, 0.35, 0.45, 0.55, 0.65, 0.7, 0.75, 0.85, 0.9, 0.95], // small ticks ['0', '5', '10'] // big ticks labels ], ], ticks_style: [[1, 0, 0], [0, 1, 0], [0, 0, 1]] }, elements: [ { type: 'sphere', color: [1, 1, 1], coords: [ [[0.5, 0.5, 0.5]] ], radius: 0.5 } ], lighting: [ { type: 'ambient', color: [0.5, 0.5, 0.5] } ], viewpoint: [2, -4, 4], protocol: '1.3' } ); 

drawGraphics3d( document.getElementById('graphics-container'), { viewpoint: [2, -4, 4] } ); 