134 lines
3.9 KiB
HTML
134 lines
3.9 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="en">
|
|||
|
|
<head>
|
|||
|
|
<title>Octahedron challenge</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>Octahedron challenge</h1>
|
|||
|
|
<p>Can you create something like this using <a href="https://jsxgraph.org/docs/symbols/Point3D.html#constructor"><code>Point3D</code></a> and <a href="https://jsxgraph.org/docs/symbols/Polygon3D.html#constructor"><code>Polygon3D</code></a> elements? Don’t worry about including the colors; they’re just to emphasize how the polygons fit together.</p>
|
|||
|
|
<p>The <code>create</code> call for <code>Polygon3D</code> isn’t documented, but you can look at the polygon sampler for examples.</p>
|
|||
|
|
<div id="octahedron-from-triangles" class="jxgbox" style="width:600px; height:600px"></div>
|
|||
|
|
|
|||
|
|
<!-- a solution to the octahedron challenge -->
|
|||
|
|
<script type="text/javascript">
|
|||
|
|
// to prevent variable name conflicts, we define variables locally using `let`
|
|||
|
|
// and put the code for each board in its own block
|
|||
|
|
{
|
|||
|
|
// create a JSXGraph board and draw a 3D view on it
|
|||
|
|
let board = JXG.JSXGraph.initBoard(
|
|||
|
|
'octahedron-from-triangles',
|
|||
|
|
{
|
|||
|
|
boundingbox: [-8, 8, 8,-8],
|
|||
|
|
axis: false,
|
|||
|
|
showCopyright: false,
|
|||
|
|
showNavigation: false
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
let view = board.create(
|
|||
|
|
'view3d',
|
|||
|
|
[[-4.5, -4.5], [9, 9],
|
|||
|
|
[[0, 4], [0, 4], [0, 4]]],
|
|||
|
|
{
|
|||
|
|
xPlaneRear: {fillOpacity: 0.2, gradient: null},
|
|||
|
|
yPlaneRear: {fillOpacity: 0.2, gradient: null},
|
|||
|
|
zPlaneRear: {fillOpacity: 0.2, gradient: null},
|
|||
|
|
depthOrderPoints: true
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
// create the vertices of the octahedron
|
|||
|
|
let vertices = [];
|
|||
|
|
coords = [
|
|||
|
|
[1, 2, 2],
|
|||
|
|
[3, 2, 2],
|
|||
|
|
[2, 1, 2],
|
|||
|
|
[2, 3, 2],
|
|||
|
|
[2, 2, 1],
|
|||
|
|
[2, 2, 3]
|
|||
|
|
];
|
|||
|
|
colors = [
|
|||
|
|
'#f08',
|
|||
|
|
'#4f0',
|
|||
|
|
'#f60',
|
|||
|
|
'#0af',
|
|||
|
|
'#40f',
|
|||
|
|
'#fb0'
|
|||
|
|
];
|
|||
|
|
for (i in coords) {
|
|||
|
|
vertices.push(view.create(
|
|||
|
|
'point3d',
|
|||
|
|
coords[i],
|
|||
|
|
{
|
|||
|
|
withLabel: false,
|
|||
|
|
size: 5,
|
|||
|
|
strokeColor: 'none',
|
|||
|
|
fillColor: 'white',
|
|||
|
|
gradientSecondColor: colors[i],
|
|||
|
|
highlightStrokeWidth: 1,
|
|||
|
|
highlightStrokeColor: '#777'
|
|||
|
|
}
|
|||
|
|
));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// create the faces of the octahedron
|
|||
|
|
view.create(
|
|||
|
|
'polygon3d',
|
|||
|
|
[vertices[0], vertices[2], vertices[5]],
|
|||
|
|
{
|
|||
|
|
fillColor: '#f85',
|
|||
|
|
fillOpacity: 0.2,
|
|||
|
|
borders: {
|
|||
|
|
strokeWidth: 2,
|
|||
|
|
strokeColor: '#f85',
|
|||
|
|
highlightStrokeColor: '#777'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
view.create(
|
|||
|
|
'polygon3d',
|
|||
|
|
[vertices[1], vertices[3], vertices[5]],
|
|||
|
|
{
|
|||
|
|
fillColor: '#af0',
|
|||
|
|
fillOpacity: 0.2,
|
|||
|
|
borders: {
|
|||
|
|
strokeWidth: 2,
|
|||
|
|
strokeColor: '#af0',
|
|||
|
|
highlightStrokeColor: '#777'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
view.create(
|
|||
|
|
'polygon3d',
|
|||
|
|
[vertices[0], vertices[3], vertices[4]],
|
|||
|
|
{
|
|||
|
|
fillColor: '#a0f',
|
|||
|
|
fillOpacity: 0.2,
|
|||
|
|
borders: {
|
|||
|
|
strokeWidth: 2,
|
|||
|
|
strokeColor: '#a0f',
|
|||
|
|
highlightStrokeColor: '#777'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
view.create(
|
|||
|
|
'polygon3d',
|
|||
|
|
[vertices[1], vertices[2], vertices[4]],
|
|||
|
|
{
|
|||
|
|
fillColor: '#a87',
|
|||
|
|
fillOpacity: 0.2,
|
|||
|
|
borders: {
|
|||
|
|
strokeWidth: 2,
|
|||
|
|
strokeColor: '#a87',
|
|||
|
|
highlightStrokeColor: '#777'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|