User story: Double view with 3D view and interaction in 2D plane

Here is a prototype: control a 3D point from a 2D view: https://jsfiddle.net/6socbng5/

Code:

var bound = [-5, 5];

// 2D board
const board2d = JXG.JSXGraph.initBoard('jxgbox2d', { 
    boundingbox: [-5, 5, 5, -5], axis:true
});

// The point X/Y controls the x/y coordinates of the point in the 3D board
var xy = board2d.create('point', [1, 1], { name: 'X/Y', size: 5 });

// The slider z controls the z coordinate of the point in the 3D board
var z = board2d.create('slider', [[-3, -3], [3, -3], [bound[0], 0, bound[1]]], {name: 'Z'});

// 3D board
const board3d = JXG.JSXGraph.initBoard('jxgbox3d', { 
    boundingbox: [-8, 8, 8, -8], axis:false
});

// Connect the two boards
// Whenever board2d is updated, board3d is updated, too.
board2d.addChild(board3d);

// 3D view in board3d
var view = board3d.create('view3d',
                [[-6, -3], [8, 8],
                [bound, bound, bound]],
                {});

// Fixed 3D point, only be controlled by board2d
var p = view.create('point3d', [
                () => xy.X(),
                () => xy.Y(),
                () => z.Value()
            ], { name: '', fixed: true, size: 8 });

// Projections of point 3d to three bounding faces
var p_x = view.create('point3d', [
                () => bound[0],
                () => p.D3.Y(),
                () => p.D3.Z()
            ], { name: '', fixed: true, size: 3 });                
var p_y = view.create('point3d', [
                () => p.D3.X(),
                () => bound[0],
                () => p.D3.Z()
            ], { name: '', fixed: true, size: 3 });                
var p_z = view.create('point3d', [
                () => p.D3.X(),
                () => p.D3.Y(),
                () => bound[0]
            ], { name: '', fixed: true, size: 3 });        

// Segments to the projections
var line_attr = {
    strokeWidth: 1,
  dash: 1
};

board3d.create('segment', [p, p_x], line_attr);
board3d.create('segment', [p, p_y], line_attr);
board3d.create('segment', [p, p_z], line_attr);

board3d.update();

Best wishes, Alfred

IDIAMath / idiamath.github.io

User story: Double view with 3D view and interaction in 2D plane #2