Full support for Tetrahedron, Dodecahedron Icosahedron, Octahedron, Polyhedron

[axkr]

Can you add full support for Cylinder, Tetrahedron, Dodecahedron, Icosahedron, Octahedron, Polyhedron, ...?

Or describe a way for getting this things displayed with some preprocessing steps?

[asukaminato0721]

There is a huge switch case in the code.

for example, if you want to impl Cylinder :

			case 'Cylinder':{
        /**
         * [
              "Cylinder",
              [
              "List",
                  [ "List",      1.0,      2.0,     3.0       ],
                  [ "List",      4.0,      5.0,     6.0       ]
              ],
              7.0
          ]
         */
        // this line extract https://reference.wolfram.com/language/ref/Cylinder.html the parms.
        const [[ _,[__,x1,y1,z1],[___,x2,y2,z2]], r=1] = func.args; 
		// then make a Cylinder https://threejs.org/docs/#api/en/geometries/CylinderGeometry
        const geometry = new THREE.CylinderGeometry( r, r, ....... ); 
        const material = new THREE.MeshBasicMaterial( {color: 0xffff00} );
        // then translate it. https://threejs.org/docs/#api/en/core/BufferGeometry.translate
        geometry.translate(......)
        const cylinder = new THREE.Mesh( geometry, material );
        mesh.add( cylinder );
      }
      break;

fill the code, then it will work.

A simple example (just show the case)

Cylinder[{{1,2,3},{4,5,6}},7]  // Graphics3D
% //ExportString[#//N, "ExpressionJSON"]&

[axkr]

Thank you for your suggestion, but meanwhile we've switched to this project:

• https://github.com/Mathics3/mathics-threejs-backend
• https://mathics3.github.io/mathics-threejs-backend/primitives/cylinder

to implement Graphics3D in Symja:
https://github.com/axkr/symja_android_library/blob/master/symja_android_library/doc/functions/Graphics3D.md

[asukaminato0721]

Actually, I am looking for a way to add interactive 3d plot to the frontend for

https://github.com/njpipeorgan/wolfram-language-notebook

Since this has a wolfram backend, so the calculation needn't worry about. (But the dynamic part is hard.)

[JerryI]

Actually, I am looking for a way to add interactive 3d plot to the frontend for

https://github.com/njpipeorgan/wolfram-language-notebook

Since this has a wolfram backend, so the calculation needn't worry about. (But the dynamic part is hard.)

• Me too, actually :)

PS: Now I am rewriting the code in a way to make it modular omitting those ugly switch-case structure.

Also on the mentioned project there is a lack of InputForm view. like you can't copy the code from previously evaluated cell. Following the idea of Mathematica, all Graphics and matrix/table forms should be just a very powerful syntax sugar with some real editable expressions underneath.

[asukaminato0721]

Also on the mentioned project there is a lack of InputForm view. like you can't copy the code from previously evaluated cell. Following the idea of Mathematica, all Graphics and matrix/table forms should be just a very powerful syntax sugar with some real editable expressions underneath.

I think it will be hard. Since even the wolfram cloud can't do this 🤣

PS: Now I am rewriting the code in a way to make it modular omitting those ugly switch-case structure.

js now don't have pattern matching https://github.com/tc39/proposal-pattern-matching . And this ExpressJSON is S-expr, so I guess it could be written into something like

const [head, ...tail] = expr;
switch (head){
    case 'List':
        return list(...tail)
    ...
}

or even table driven

const List = (...) => {...};
const Rule = (...) => {...};
const o = {List, Rule, ...};
o[head](...tail)

[njpipeorgan]

Also on the mentioned project there is a lack of InputForm view. like you can't copy the code from previously evaluated cell. Following the idea of Mathematica, all Graphics and matrix/table forms should be just a very powerful syntax sugar with some real editable expressions underneath.

You can click the triple dots to the left of an output cell and choose "change presentation" then "text/plain" to get the InputForm. The InputForm is there to allow generating .nb files--or you can think of the html as the byproduct.

But being able to manipulate images or tables in the input cells probably requires a front end that is comparable to Mathematica itself (at least not within the VS Code notebook API), which is way beyond the scope.

[JerryI]

Also on the mentioned project there is a lack of InputForm view. like you can't copy the code from previously evaluated cell. Following the idea of Mathematica, all Graphics and matrix/table forms should be just a very powerful syntax sugar with some real editable expressions underneath.

You can click the triple dots to the left of an output cell and choose "change presentation" then "text/plain" to get the InputForm. The InputForm is there to allow generating .nb files--or you can think of the html as the byproduct.

But being able to manipulate images or tables in the input cells probably requires a front end that is comparable to Mathematica itself (at least not within the VS Code notebook API), which is way beyond the scope.

I will try to ask this guy to do this ;D

[JerryI]

There is a huge switch case in the code.

for example, if you want to impl Cylinder :

			case 'Cylinder':{
        /**
         * [
              "Cylinder",
              [
              "List",
                  [ "List",      1.0,      2.0,     3.0       ],
                  [ "List",      4.0,      5.0,     6.0       ]
              ],
              7.0
          ]
         */
        // this line extract https://reference.wolfram.com/language/ref/Cylinder.html the parms.
        const [[ _,[__,x1,y1,z1],[___,x2,y2,z2]], r=1] = func.args; 
		// then make a Cylinder https://threejs.org/docs/#api/en/geometries/CylinderGeometry
        const geometry = new THREE.CylinderGeometry( r, r, ....... ); 
        const material = new THREE.MeshBasicMaterial( {color: 0xffff00} );
        // then translate it. https://threejs.org/docs/#api/en/core/BufferGeometry.translate
        geometry.translate(......)
        const cylinder = new THREE.Mesh( geometry, material );
        mesh.add( cylinder );
      }
      break;

fill the code, then it will work.

A simple example (just show the case)

Cylinder[{{1,2,3},{4,5,6}},7]  // Graphics3D
% //ExportString[#//N, "ExpressionJSON"]&

now it is not that horrible. I switched to a proper modular structure

[JerryI]

Also on the mentioned project there is a lack of InputForm view. like you can't copy the code from previously evaluated cell. Following the idea of Mathematica, all Graphics and matrix/table forms should be just a very powerful syntax sugar with some real editable expressions underneath.

You can click the triple dots to the left of an output cell and choose "change presentation" then "text/plain" to get the InputForm. The InputForm is there to allow generating .nb files--or you can think of the html as the byproduct.
But being able to manipulate images or tables in the input cells probably requires a front end that is comparable to Mathematica itself (at least not within the VS Code notebook API), which is way beyond the scope.

I will try to ask this guy to do this ;D

Ok. It did work absolutely horrible with AI, in general it works well only for mb writing bootstrap templates (I tried. it is not bad). So, I came across a nice feature of CodeMirror6 called Decoration, which is suitable for this job to depict all FrontEnd objects (ofc now only Graphics3D is implemented). It looks kinda promising

repo

PS: pls, don't kill me for my js skills ;D

[asukaminato0721]

I meet Polyhedron.

geoInv = ((With[{x662 = #.#}, If[ x662 < 0.00000001, #, #/x662] ]) &);
cubes = Table[Cube[{x, y, z}, 0.8], {x, -3, 3}, {y, 0, 3}, {z, -3, 3}] /. Cube[{(0)..}, _] -> Nothing;
Graphics3D[{Cyan, cubes /. x_Cube -> CanonicalizePolyhedron[x] /. Polyhedron[pts_, g_] :> Polyhedron[geoInv /@ pts, g]}, Boxed -> False, PlotRange -> 0.4]

http://xahlee.info/math/geometric_inversion.html

read threejs's doc

but here is a problem.

[
				"Polyhedron",
				[
				"List",
                [   "List",	-0.14604810996563575,	1.7182130584192445e-2,	-0.14604810996563575],
                [	"List",	-0.1406926406926407,	2.1645021645021648e-2,	-0.18398268398268397],
                [	"List",	-0.1406926406926407,	-2.1645021645021648e-2,	-0.18398268398268397],
                [	"List",	-0.14604810996563575,	-1.7182130584192445e-2,	-0.14604810996563575],
                [	"List",	-0.18398268398268397,	2.1645021645021648e-2,	-0.1406926406926407],
                [	"List",	-0.19005847953216373,	2.9239766081871343e-2,	-0.19005847953216373],
                [	"List",	-0.19005847953216373,	-2.9239766081871343e-2,	-0.19005847953216373],
                [	"List",	-0.18398268398268397,	-2.1645021645021648e-2,	-0.1406926406926407]
				],
		[
			"List",
			  [	"List",	1,	2,	3,	4],
              [	"List",	5,	6,	2,	1],
              [	"List",	6,	7,	3,	2],
              [	"List",	7,	8,	4,	3],
              [	"List",	8,	5,	1,	4],
              [	"List",	8,	7,	6,	5]
		]
],

in mma's expressionjson, 4 points1 face.
in threejs, 3 points 1 face.

here is the funny result

at least they have the same color

the implementation.

core.Polyhedron = function(args, env) {
    const vertices = args[0]
    .flat(4)
    .filter(x=> typeof x === "number");
    console.log(vertices)
    const indicesOfFaces = args[1]
    .flat(4)
    .filter((x) => typeof x === "number")
    .map(x=>x-1);
    console.log( indicesOfFaces)
    const geometry = new THREE.PolyhedronGeometry( vertices, indicesOfFaces);
    var material = new THREE.MeshLambertMaterial({
      color:env.color,
      transparent:true,
      opacity:env.opacity,
      depthWrite: true
    });
    const mesh = new THREE.Mesh(geometry, material ,10,10);
    env.mesh.add(mesh);
    geometry.dispose();
    material.dispose();
}

[JerryI]

I meet Polyhedron.

geoInv = ((With[{x662 = #.#}, If[ x662 < 0.00000001, #, #/x662] ]) &);
cubes = Table[Cube[{x, y, z}, 0.8], {x, -3, 3}, {y, 0, 3}, {z, -3, 3}] /. Cube[{(0)..}, _] -> Nothing;
Graphics3D[{Cyan, cubes /. x_Cube -> CanonicalizePolyhedron[x] /. Polyhedron[pts_, g_] :> Polyhedron[geoInv /@ pts, g]}, Boxed -> False, PlotRange -> 0.4]

http://xahlee.info/math/geometric_inversion.html

read threejs's doc

but here is a problem.

Looks trippy. I like it :)
For the problem of 4points for the face, check the code of core.Polygon, it converts 4 points to two sets of 3 if this is a case. But the beauty of my implementation cannot be compared with yours.

[asukaminato0721]

I rewrite the code.

core.Polyhedron = function(args, env) {
    /**
     * @type {number[]}
     */
    const vertices = interpretate(args[0]).flat(4);
    /**
     * @type {number[][]}
     */
    const _indices = interpretate(args[1]).map(x=>x.map(i=>i-1));
    const indices = [];
    for(const i of _indices){
        indices.push(i[0],i[1],i[2], //
                     i[0],i[2],i[3] //
                    );
    }
    const geometry = new THREE.PolyhedronGeometry(vertices, indices);
    var material = new THREE.MeshLambertMaterial({
      color:env.color,
      transparent:true,
      opacity:env.opacity,
      depthWrite: true
    });
    const mesh = new THREE.Mesh(geometry, material);
    env.mesh.add(mesh);
    geometry.dispose();
    material.dispose();
}

better now. But then I decide to write a small test.

Polyhedron[
				{
                {   	-0.14604810996563575,	1.7182130584192445e-2,	-0.14604810996563575},
                {		-0.1406926406926407,	2.1645021645021648e-2,	-0.18398268398268397},
                {		-0.1406926406926407,	-2.1645021645021648e-2,	-0.18398268398268397},
                {		-0.14604810996563575,	-1.7182130584192445e-2,	-0.14604810996563575},
                {		-0.18398268398268397,	2.1645021645021648e-2,	-0.1406926406926407},
                {		-0.19005847953216373,	2.9239766081871343e-2,	-0.19005847953216373},
                {		-0.19005847953216373,	-2.9239766081871343e-2,	-0.19005847953216373},
                {		-0.18398268398268397,	-2.1645021645021648e-2,	-0.1406926406926407}
				},
		{
			
			  {		1,	2,	3,	4},
              {		5,	6,	2,	1},
              {		6,	7,	3,	2},
              {		7,	8,	4,	3},
              {		8,	5,	1,	4},
              {		8,	7,	6,	5}
		}
] // Graphics3D

to my surprise, this doesn't work. So now I don't know what to do. : (

but I made the example in the manual work now.

[JerryI]

ok. let me smoke in it

[JerryI]

Basically Polyhedron is an equivalent of

GraphicsComplex[verts, Polygon[indes]]

So, in a case of 4-vertises per face we can switch to the less optimized version

core.Polyhedron = function(args, env) {
  interpretate([ "GraphicsComplex", args[0], [ "Polygon", args[1]] ], env);
}

I check it works. But these is an odd effect, that it renders back sites instead of the front. But this is a problem of Polygon function

[asukaminato0721]

to my surprise, this doesn't work. So now I don't know what to do. : (

https://mathematica.stackexchange.com/questions/278706/

tldr: e -> *10^