Random example | JSXGraph share

2 min read Original article ↗

JSXGraph
JSXGraph share

// Define the id of your board in BOARDID

        var board = JXG.JSXGraph.initBoard(BOARDID, {
            boundingbox: [-10, 7, 6, -9],
            keepaspectratio: false,
            axis: false,
            pan: { enabled: false}
        });

        // Slider for rotations
        var alpha = board.create('slider', [[-7, -6], [2, -6], [0, 0, 2 * Math.PI]], { name: 'α' });
        var beta = board.create('slider', [[-7, -6.5], [2, -6.5], [0, 0, 2 * Math.PI]], { name: 'β' });
        var gamma = board.create('slider', [[-7, -7], [2, -7], [0, 0, 2 * Math.PI]], { name: 'γ' });

        // 3D view
        var bound = [-5, 5];
        var view = board.create('view3d',
            [[-6, -2], [8, 8],
            [bound, bound, bound]],
            {
                projection: 'parallel',
                trackball: { enabled: true },
                depthOrder: {
                    enabled: true
                },
                xPlaneRear: { visible: false },
                yPlaneRear: { visible: false }
            });

        // Cube
        var r = 2;
        var cube = view.create('polyhedron3d', [
            {
                a: [-r, -r, -r],
                b: [r, -r, -r],
                c: [r, r, -r],
                d: [-r, r, -r],
                e: [-r, -r, r],
                f: [r, -r, r],
                g: [r, r, r],
                h: [-r, r, r]
                },
                [
                    ['a', 'b', 'c', 'd'],
                    ['a', 'b', 'f', 'e'],
                    ['b', 'c', 'g', 'f'],
                    ['c', 'd', 'h', 'g'],
                    ['d', 'a', 'e', 'h'],
                    ['e', 'f', 'g', 'h']
                ]
            ], {
            fillColorArray: ['white', 'blue', 'red', 'green', 'orange', 'yellow'],
            fillOpacity: 0.9
        });

        // Add transformations
        var t1 = view.create('transform3d', [() => alpha.Value()], { type: 'rotateX' });
        var t2 = view.create('transform3d', [() => beta.Value()], { type: 'rotateY' });
        var t3 = view.create('transform3d', [() => gamma.Value()], { type: 'rotateZ' });
        cube.addTransform(cube, [t1, t2, t3]);