demo/draw_geometry_stl.htm

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>Reading geometry and STL file</title>
      <link rel="shortcut icon" href="../img/RootIcon.ico"/>

      <script type="importmap">
        {
            "imports": {
               "three": "../modules/three.mjs"
            }
        }
      </script>

   </head>

   <body>
      <div id="drawing" style="width:800px; height:600px"></div>
   </body>

   <script type='module'>

      import { httpRequest, loadScript, draw } from '../modules/main.mjs';

      import { Mesh, MeshPhongMaterial } from 'three';

      import { STLLoader } from 'https://threejs.org/examples/jsm/loaders/STLLoader.js';

      const geom_file = 'https://root.cern/js/files/geom/evegeoshape.json.gz',
            stl_file = 'https://threejs.org/examples/models/stl/ascii/slotted_disk.stl';

      // get geometry object
      let obj = await httpRequest(geom_file, 'object');

      // draw object, also load three.js functionality
      let geo_painter = await draw('drawing', obj);

      // define global THREE handle requred by STLLoader.js
      // globalThis.THREE = Object.assign({}, THREE);

      // load extra three.js sources

      const loader = new STLLoader();
      loader.load(stl_file, geometry => {

         const material = new MeshPhongMaterial({ color: 0xff5533, specular: 0x111111, shininess: 200 });
         const mesh = new Mesh( geometry, material );

         mesh.position.set( 600, 0, 0 );
         mesh.rotation.set( 0, - Math.PI / 2, 0 );
         mesh.scale.set( 500, 500, 500 );

         mesh.castShadow = true;
         mesh.receiveShadow = true;

         // this is for JSROOT to mark as THREE.Mesh object
         mesh._typename = 'Mesh';

         geo_painter.drawExtras(mesh, 'stl');
      });

   </script>

</html>