Create Three.js 3d objects without div

[danielch02]

Current Situation

Right now, the only options to create or retrieve Three.js 3D objects are:

1. Using a "dummy" div placed off-screen

• This dummy element is supplied as a parameter alongside the parsed primitive object.
• After rendering/redrawing, the objects can be obtained through the framePainter, which holds the Three.js scene object.

Simplified example from our implementation:

this.histogramGroup = new THREE.Group();
this.dummyEl = document.createElement("div");
this.dummyEl.id = "dummyDiv" + id;
document.body.appendChild(this.dummyEl);
draw("dummyDiv" + this.id, this.rootObj, opts).then(retValue => {
  this.histogramGroup.add(this.framePainter.scene);
});

2. Handling the case when no div is set

• I was able to create 3D objects with this approach, but it didn't really work reliably.

Key Questions

• Would it be possible to create a method or support functionality where the parameters are:

  • object → the object to draw
  • options → draw options

  …and the return value consists of either a Three.js scene or (preferably) a Three.js group.

• Could this work universally for TH1/TH2/TH3 objects?

  • If I'm correct, TH1/TH2 are rendered by d3.js by default.
  • But they can be rendered via Three.js either by setting drawWith: "lego" or by enabling mode3d: true on the painter.

• Would it be possible to support creating 3D objects for all JSROOT primitives?

[linev]

Would it be possible to support creating 3D objects for all JSROOT primitives?

No, many objects cannot be drawn in 3D

[danielch02]

Okay, that's expected. I assume, the only primitives that can be drawn are TH and TGrapghs (by using markers) objects, is that correct?

[linev]

TGraphs has only two coordinates - X and Y. Therefore only for special usecase like this:

https://root.cern/js/latest/examples.htm#tmultigraph_3d

But there are TGraph2D classes which can be plotted in 3d:

https://root.cern/js/latest/examples.htm#tgraph2d_err

And several others classes.

But lets try first implement code for histograms

[linev]

Recent master branch has build3d() function which can create three.js objects for several classes.
Main aim is support TH2 / TH3 classes, but few others should work.
I create demo which shows usage of these classes:

https://jsroot.gsi.de/dev/demo/build3d.htm

New is support of TLatex - which was used before only for axes labels in histograms.

If any important class is missing - please let me know.