2024-10-14 07:25:12 +00:00
<!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 >
2024-10-22 08:19:56 +00:00
< a href = "../" > ↩ Back to index< / a >
2024-10-22 08:15:53 +00:00
2024-10-14 07:25:12 +00:00
< h1 > 3D intersection sampler< / h1 >
2024-10-21 23:31:15 +00:00
<!-- plane - plane -->
2024-10-14 07:25:12 +00:00
< h2 > Plane– < / h2 >
< p > This template is based on the < a href = "https://github.com/jsxgraph/jsxgraph/blob/main/examples/intersection_plane_plane.html" > plane– < / 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 >
< 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'
2024-10-21 23:31:15 +00:00
}
2024-10-14 07:25:12 +00:00
);
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 -->
2024-10-21 23:31:15 +00:00
< h2 > Plane– < / h2 >
< p > This template is based on the < a href = "https://github.com/jsxgraph/jsxgraph/blob/main/examples/intersection_plane_sphere.html" > plane– < / 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 >
2024-10-14 07:25:12 +00:00
< 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'
2024-10-21 23:31:15 +00:00
}
2024-10-14 07:25:12 +00:00
);
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 -->
2024-10-21 23:31:15 +00:00
< h2 > Sphere– < / h2 >
< p > This template is based on the < a href = "https://github.com/jsxgraph/jsxgraph/blob/main/examples/intersection_sphere_sphere.html" > sphere– < / 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 >
2024-10-14 07:25:12 +00:00
< 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 >
2024-10-21 23:31:15 +00:00
2024-10-14 07:25:12 +00:00
< / body >
< / html >
