285 lines
8.3 KiB
HTML
285 lines
8.3 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="en">
|
|||
|
|
<head>
|
|||
|
|
<title>3D intersection 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 intersection sampler</h1>
|
|||
|
|
|
|||
|
|
<h2>Plane–plane</h2>
|
|||
|
|
<p>This template is based on the <a href="https://github.com/jsxgraph/jsxgraph/blob/main/examples/intersection_plane_plane.html">plane–plane intersection 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="plane-plane-board" class="jxgbox" style="width:600px; height:600px"></div>
|
|||
|
|
|
|||
|
|
<h2>Plane–sphere</h2>
|
|||
|
|
<p>This template is based on the <a href="https://github.com/jsxgraph/jsxgraph/blob/main/examples/intersection_plane_sphere.html">plane–sphere intersection 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="plane-sphere-board" class="jxgbox" style="width:600px; height:600px"></div>
|
|||
|
|
|
|||
|
|
<h2>Sphere–sphere</h2>
|
|||
|
|
<p>This template is based on the <a href="https://github.com/jsxgraph/jsxgraph/blob/main/examples/intersection_sphere_sphere.html">sphere–sphere intersection 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="sphere-sphere-board" class="jxgbox" style="width:600px; height:600px"></div>
|
|||
|
|
|
|||
|
|
<!-- plane-plane -->
|
|||
|
|
<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(
|
|||
|
|
'plane-plane-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 and two planes passing though it
|
|||
|
|
let basePoint = view.create(
|
|||
|
|
'point3d',
|
|||
|
|
[1, 1, 1],
|
|||
|
|
{
|
|||
|
|
withLabel: false,
|
|||
|
|
strokeWidth: 1,
|
|||
|
|
size: 5,
|
|||
|
|
strokeColor: '#300060',
|
|||
|
|
fillColor: 'white',
|
|||
|
|
gradientSecondColor: '#5000a0',
|
|||
|
|
highlightStrokeColor: '#300060'
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
let planeHoriz = view.create(
|
|||
|
|
'plane3d',
|
|||
|
|
[basePoint, [1, 0, 0], [0, 1, 0]],
|
|||
|
|
{
|
|||
|
|
strokeWidth: 1,
|
|||
|
|
strokeColor: '#0000ff',
|
|||
|
|
strokeOpacity: 0.5,
|
|||
|
|
fillColor: '#0000ff',
|
|||
|
|
fillOpacity: 0.1,
|
|||
|
|
gradient: null
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
let planeSloped = view.create(
|
|||
|
|
'plane3d',
|
|||
|
|
[basePoint, [-2, 1, 1], [1, -2, 1]],
|
|||
|
|
{
|
|||
|
|
strokeWidth: 1,
|
|||
|
|
strokeColor: '#00ff80',
|
|||
|
|
strokeOpacity: 0.5,
|
|||
|
|
fillColor: '#00ff80',
|
|||
|
|
fillOpacity: 0.1,
|
|||
|
|
gradient: null
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
// create the line where the two planes intersect
|
|||
|
|
let intersectionLine = view.create(
|
|||
|
|
'intersectionline3d',
|
|||
|
|
[planeHoriz, planeSloped],
|
|||
|
|
{
|
|||
|
|
strokeOpacity: 0.5,
|
|||
|
|
highlightStrokeColor: 'black',
|
|||
|
|
highlightStrokeOpacity: 0.5
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<!-- plane-sphere -->
|
|||
|
|
<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(
|
|||
|
|
'plane-sphere-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 plane
|
|||
|
|
let basePoint = view.create(
|
|||
|
|
'point3d',
|
|||
|
|
[4/3, 4/3, 4/3],
|
|||
|
|
{
|
|||
|
|
withLabel: false,
|
|||
|
|
strokeWidth: 1,
|
|||
|
|
size: 5,
|
|||
|
|
strokeColor: '#300060',
|
|||
|
|
fillColor: 'white',
|
|||
|
|
gradientSecondColor: '#5000a0',
|
|||
|
|
highlightStrokeColor: '#300060'
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
let plane = view.create(
|
|||
|
|
'plane3d',
|
|||
|
|
[basePoint, [-2, 1, 1], [1, -2, 1]],
|
|||
|
|
{
|
|||
|
|
strokeWidth: 1,
|
|||
|
|
strokeColor: '#00ff80',
|
|||
|
|
strokeOpacity: 0.5,
|
|||
|
|
fillColor: '#00ff80',
|
|||
|
|
fillOpacity: 0.1,
|
|||
|
|
gradient: null
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
// create a sphere
|
|||
|
|
let center = view.create(
|
|||
|
|
'point3d',
|
|||
|
|
[1.5, 1.5, 1.5],
|
|||
|
|
{
|
|||
|
|
withLabel: false,
|
|||
|
|
size: 5,
|
|||
|
|
strokeWidth: 1,
|
|||
|
|
strokeColor: '#600030',
|
|||
|
|
fillColor: 'white',
|
|||
|
|
gradientSecondColor: '#a00050',
|
|||
|
|
highlightStrokeColor: '#600030'
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
let sphere = view.create(
|
|||
|
|
'sphere3d',
|
|||
|
|
[center, 1],
|
|||
|
|
{
|
|||
|
|
strokeColor: '#0000ff',
|
|||
|
|
strokeOpacity: 0.5,
|
|||
|
|
gradient: 'radial',
|
|||
|
|
gradientSecondColor: '#0000ff',
|
|||
|
|
fillOpacity: 0.2,
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
// create the circle where the plane and the sphere intersect
|
|||
|
|
let ixnCircle = view.create(
|
|||
|
|
'intersectioncircle3d',
|
|||
|
|
[plane, sphere],
|
|||
|
|
{
|
|||
|
|
strokeColor: 'black',
|
|||
|
|
strokeOpacity: 0.5
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<!-- sphere-sphere -->
|
|||
|
|
<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(
|
|||
|
|
'sphere-sphere-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 two centers
|
|||
|
|
let center1 = view.create(
|
|||
|
|
'point3d',
|
|||
|
|
[1, 1.5, 1.5],
|
|||
|
|
{
|
|||
|
|
withLabel: false,
|
|||
|
|
size: 5,
|
|||
|
|
strokeWidth: 1,
|
|||
|
|
strokeColor: '#600030',
|
|||
|
|
fillColor: 'white',
|
|||
|
|
gradientSecondColor: '#a00050',
|
|||
|
|
highlightStrokeColor: '#600030'
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
let center2 = view.create(
|
|||
|
|
'point3d',
|
|||
|
|
[2, 1.5, 1.5],
|
|||
|
|
{
|
|||
|
|
withLabel: false,
|
|||
|
|
size: 5,
|
|||
|
|
strokeWidth: 1,
|
|||
|
|
strokeColor: '#600030',
|
|||
|
|
fillColor: 'white',
|
|||
|
|
gradientSecondColor: '#a00050',
|
|||
|
|
highlightStrokeColor: '#600030'
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
// create two spheres
|
|||
|
|
let sphere1 = view.create(
|
|||
|
|
'sphere3d',
|
|||
|
|
[center1, 0.75],
|
|||
|
|
{
|
|||
|
|
strokeColor: '#0000ff',
|
|||
|
|
strokeOpacity: 0.5,
|
|||
|
|
fillColor: 'white',
|
|||
|
|
fillOpacity: 0.2,
|
|||
|
|
gradientSecondColor: '#0000ff'
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
let sphere2 = view.create(
|
|||
|
|
'sphere3d',
|
|||
|
|
[center2, 0.75],
|
|||
|
|
{
|
|||
|
|
strokeColor: '#00ff80',
|
|||
|
|
strokeOpacity: 0.5,
|
|||
|
|
fillColor: 'white',
|
|||
|
|
fillOpacity: 0.2,
|
|||
|
|
gradientSecondColor: '#00ff80'
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
// create the circle where the spheres intersect
|
|||
|
|
let ixnCircle = view.create(
|
|||
|
|
'intersectioncircle3d',
|
|||
|
|
[sphere1, sphere2],
|
|||
|
|
{
|
|||
|
|
strokeColor: 'black',
|
|||
|
|
strokeOpacity: 0.5
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|