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