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

412 lines
12 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>
<head>
<title>3D polygon 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 polygon sampler</h1>
<!-- creating a polygon -->
<h2>Creating a polygon</h2>
<p>A polygon is created from a list of vertices. Each vertex is given either in coordinates or as a <a href="https://jsxgraph.org/docs/symbols/Point3D.html#constructor"><code>Point3D</code></a> element. The vertices that are created from coordinates are styled according to the <code>vertices</code> attribute. The edges of the polygon are styled according to the <code>borders</code> attribute.</p>
<p>To make the layout of the vertices easier to see, Ive set the views <code>depthOrderPoints</code> attribute to <code>true</code>.
<div id="polygon-homog-board" class="jxgbox" style="width:600px; height:600px"></div>
<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(
'polygon-homog-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},
depthOrderPoints: true
}
);
// create a list of individually styled Point3D elements to use as the
// vertices of a polygon
let vertices1 = [];
coords1 = [
[2, 1, 1],
[2, 2, 1],
[1, 2, 1],
[1, 2, 2],
[1, 1, 2],
[1, 1, 1]
];
colors1 = [
'orangered',
'gold',
'mediumseagreen',
'darkturquoise',
'purple',
'deeppink'
];
for (i in coords1) {
vertices1.push(view.create(
'point3d',
coords1[i],
{
withLabel: false,
size: 5,
strokeColor: 'none',
fillColor: 'white',
gradientSecondColor: colors1[i],
highlightStrokeWidth: 1,
highlightStrokeColor: '#777'
}
));
}
// create a polygon from a list of vertices (given as Point3D elements)
let polygon1 = view.create(
'polygon3d',
vertices1,
{
borders: {
strokeColor: '#777',
highlightStrokeColor: '#999'
}
}
);
// create a polygon from a list of vertices (given in coordinates)
let coords2 = [
[0.5, 1.5, 1.5],
[1.5, 1.5, 1.5],
[1.5, 2.5, 1.5],
[0.5, 2.5, 1.5]
];
let polygon2 = view.create(
'polygon3d',
coords2,
{
vertices: {
withLabel: false,
strokeColor: 'none',
fillColor: 'white',
gradientSecondColor: '#444',
highlightStrokeWidth: 1,
highlightStrokeColor: 'black'
},
borders: {
strokeColor: 'black',
highlightStrokeColor: 'gray'
}
}
);
}
</script>
<!-- mixing coordinates and Point3D elements -->
<h2>Mixing coordinates and <code>Point3D</code> elements</h2>
<p>This example shows how you can mix coordinates and <a href="https://jsxgraph.org/docs/symbols/Point3D.html#constructor"><code>Point3D</code></a> elements in a polygons vertex list.</p>
<div id="polygon-mixed-board" class="jxgbox" style="width:600px; height:600px"></div>
<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(
'polygon-mixed-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},
depthOrderPoints: true
}
);
// create a list of individually styled Point3D elements to use as some
// vertices of a polygon
let vertices1 = [];
coords1 = [
[2, 1, 1],
[2, 2, 1],
[1, 2, 1],
[1, 2, 2],
[1, 1, 2],
[1, 1, 1]
];
colors1 = [
'orangered',
'gold',
'mediumseagreen',
'darkturquoise',
'purple',
'deeppink'
];
for (i in coords1) {
vertices1.push(view.create(
'point3d',
coords1[i],
{
withLabel: false,
size: 5,
strokeColor: 'none',
fillColor: 'white',
gradientSecondColor: colors1[i],
highlightStrokeWidth: 1,
highlightStrokeColor: '#777'
}
));
}
// list the coordinates of the other vertices of the polygon
let coords2 = [
[0.5, 1.5, 1.5],
[1.5, 1.5, 1.5],
[1.5, 2.5, 1.5],
[0.5, 2.5, 1.5]
];
// create a polygon from a list of vertices (some given in coordinates, and
// others given as Point3D elements)
let polygon = view.create(
'polygon3d',
vertices1.slice(0, 3).concat(coords2, vertices1.slice(3, 6)),
{
vertices: {
withLabel: false,
strokeColor: 'none',
fillColor: 'white',
gradientSecondColor: '#444',
highlightStrokeWidth: 1,
highlightStrokeColor: 'black'
},
borders: {
strokeColor: 'black',
highlightStrokeColor: 'gray'
}
}
);
}
</script>
<!-- filling a polygon -->
<h2>Filling a polygon</h2>
<p>You can set the fill and opacity of a 3D polygon just like you would with a 2D polygon. I recommend only filling polygons that are guaranteed to stay planar. In this example, the polygons are always planar because theyre triangles.</p>
<div id="planar-fill-board" class="jxgbox" style="width:600px; height:600px"></div>
<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(
'planar-fill-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},
depthOrderPoints: true
}
);
// create a list of individually styled Point3D elements to use as polygon
// vertices
let vertices = [];
coords = [
[2, 0.5, 0.5],
[0.5, 2, 0.5],
[0.5, 0.5, 2],
[0.5, 1.25, 1.25],
[1.25, 0.5, 1.25],
[1.25, 1.25, 0.5]
];
colors = [
'#f08',
'#fb0',
'#0af',
'#4f0',
'#80f',
'#f60'
];
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 some filled triangles
view.create(
'polygon3d',
[vertices[0], vertices[5], vertices[4]],
{
fillColor: '#f85',
fillOpacity: 0.4,
borders: {strokeColor: 'none'}
}
);
view.create(
'polygon3d',
[vertices[1], vertices[3], vertices[5]],
{
fillColor: '#af0',
fillOpacity: 0.4,
borders: {strokeColor: 'none'}
}
);
view.create(
'polygon3d',
[vertices[2], vertices[3], vertices[4]],
{
fillColor: '#64f',
fillOpacity: 0.4,
borders: {strokeColor: 'none'}
}
);
view.create(
'polygon3d',
[vertices[3], vertices[4], vertices[5]],
{
fillColor: '#a87',
fillOpacity: 0.4,
borders: {strokeColor: 'none'}
}
);
}
</script>
<!-- the pitfalls of filling a non-planar polygon -->
<h2>The pitalls of filling a non-planar polygon</h2>
<p>Make the polygon below non-planar by dragging its vertices. This will probably make the fill look really weird from certain angles.</p>
<div id="non-planar-fill-board" class="jxgbox" style="width:600px; height:600px"></div>
<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(
'non-planar-fill-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},
depthOrderPoints: true
}
);
// create a list of individually styled Point3D elements to use as polygon
// vertices
let vertices = [];
coords = [
[2, 0.5, 0.5],
[0.5, 2, 0.5],
[0.5, 0.5, 2],
[0.5, 1.25, 1.25],
[1.25, 0.5, 1.25],
[1.25, 1.25, 0.5]
];
colors = [
'#f08',
'#fb0',
'#0af',
'#4f0',
'#80f',
'#f60'
];
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 a filled polygon that can become non-planar
view.create(
'polygon3d',
[vertices[0], vertices[5], vertices[1], vertices[3], vertices[2], vertices[4]],
{
fillColor: '#a87',
fillOpacity: 0.4,
borders: {strokeColor: 'none'}
}
);
}
</script>
</body>
</html>