Build with build3d support

Author: linev

build/jsroot.js

@@ -3,6 +3,7 @@
 ## Changes in dev
 1. RNtuple support, thanks to Kriti Mahajan (https://github.com/Krmjn09)
 1. Implement RTreeMapPainter to display RNTuple structure, thanks to Patryk Pilichowski (https://github.com/magnustymoteus)
+1. Implement `build3d` function for supported classes #368
 1. Let use hex colors in histogram draw options like "fill_00ff00" or "line_77aa1166"
 1. Let configure exact axis ticks position via draw option like "xticks:[-3,-1,1,3]"
 1. Support gStyle.fBarOffset for `TGraph` bar drawing

changes.md

@@ -4,7 +4,7 @@ const version_id = 'dev',
 
 /** @summary version date
   * @desc Release date in format day/month/year like '14/04/2022' */
-version_date = '25/09/2025',
+version_date = '29/09/2025',
 
 /** @summary version id and date
   * @desc Produced by concatenation of {@link version_id} and {@link version_date}

modules/core.mjs

@@ -562,7 +562,7 @@ async function build3d(obj, opt) {
       return Promise.reject(Error(`not able to create three.js for ${obj._typename}`));
 
    if (handle.build3d)
-      return handle.build3d().then(func => func(obj, opt))
+      return handle.build3d().then(func => func(obj, opt));
 
    return handle.class().then(cl => {
       if (!isFunc(cl?.build3d))
@@ -780,4 +780,4 @@ Object.assign(internals, { addStreamerInfosForPainter, addDrawFunc, setDefaultDr
 Object.assign(internals.jsroot, { draw, redraw, makeSVG, makeImage, addDrawFunc });
 
 export { addDrawFunc, getDrawHandle, canDrawHandle, getDrawSettings, setDefaultDrawOpt,
-         draw, redraw,cleanup, build3d, makeSVG, makeImage, assignPadPainterDraw };
+         draw, redraw, cleanup, build3d, makeSVG, makeImage, assignPadPainterDraw };

modules/draw.mjs

@@ -5481,15 +5481,14 @@ class TGeoPainter extends ObjectPainter {
       if (!obj)
          return null;
 
-      let opt = null;
+      let opt = sopt || {};
       if (isStr(sopt)) {
          const painter = new TGeoPainter(null, obj);
          painter.decodeOptions(sopt);
          opt = painter.ctrl;
          opt.numfaces = opt.maxfaces;
          opt.numnodes = opt.maxnodes;
-      } else
-         opt = sopt || {};
+      }
 
       if (!opt.numfaces)
          opt.numfaces = 100000;

modules/geom/TGeoPainter.mjs

@@ -1124,9 +1124,8 @@ class TGraph2DPainter extends ObjectPainter {
          res.Axis = 'lego2';
          if (res.Zscale)
             res.Axis += 'z';
-      } else {
+      } else
          res.Axis = opt;
-      }
 
       this.storeDrawOpt(opt);
    }
@@ -1599,8 +1598,8 @@ class TGraph2DPainter extends ObjectPainter {
          painter.getFramePainter = () => fp;
          painter.getMainPainter = () => hist_painter;
 
-         return painter.drawGraph2D().then(() => fp.create3DScene(-1, true))
-      })
+         return painter.drawGraph2D().then(() => fp.create3DScene(-1, true));
+      });
    }
 
    /** @summary draw TGraph2D object */

modules/hist/TGraph2DPainter.mjs

@@ -17,7 +17,6 @@ class TH1Painter extends TH1Painter2D {
 
       const fp = this.getFramePainter(), // who makes axis drawing
             is_main = this.isMainPainter(), // is main histogram
-            histo = this.getHisto(),
             o = this.getOptions();
 
       o.zmult = 1 + 2*gStyle.fHistTopMargin;

modules/hist/TH1Painter.mjs

@@ -1,4 +1,4 @@
-import { settings, constants, gStyle, clTMultiGraph, kNoZoom } from '../core.mjs';
+import { gStyle, clTMultiGraph, kNoZoom } from '../core.mjs';
 import { getMaterialArgs, THREE } from '../base/base3d.mjs';
 import { crete3DFrame, drawBinsLego, drawBinsError3D, drawBinsContour3D, drawBinsSurf3D } from './hist3d.mjs';
 import { TAxisPainter } from '../gpad/TAxisPainter.mjs';
@@ -244,7 +244,6 @@ class TH2Painter extends TH2Painter2D {
          drawBinsError3D(this);
       else
          drawBinsLego(this);
-
    }
 
    /** @summary draw TH2 object in 3D mode */
@@ -253,7 +252,6 @@ class TH2Painter extends TH2Painter2D {
 
       const fp = this.getFramePainter(), // who makes axis drawing
             is_main = this.isMainPainter(), // is main histogram
-            histo = this.getHisto(),
             o = this.getOptions();
 
       let pr = Promise.resolve(true), full_draw = true;
@@ -304,7 +302,7 @@ class TH2Painter extends TH2Painter2D {
       const painter = new TH2Painter(null, histo);
       painter.decodeOptions(opt);
 
-      const o = painter.getOptions(), logz = false;
+      const o = painter.getOptions();
       if (painter.isTH2Poly())
          o.Lego = 12;
       painter.scanContent();

modules/hist/TH2Painter.mjs

@@ -1,4 +1,4 @@
-import { gStyle, settings, kInspect, clTF1, clTF3, clTProfile3D, BIT, isFunc } from '../core.mjs';
+import { gStyle, kInspect, clTF1, clTF3, clTProfile3D, BIT, isFunc } from '../core.mjs';
 import { TRandom, floatToString } from '../base/BasePainter.mjs';
 import { ensureTCanvas } from '../gpad/TCanvasPainter.mjs';
 import { TAxisPainter } from '../gpad/TAxisPainter.mjs';
@@ -636,7 +636,6 @@ class TH3Painter extends THistPainter {
    /** @summary Redraw TH3 histogram */
    async redraw(reason) {
       const fp = this.getFramePainter(), // who makes axis and 3D drawing
-            histo = this.getHisto(),
             o = this.getOptions();
 
       let pr = Promise.resolve(true), full_draw = true;

modules/hist/TH3Painter.mjs

@@ -204,7 +204,7 @@ function build3dlatex(obj) {
       geom.computeBoundingBox();
       bb.expandByPoint(geom.boundingBox.max);
       bb.expandByPoint(geom.boundingBox.min);
-   })
+   });
 
    let width = bb.max.x - bb.min.x,
        height = bb.max.y - bb.min.y;
@@ -219,7 +219,8 @@ function build3dlatex(obj) {
    else if (valign === 2)
       height *= 0.5;
 
-   const materials = [],
+   const obj3d = new THREE.Object3D(),
+         materials = [],
          getMaterial = color => {
             if (!color)
                color = 'black';
@@ -228,11 +229,6 @@ function build3dlatex(obj) {
             return materials[color];
          };
 
-
-   const material0 = new THREE.MeshBasicMaterial(getMaterialArgs(handle.color || 'black', { vertexColors: false }));
-
-   const obj3d = new THREE.Object3D();
-
    arr3d.forEach(geom => {
       geom.translate(-width, -height, 0);
       obj3d.add(new THREE.Mesh(geom, getMaterial(geom._fill || handle.color)));