Simple 3D solids jsxgraph drawing scripts

[C Ban]

Hello,

I know that JSXGraph is not a 3D library, but I'm looking for some short JSXGraph scripts to draw simple 3D Solids (Sphere, cube, pyramid ...), as the https://ipesek.github.io/jsxgraphbook/1_introduction.html shows. A slider to move around or move the camera is an extra feature but could be great.

Do you have any bunch of scripts to do this kind of representation ?

Thanks a lot for your help

Christophe

[Alfred Wassermann]

At the JSXGraph conference 2021, Juha-Matti Huusko presented his wonderful 3D solutions, see

his talk at https://jsxgraph.org/conf2021/program/ .

Best wishes,

Alfred

[Cyrille Piatecki]

Sory Alfred I have tried to follow your advice and listen to the Juha-Matti Huusko which seems to have a wonderfull approach of 3d with Jsxgraph, but his level of english is very low(lower than mine which is not so great) and without his code or documentation  it is impossible to use it's approach. What can we do ?

[Alfred Wassermann]

Juhan-Matti is a great guy, he does phantastic work. We meanwhile started to cooperate: I will try to make his work available in the usual JSXGraph calling style. It will be a slow process, but here is a first glimpse.

The following code will display a cube:

            const board = JXG.JSXGraph.initBoard('jxgbox', {
                boundingbox: [-8, 8, 8, -8],
                keepaspectratio: false,
                axis: false
            });

            var view = new JXG.threeD.View3D(board), // Create 3D view
                len = 4,
                // 3D axes
                axes_attr = {strokeColor: 'black', highlight: false, strokeWidth: 1 },
                axes = board.create('axes3d', [-len, len, view], axes_attr),

                // Cube
                point_attr = {withLabel: false, size: 1},
                p = [], // Vertices of the cube
                faces = [];

            // Grid in xy plane
            board.create('grid3d', [[0, 0, 0], [1, 0, 0], [-6, 6], [0, 1, 0], [-5, 5], view], {
                strokeWidth: 1, strokeColor: '#9a9a9a', strokeOpacity: 0.6, highlight: false, layer: 2
            });

            p.push( board.create('point3d', [-1, -1, -1, view], point_attr) );
            p.push( board.create('point3d', [-1,  1, -1, view], point_attr) );
            p.push( board.create('point3d', [ 1,  1, -1, view], point_attr) );
            p.push( board.create('point3d', [ 1, -1, -1, view], point_attr) );

            p.push( board.create('point3d', [-1, -1,  1, view], point_attr) );
            p.push( board.create('point3d', [-1,  1,  1, view], point_attr) );
            p.push( board.create('point3d', [ 1,  1,  1, view], point_attr) );
            p.push( board.create('point3d', [ 1, -1,  1, view], point_attr) );

            faces.push( board.create('polygon', [p[0], p[1], p[2], p[3]]) );
            faces.push( board.create('polygon', [p[4], p[5], p[6], p[7]]) );
            faces.push( board.create('polygon', [p[0], p[1], p[5], p[4]]) );
            faces.push( board.create('polygon', [p[2], p[3], p[7], p[6]]) );

            faces.push( board.create('polygon', [p[0], p[3], p[7], p[4]]) );
            faces.push( board.create('polygon', [p[1], p[2], p[6], p[5]]) );

You can see it live at https://jsfiddle.net/832hetgj/1/. There are not many options yet, most settings are hard coded. The actual 3D code is not yet part of JSXGraph, it can be found in that jsfiddle.

Best wishes,

Alfred

[C Ban]

Dear Alfred,

We are in touch with Juhan-Matti ;-) and you're right he did an incredible job. I hope we find time to explore 3D in short time. Your work will help us a lot to implement 3D in a quick way and to make 3D simple objects. Thanks a lot, I will send you some pictures till we have implement some examples within pedagogical activities.

Best regards,

Chris