77 lines
2.5 KiB
HTML
77 lines
2.5 KiB
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>
|