JSXGraph 3D planes

3D planes

		import JXG from '../../jsxgraph/src/index.js';

		(function () {
		    var board = JXG.JSXGraph.initBoard('jxgbox2a', {
		        boundingbox: [-8, 8, 8, -8],
		        keepaspectratio: false,
		        axis: false
		    });
		    var bound = [-5, 5];
		    var view = board.create('view3d',
		        [[-6, -3], [8, 8],
		        [bound, bound, bound]],
		        {});

		    var s = board.create('slider', [[-7, -6], [5, -6], [-3, 1, 4]], { name: 's' });


		    if (false) {
		        var v11 = [0, 1, 0],
		            v12 = [2, 1, 1],
		            v21 = [1, 0, () => s.Value()], // 0
		            v22 = [2, -1, () => s.Value()];

		        var plane1 = view.create('plane3d', [[1, -1, 1], v11, v12, [-1, 1], [-1, 1]], {
		            name: 'E1', layer: 15,
		            fillColor: 'red', strokeWidth: 1, strokeColor: '#888888', strokeOpacity: 0.6, 
		mesh3d: { visible: true }
		        });

		        var plane2 = view.create('plane3d', [[2, -1, 1], v21, v22, [-Infinity, Infinity], 
		[-Infinity, Infinity]], {
		            name: 'E2',
		            fillColor: 'blue', strokeWidth: 1, strokeColor: '#888888', strokeOpacity: 0.6, 
		mesh3d: { visible: false }
		        });

		        // Not yet working for finite flats
		        var p1 = view.create('point3d', [() => view.intersectionPlanePlane(plane1, plane2)[0]], 
		{ visible: false });
		        var p2 = view.create('point3d', [() => view.intersectionPlanePlane(plane1, plane2)[1]], 
		{ visible: false });
		        var li = view.create('line3d', [p1, p2], { strokeColor: '#666666' });
		    }

		    if (true) {
		        var v1 = [1, 0, () => s.Value()],
		            v2 = [2, -1, () => s.Value()];

		        var plane1 = view.create('plane3d', [
		            [2, -1, 1], // Point
		            v1, v2,     // Two directions
		            [-Infinity, Infinity],  // Range 1
		            [-Infinity, Infinity]   // Range 2
		        ], {
		            fillColor: 'blue', strokeWidth: 1, strokeColor: '#888888',
		            strokeOpacity: 0.6,
		        });

		        var plane2 = view.create('plane3d', [
		            [-1, 2, 0], // Point
		            [1, 2, 0], [0, 1, 1],   // Two directions
		            [-Infinity, Infinity],  // Range 1
		            [-Infinity, Infinity]   // Range 2
		        ], {
		            fillColor: 'red', strokeWidth: 1, strokeColor: '#888888',
		            strokeOpacity: 0.6
		        });

		        /*
		            var p1 = view.create('point3d', [() => view.intersectionPlanePlane(plane1, 
		plane2)[0]], { visible: false });
		            var p2 = view.create('point3d', [() => view.intersectionPlanePlane(plane1, 
		plane2)[1]], { visible: false });
		            var li = view.create('line3d', [p1, p2], {strokeColor: '#666666'});
		        */
		        var li = view.create('line3d', [
		            () => view.intersectionPlanePlane(plane1, plane2)[0],
		            () => view.intersectionPlanePlane(plane1, plane2)[1]
		        ], { strokeColor: '#666666' });

		    }


		})();