jsxgraph-3d-workshop/templates/circle-sampler.html
2024-10-22 01:19:56 -07:00

80 lines
2.5 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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>
<a href="../">↩ Back to index</a>
<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>Theres 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>