Octahedron challenge

by fareycircles

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Octahedron challenge</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/jsxgraph/distrib/jsxgraph.css" />
    <script type="text/javascript" charset="UTF-8" src="https://cdn.jsdelivr.net/npm/jsxgraph/distrib/jsxgraphcore.js"></script>
</head>
<body>

<h1>Octahedron challenge</h1>
<p>Can you create something like this using <a href="https://jsxgraph.org/docs/symbols/Point3D.html#constructor"><code>Point3D</code></a> and <a href="https://jsxgraph.org/docs/symbols/Polygon3D.html#constructor"><code>Polygon3D</code></a> elements? Don’t worry about including the colors; they’re just to emphasize how the polygons fit together.</p>
<p>The <code>create</code> call for <code>Polygon3D</code> isn’t documented, but you can look at the polygon sampler for examples.</p>
<div id="octahedron-from-triangles" class="jxgbox" style="width:600px; height:600px"></div>

<!-- a solution to the octahedron challenge -->
<script type="text/javascript">
// to prevent variable name conflicts, we define variables locally using `let`
// and put the code for each board in its own block
{
    // create a JSXGraph board and draw a 3D view on it
    let board = JXG.JSXGraph.initBoard(
        'octahedron-from-triangles',
        {
            boundingbox: [-8, 8, 8,-8],
            axis: false,
            showCopyright: false,
            showNavigation: false
        }
    );
    let view = board.create(
        'view3d',
        [[-4.5, -4.5], [9, 9],
        [[0, 4], [0, 4], [0, 4]]],
        {
            xPlaneRear: {fillOpacity: 0.2, gradient: null},
            yPlaneRear: {fillOpacity: 0.2, gradient: null},
            zPlaneRear: {fillOpacity: 0.2, gradient: null},
            depthOrderPoints: true
        }
    );

    // create the vertices of the octahedron
    let vertices = [];
    coords = [
        [1, 2, 2],
        [3, 2, 2],
        [2, 1, 2],
        [2, 3, 2],
 ...