jsxgraph-3d-workshop/templates/circle-sampler.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>3D circle sampler</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>3D circle sampler</h1>

<p>A <a href="https://jsxgraph.org/docs/symbols/Circle3D.html"><code>Circle3D</code></a> element is created from a center, a normal vector, and a radius. The center can be given either in coordinates or as a <a href="https://jsxgraph.org/docs/symbols/Point3D.html#constructor"><code>Point3D</code></a>. The normal vector is given in coordinates.</p>
<p>There’s another <a href="https://github.com/jsxgraph/jsxgraph/blob/main/examples/circle3d.html"><code>Circle3D</code> example</a> in the <a href="https://github.com/jsxgraph/jsxgraph/tree/main/examples">examples folder</a> included with the source code.</p>
<div id="circle-board" class="jxgbox" style="width:600px; height:600px"></div>

<script type="text/javascript">
    // create a JSXGraph board and draw a 3D view on it
    let board = JXG.JSXGraph.initBoard(
        'circle-board',
        {
            boundingbox: [-8, 8, 8,-8],
            axis: false,
            showCopyright: false,
            showNavigation: false
        }
    );
    let view = board.create(
        'view3d',
        [[-4.5, -4.5], [9, 9],
        [[0, 3], [0, 3], [0, 3]]],
        {
            xPlaneRear: {fillOpacity: 0.2, gradient: null},
            yPlaneRear: {fillOpacity: 0.2, gradient: null},
            zPlaneRear: {fillOpacity: 0.2, gradient: null}
        }
    );
    
    // create a point
    let center = view.create(
        'point3d',
        [1.5, 1.5, 1.5],
        {
            withLabel: false,
            strokeWidth: 1,
            size: 5,
            strokeColor: '#300060',
            fillColor: 'white',
            gradientSecondColor: '#5000a0',
            highlightStrokeColor: '#300060'
       }
    );
    
    // create some circles that share a center
    let normals = [
        [1, 1, 1],
        [1, -1, 1],
        [-1, 1, 1],
        [-1, -1, 1]
    ];
    let colors = [
        '#f08',
        '#f60',
        '#fb0',
        '#80f'
    ];
    for (i in normals) {
        view.create(
            'circle3d',
            [center, normals[i], 1],
            {strokeColor: colors[i]}
        );
    }
</script>

</body>
</html>