<iframe 
    src="https://jsxgraph.org/share/iframe/3d-template" 
    style="border: 1px solid black; overflow: hidden; width: 550px; aspect-ratio: 55 / 65;" 
    name="JSXGraph example: 3D-Template" 
    allowfullscreen
></iframe>

<div id="board-0-wrapper" class="jxgbox-wrapper " style="width: 100%; ">
   <div id="board-0" class="jxgbox" style="aspect-ratio: 1 / 1; width: 100%;" data-ar="1 / 1"></div>
</div>

<script type = "text/javascript"> 
    /*
    This example is not licensed.
    */
    
    const BOARDID = 'board-0';

        // input data from LMS
    
        let input = {
            'coordinates':  { '-x': -3, '+x': 3, '-y': -3, '+y': 3, '-z': -3, '+z': 3 },
            'view':         { 'projection':  'central', 'trackball': false, 'controls': true, 'azimuth': 1, 'elevation': 0.15},
            'axis':         { 'x': true, 'y': true, 'z': true, 'position': 'center'},
            'planeRear':    { 'x': true, 'y': true, 'z': true, 'axis': false, 'border': 3, 'mesh': true, 'color': '#dddddd'},
            'planeFront':   { 'x': true, 'y': true, 'z': true, 'axis': false, 'border': 3, 'mesh': false, 'color': 'none'}
        };
    
        // JSXGraph board
    
        //JXG.Options.view3d.visible = true;
    
        let board = JXG.JSXGraph.initBoard(BOARDID, boardAttr());
    
        let view = board3D(board);
    
        let a = board.create('slider', [[9.5, -5], [9.5, 5], [-2, 1, 2]], { name: 'a', ...(sliderAttr()), ...(elAttr()) });
        let b = board.create('slider', [[8, -5], [8, 5], [-5, 1, 5]], { name: 'b', ...(sliderAttr()), ...(elAttr()) });
    
    
    
        let F = (x, y) => 0.2 * x * x * Math.sin(y) * a.Value();
        let fg = view.create('functiongraph3d', [ F, [-3, 3], [-3, 3]], { strokeWidth: 1, strokeOpacity: 0.75, stepsU: 50, stepsV: 50 });
    
        // JSXGraph elements
    
        let curveCircle = view.create('curve3d', [
            (t) => Math.sin(t),
            (t) => Math.cos(t),
            (t) => 0,
            [0, 2 * Math.PI]
        ], {
            strokeWidth: 2,
            dash: 2
        });
    
        let curveSin = view.create('curve3d', [
            (t) => Math.sin(t),
            (t) => Math.cos(t),
            (t) => t,
            [-1.5 * Math.PI, 1.5 * Math.PI]
        ], {
            strokeWidth: 4
        });
    
        // Controls
    
        function board3D(b) {
            let sliderA = sliderAttr();
    
            let elA = elAttr();
    
            let v = b.create('view3d', [[-5, -4], [10, 10], [[input['coordinates']['-x'], input['coordinates']['+x']], [input['coordinates']['-y'], input['coordinates']['+y']], [input['coordinates']['-z'], input['coordinates']['+z']]]],
                {
                    projection: input['view']['projection'],
                    trackball: { enabled: input['view']['projection'] },
    
                    // Main axes
                    axesPosition: input['axis']['position'],
                    xAxis: {visible: input['axis']['x'], strokeColor: '#888888', strokeWidth: 2},
                    yAxis: {visible: input['axis']['y'], strokeColor: '#888888', strokeWidth: 2},
                    zAxis: {visible: input['axis']['z'], strokeColor: '#888888', strokeWidth: 2},
    
                    // Planes
                    xPlaneRear: {
                        visible: input['planeRear']['x'] | input['planeRear']['border'],
                        strokeColor: '#dddddd',
                        strokeWidth: input['planeRear']['border'],
                        mesh3d: {visible: input['planeRear']['x'] & input['planeRear']['mesh']},
                        fillColor: input['planeRear']['x'] ? input['planeRear']['color'] : 'none'
                    },
                    yPlaneRear: {
                        visible: input['planeRear']['y'] | input['planeRear']['border'],
                        strokeColor: '#dddddd',
                        strokeWidth: input['planeRear']['border'],
                        mesh3d: {visible: input['planeRear']['y'] & input['planeRear']['mesh']},
                        fillColor: input['planeRear']['y'] ? input['planeRear']['color'] : 'none'
                    },
                    zPlaneRear: {
                        visible: input['planeRear']['z'] | input['planeRear']['border'],
                        strokeColor: '#dddddd',
                        strokeWidth: input['planeRear']['border'],
                        mesh3d: {visible: input['planeRear']['z'] & input['planeRear']['mesh']},
                        fillColor: input['planeRear']['z'] ? input['planeRear']['color'] : 'none'
                    },
                    xPlaneFront: {
                        visible: input['planeFront']['x'] | input['planeFront']['border'],
                        strokeColor: '#dddddd',
                        strokeWidth: input['planeFront']['border'],
                        mesh3d: {visible: input['planeFront']['x'] & input['planeFront']['mesh']},
                        fillColor: input['planeFront']['x'] ? input['planeFront']['color'] : 'none'
                    },
                    yPlaneFront: {
                        visible: input['planeFront']['y'] | input['planeFront']['border'],
                        strokeColor: '#dddddd',
                        strokeWidth: input['planeFront']['border'],
                        mesh3d: {visible: input['planeFront']['y'] & input['planeFront']['mesh']},
                        fillColor: input['planeFront']['y'] ? input['planeFront']['color'] : 'none'
                    },
                    zPlaneFront: {
                        visible: input['planeFront']['z'] | input['planeFront']['border'],
                        strokeColor: '#dddddd',
                        strokeWidth: input['planeFront']['border'],
                        mesh3d: {visible: input['planeFront']['z'] & input['planeFront']['mesh']},
                        fillColor: input['planeFront']['z'] ? input['planeFront']['color'] : 'none'
                    },
    
                    // Axes on planes
                    xPlaneRearYAxis: {visible: input['planeRear']['x'] & input['planeRear']['axis']},
                    xPlaneRearZAxis: {visible: input['planeRear']['x'] & input['planeRear']['axis']},
                    yPlaneRearXAxis: {visible: input['planeRear']['y'] & input['planeRear']['axis']},
                    yPlaneRearZAxis: {visible: input['planeRear']['y'] & input['planeRear']['axis']},
                    zPlaneRearXAxis: {visible: input['planeRear']['z'] & input['planeRear']['axis']},
                    zPlaneRearYAxis: {visible: input['planeRear']['z'] & input['planeRear']['axis']},
                    xPlaneFrontYAxis: {visible: input['planeFront']['x'] & input['planeFront']['axis']},
                    xPlaneFrontZAxis: {visible: input['planeFront']['x'] & input['planeFront']['axis']},
                    yPlaneFrontXAxis: {visible: input['planeFront']['y'] & input['planeFront']['axis']},
                    yPlaneFrontZAxis: {visible: input['planeFront']['y'] & input['planeFront']['axis']},
                    zPlaneFrontXAxis: {visible: input['planeFront']['z'] & input['planeFront']['axis']},
                    zPlaneFrontYAxis: {visible: input['planeFront']['z'] & input['planeFront']['axis']},
    
                    // Controls
                    bank: {slider: {...sliderA, ...{visible: input['view']['controls']}}},
                    az: {slider: {...sliderA, ...{visible: input['view']['controls']}}},
                    el: {slider: {...sliderA, ...elA, ...{visible: input['view']['controls']}}}
                }
            );
            v.el_slide.point1.setPosition(JXG.COORDS_BY_USER, [-9.5, -5]);
            v.el_slide.point2.setPosition(JXG.COORDS_BY_USER, [-9.5, 5]);
            v.el_slide.setMin(-Math.PI);
            v.el_slide.setMax(Math.PI);
            v.el_slide.setAttribute({ snapValues: [-Math.PI, -Math.PI / 2, 0, Math.PI / 2, Math.PI].concat(input['view']['elevation']) });
            v.el_slide.name = 'EL';
    
            v.az_slide.point1.setPosition(JXG.COORDS_BY_USER, [-5, -9.5]);
            v.az_slide.point2.setPosition(JXG.COORDS_BY_USER, [5, -9.5]);
            v.az_slide.setMin(0);
            v.az_slide.setMax(Math.PI * 2);
            v.az_slide.setAttribute({ snapValues: [0, Math.PI / 2, Math.PI, Math.PI * 1.5, Math.PI * 2].concat(input['view']['azimuth']) });
            v.az_slide.name = 'AZ';
    
            v.bank_slide.point1.setPosition(JXG.COORDS_BY_USER, [-5, 9.5]);
            v.bank_slide.point2.setPosition(JXG.COORDS_BY_USER, [5, 9.5]);
            v.bank_slide.setAttribute({ snapValues: [-Math.PI, -Math.PI / 2, 0, Math.PI / 2, Math.PI] });
            v.bank_slide.name = 'BK';
    
            v.setView(input['view']['azimuth'], input['view']['elevation'], 0); // setView(az, el, r)
    
            return v;
        }
    
        function boardAttr() {
            let bA = {
                boundingbox: [-10, 10, 10, -10],
                keepaspectratio: true,
                axis: true,
                showcopyright: false,
                shownavigation: false,
                movetarget: null,
                pan: {
                    enabled: false,
                    needTwoFingers: false,
                    needShift: true
                },
                zoom: {
                    enabled: false,
                }
            };
            return bA;
        }
        function sliderAttr() {
            let slA = {
                baseline: {
                    highlight: false,
                    strokeWidth: 16,
                    lineCap: 'round',
                    strokeColor: '#f3f3f3'
                },
                point1: {frozen: false, fixed: true},
                point2: {frozen: false, fixed: true},
                drawLabel: true,
                face: 'o',
                fillColor: '#aaaaaa',
                highlightFillColor: '#aaaaaa',
                highlightStrokeColor: '#aaaaaa',
                highlightStrokeWidth: 5,
                highline: {
                    highlight: false,
                    strokeWidth: 16,
                    lineCap: 'round',
                    strokeColor: '#dddddd'
                },
                label: {
                    strokeColor: '#aaaaaa',
                    anchorX: 'left',
                    anchorY: 'middle',
                    layer: 0,
                    cssStyle: 'border: 0px solid red; padding: 1px 8px 1px 8px; border-radius: 20px;background-color: #f2f2f2',
                },
                size: 7,
                snapValueDistance: 0.1,
                snapWidth: 0.001,
                strokeColor: '#009900',
                strokeWidth: 0,
                ticks: {
                    layer: 7,
                    digits: 2,
                    maxLabelLength: 2,
                    majorHeight: 0,
                    majorTickEndings: [1, 1],
                    strokeWidth: 4,
                    strokeColor: '#cccccc'
                },
                visible: true
            };
            return slA;
        }
    
        function elAttr() {
            let elA = {
                label: {
                    rotate: 90,
                    strokeColor: '#aaaaaa',
                    anchorX: 'left',
                    anchorY: 'middle',
                    layer: 0,
                    cssStyle: 'border: 0px solid red; padding: 1px 8px 1px 8px; border-radius: 20px;background-color: #f2f2f2; white-space: nowrap;'
                }
            }
            return elA;
        }
    
    
 </script> 

<jsxgraph width="100%" aspect-ratio="1 / 1" title="3D-Template" description="This construction was copied from JSXGraph examples database: BTW HERE SHOULD BE A GENERATED LINKuseGlobalJS="false">
   /*
   This example is not licensed.
   */
   
       // input data from LMS
   
       let input = {
           'coordinates':  { '-x': -3, '+x': 3, '-y': -3, '+y': 3, '-z': -3, '+z': 3 },
           'view':         { 'projection':  'central', 'trackball': false, 'controls': true, 'azimuth': 1, 'elevation': 0.15},
           'axis':         { 'x': true, 'y': true, 'z': true, 'position': 'center'},
           'planeRear':    { 'x': true, 'y': true, 'z': true, 'axis': false, 'border': 3, 'mesh': true, 'color': '#dddddd'},
           'planeFront':   { 'x': true, 'y': true, 'z': true, 'axis': false, 'border': 3, 'mesh': false, 'color': 'none'}
       };
   
       // JSXGraph board
   
       //JXG.Options.view3d.visible = true;
   
       let board = JXG.JSXGraph.initBoard(BOARDID, boardAttr());
   
       let view = board3D(board);
   
       let a = board.create('slider', [[9.5, -5], [9.5, 5], [-2, 1, 2]], { name: 'a', ...(sliderAttr()), ...(elAttr()) });
       let b = board.create('slider', [[8, -5], [8, 5], [-5, 1, 5]], { name: 'b', ...(sliderAttr()), ...(elAttr()) });
   
   
   
       let F = (x, y) => 0.2 * x * x * Math.sin(y) * a.Value();
       let fg = view.create('functiongraph3d', [ F, [-3, 3], [-3, 3]], { strokeWidth: 1, strokeOpacity: 0.75, stepsU: 50, stepsV: 50 });
   
       // JSXGraph elements
   
       let curveCircle = view.create('curve3d', [
           (t) => Math.sin(t),
           (t) => Math.cos(t),
           (t) => 0,
           [0, 2 * Math.PI]
       ], {
           strokeWidth: 2,
           dash: 2
       });
   
       let curveSin = view.create('curve3d', [
           (t) => Math.sin(t),
           (t) => Math.cos(t),
           (t) => t,
           [-1.5 * Math.PI, 1.5 * Math.PI]
       ], {
           strokeWidth: 4
       });
   
       // Controls
   
       function board3D(b) {
           let sliderA = sliderAttr();
   
           let elA = elAttr();
   
           let v = b.create('view3d', [[-5, -4], [10, 10], [[input['coordinates']['-x'], input['coordinates']['+x']], [input['coordinates']['-y'], input['coordinates']['+y']], [input['coordinates']['-z'], input['coordinates']['+z']]]],
               {
                   projection: input['view']['projection'],
                   trackball: { enabled: input['view']['projection'] },
   
                   // Main axes
                   axesPosition: input['axis']['position'],
                   xAxis: {visible: input['axis']['x'], strokeColor: '#888888', strokeWidth: 2},
                   yAxis: {visible: input['axis']['y'], strokeColor: '#888888', strokeWidth: 2},
                   zAxis: {visible: input['axis']['z'], strokeColor: '#888888', strokeWidth: 2},
   
                   // Planes
                   xPlaneRear: {
                       visible: input['planeRear']['x'] | input['planeRear']['border'],
                       strokeColor: '#dddddd',
                       strokeWidth: input['planeRear']['border'],
                       mesh3d: {visible: input['planeRear']['x'] & input['planeRear']['mesh']},
                       fillColor: input['planeRear']['x'] ? input['planeRear']['color'] : 'none'
                   },
                   yPlaneRear: {
                       visible: input['planeRear']['y'] | input['planeRear']['border'],
                       strokeColor: '#dddddd',
                       strokeWidth: input['planeRear']['border'],
                       mesh3d: {visible: input['planeRear']['y'] & input['planeRear']['mesh']},
                       fillColor: input['planeRear']['y'] ? input['planeRear']['color'] : 'none'
                   },
                   zPlaneRear: {
                       visible: input['planeRear']['z'] | input['planeRear']['border'],
                       strokeColor: '#dddddd',
                       strokeWidth: input['planeRear']['border'],
                       mesh3d: {visible: input['planeRear']['z'] & input['planeRear']['mesh']},
                       fillColor: input['planeRear']['z'] ? input['planeRear']['color'] : 'none'
                   },
                   xPlaneFront: {
                       visible: input['planeFront']['x'] | input['planeFront']['border'],
                       strokeColor: '#dddddd',
                       strokeWidth: input['planeFront']['border'],
                       mesh3d: {visible: input['planeFront']['x'] & input['planeFront']['mesh']},
                       fillColor: input['planeFront']['x'] ? input['planeFront']['color'] : 'none'
                   },
                   yPlaneFront: {
                       visible: input['planeFront']['y'] | input['planeFront']['border'],
                       strokeColor: '#dddddd',
                       strokeWidth: input['planeFront']['border'],
                       mesh3d: {visible: input['planeFront']['y'] & input['planeFront']['mesh']},
                       fillColor: input['planeFront']['y'] ? input['planeFront']['color'] : 'none'
                   },
                   zPlaneFront: {
                       visible: input['planeFront']['z'] | input['planeFront']['border'],
                       strokeColor: '#dddddd',
                       strokeWidth: input['planeFront']['border'],
                       mesh3d: {visible: input['planeFront']['z'] & input['planeFront']['mesh']},
                       fillColor: input['planeFront']['z'] ? input['planeFront']['color'] : 'none'
                   },
   
                   // Axes on planes
                   xPlaneRearYAxis: {visible: input['planeRear']['x'] & input['planeRear']['axis']},
                   xPlaneRearZAxis: {visible: input['planeRear']['x'] & input['planeRear']['axis']},
                   yPlaneRearXAxis: {visible: input['planeRear']['y'] & input['planeRear']['axis']},
                   yPlaneRearZAxis: {visible: input['planeRear']['y'] & input['planeRear']['axis']},
                   zPlaneRearXAxis: {visible: input['planeRear']['z'] & input['planeRear']['axis']},
                   zPlaneRearYAxis: {visible: input['planeRear']['z'] & input['planeRear']['axis']},
                   xPlaneFrontYAxis: {visible: input['planeFront']['x'] & input['planeFront']['axis']},
                   xPlaneFrontZAxis: {visible: input['planeFront']['x'] & input['planeFront']['axis']},
                   yPlaneFrontXAxis: {visible: input['planeFront']['y'] & input['planeFront']['axis']},
                   yPlaneFrontZAxis: {visible: input['planeFront']['y'] & input['planeFront']['axis']},
                   zPlaneFrontXAxis: {visible: input['planeFront']['z'] & input['planeFront']['axis']},
                   zPlaneFrontYAxis: {visible: input['planeFront']['z'] & input['planeFront']['axis']},
   
                   // Controls
                   bank: {slider: {...sliderA, ...{visible: input['view']['controls']}}},
                   az: {slider: {...sliderA, ...{visible: input['view']['controls']}}},
                   el: {slider: {...sliderA, ...elA, ...{visible: input['view']['controls']}}}
               }
           );
           v.el_slide.point1.setPosition(JXG.COORDS_BY_USER, [-9.5, -5]);
           v.el_slide.point2.setPosition(JXG.COORDS_BY_USER, [-9.5, 5]);
           v.el_slide.setMin(-Math.PI);
           v.el_slide.setMax(Math.PI);
           v.el_slide.setAttribute({ snapValues: [-Math.PI, -Math.PI / 2, 0, Math.PI / 2, Math.PI].concat(input['view']['elevation']) });
           v.el_slide.name = 'EL';
   
           v.az_slide.point1.setPosition(JXG.COORDS_BY_USER, [-5, -9.5]);
           v.az_slide.point2.setPosition(JXG.COORDS_BY_USER, [5, -9.5]);
           v.az_slide.setMin(0);
           v.az_slide.setMax(Math.PI * 2);
           v.az_slide.setAttribute({ snapValues: [0, Math.PI / 2, Math.PI, Math.PI * 1.5, Math.PI * 2].concat(input['view']['azimuth']) });
           v.az_slide.name = 'AZ';
   
           v.bank_slide.point1.setPosition(JXG.COORDS_BY_USER, [-5, 9.5]);
           v.bank_slide.point2.setPosition(JXG.COORDS_BY_USER, [5, 9.5]);
           v.bank_slide.setAttribute({ snapValues: [-Math.PI, -Math.PI / 2, 0, Math.PI / 2, Math.PI] });
           v.bank_slide.name = 'BK';
   
           v.setView(input['view']['azimuth'], input['view']['elevation'], 0); // setView(az, el, r)
   
           return v;
       }
   
       function boardAttr() {
           let bA = {
               boundingbox: [-10, 10, 10, -10],
               keepaspectratio: true,
               axis: true,
               showcopyright: false,
               shownavigation: false,
               movetarget: null,
               pan: {
                   enabled: false,
                   needTwoFingers: false,
                   needShift: true
               },
               zoom: {
                   enabled: false,
               }
           };
           return bA;
       }
       function sliderAttr() {
           let slA = {
               baseline: {
                   highlight: false,
                   strokeWidth: 16,
                   lineCap: 'round',
                   strokeColor: '#f3f3f3'
               },
               point1: {frozen: false, fixed: true},
               point2: {frozen: false, fixed: true},
               drawLabel: true,
               face: 'o',
               fillColor: '#aaaaaa',
               highlightFillColor: '#aaaaaa',
               highlightStrokeColor: '#aaaaaa',
               highlightStrokeWidth: 5,
               highline: {
                   highlight: false,
                   strokeWidth: 16,
                   lineCap: 'round',
                   strokeColor: '#dddddd'
               },
               label: {
                   strokeColor: '#aaaaaa',
                   anchorX: 'left',
                   anchorY: 'middle',
                   layer: 0,
                   cssStyle: 'border: 0px solid red; padding: 1px 8px 1px 8px; border-radius: 20px;background-color: #f2f2f2',
               },
               size: 7,
               snapValueDistance: 0.1,
               snapWidth: 0.001,
               strokeColor: '#009900',
               strokeWidth: 0,
               ticks: {
                   layer: 7,
                   digits: 2,
                   maxLabelLength: 2,
                   majorHeight: 0,
                   majorTickEndings: [1, 1],
                   strokeWidth: 4,
                   strokeColor: '#cccccc'
               },
               visible: true
           };
           return slA;
       }
   
       function elAttr() {
           let elA = {
               label: {
                   rotate: 90,
                   strokeColor: '#aaaaaa',
                   anchorX: 'left',
                   anchorY: 'middle',
                   layer: 0,
                   cssStyle: 'border: 0px solid red; padding: 1px 8px 1px 8px; border-radius: 20px;background-color: #f2f2f2; white-space: nowrap;'
               }
           }
           return elA;
       }
   
   
</jsxgraph>