jsxgraph-3d-workshop/challenges/octahedron.html
2024-10-22 01:19:56 -07:00

137 lines
3.9 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>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>
<a href="../">↩ Back to index</a>
<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? Dont worry about including the colors; theyre just to emphasize how the polygons fit together.</p>
<p>The <code>create</code> call for <code>Polygon3D</code> isnt 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>