auto center objects in 3d viewer

3dprint/beam.scad

+part="all";//[all]
 $fa=1/1;
 $fs=1/2;
 bissl=1/100;
   translate([-hd/2-offset-wall/2,height/4-wall,thickness/2])rotate([0,90,0])cylinder(d=hole,h=hd-wall);
   translate([-hd/2-offset-wall/2,height/2-wall/2,thickness/2])rotate([0,90,0])cylinder(d=hole,h=hd-wall);
   translate([-hd/2-offset-wall/2,height*3/4,thickness/2])rotate([0,90,0])cylinder(d=hole,h=hd-wall);
-}
+}

docs/src/3dprint.md

 
 **TODO** work in progress
 
+## Beam
+
+{{#include inc_beam_all.stl.md}}
+
+[Direct link to this file](./stl/beam_all.stl).
+
 ## Actuator All
 
 {{#include inc_actuator_all.stl.md}}
 
+[Direct link to this file](./stl/actuator_all.stl).
+
 ## Actuator Cap
 
 {{#include inc_actuator_cap.stl.md}}
 
+[Direct link to this file](./stl/actuator_cap.stl).
+
 ## Actuator Hammer
 
 {{#include inc_actuator_hammer.stl.md}}
 
+[Direct link to this file](./stl/actuator_hammer.stl).
+
 ## Actuator Spool
 
 {{#include inc_actuator_spool.stl.md}}
 
+[Direct link to this file](./stl/actuator_spool.stl).
+
 ## Tamb Mount All Visualize
 
 {{#include inc_tamb_mount_all_visualize.stl.md}}
 
+[Direct link to this file](./stl/tamb_mount_all_visualize.stl).
+
 ## Tamb Mount Inner
 
 {{#include inc_tamb_mount_inner.stl.md}}
 
+[Direct link to this file](./stl/tamb_mount_inner.stl).
+
 ## Tamb Mount Outer
 
 {{#include inc_tamb_mount_outer.stl.md}}
 
+[Direct link to this file](./stl/tamb_mount_outer.stl).
+
 ## Enclosure Bottom
 
 {{#include inc_enclosure_bottom.stl.md}}
 
+[Direct link to this file](./stl/enclosure_bottom.stl).
+
 ## Enclosure Top
 
 {{#include inc_enclosure_top.stl.md}}
 
+[Direct link to this file](./stl/enclosure_top.stl).
+
 ## Enclosure Faceplate
 
 {{#include inc_enclosure_faceplate.stl.md}}
+
+[Direct link to this file](./stl/enclosure_faceplate.stl).

docs/src/js/3d.js

 import { VRMLLoader } from 'three/addons/loaders/VRMLLoader.js';
 
 // https://wejn.org/2020/12/cracking-the-threejs-object-fitting-nut/
-function fitCameraToCenteredObject(camera, object, offset, orbitControls, yOffset) {
+function fitCameraToObject(camera, object, offset, orbitControls, yOffset) {
     const boundingBox = new THREE.Box3();
     boundingBox.setFromObject( object );
 
+    var middle = new THREE.Vector3();
+    boundingBox.getCenter(middle);
+
     var size = new THREE.Vector3();
     boundingBox.getSize(size);
 
     // offset the camera, if desired (to avoid filling the whole canvas)
     if( offset !== undefined && offset !== 0 ) cameraZ *= offset;
 
-    camera.position.set( 0, yOffset * cameraZ, cameraZ );
+    camera.target = middle;
+    camera.position.set( middle.x, middle.y + yOffset * cameraZ, middle.z + cameraZ );
 
     // set the far plane of the camera so that it easily encompasses the whole object
     const minZ = boundingBox.min.z;
 
     if ( orbitControls !== undefined ) {
         // set camera to rotate around the center
-        orbitControls.target = new THREE.Vector3(0, 0, 0);
+        orbitControls.target = middle;
 
         // prevent camera from zooming out far enough to create far plane cutoff
         orbitControls.maxDistance = cameraToFarEdge * 2;
     const height = div_height;
 
     const scene = new THREE.Scene();
-    scene.add(new THREE.AxesHelper(1));
+    //scene.add(new THREE.AxesHelper(1));
 
     const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
 
             path,
             function (geometry) {
                 const mesh = new THREE.Mesh(geometry, material);
+                mesh.rotation.setFromVector3(new THREE.Vector3(-Math.PI / 2, 0, 0));
                 scene.add(mesh);
-                fitCameraToCenteredObject(camera, scene, 0, controls, 0);
+                fitCameraToObject(camera, scene, 0, controls, 0);
+                controls.update();
             },
             (xhr) => {
                 const s = (xhr.loaded / xhr.total) * 100 + '% loaded';
             path,
             function (object) {
                 scene.add(object);
-                fitCameraToCenteredObject(camera, scene, 0, controls, 0);
+                fitCameraToObject(camera, scene, 0, controls, 0);
+                controls.update();
             },
             (xhr) => {
                 const s = (xhr.loaded / xhr.total) * 100 + '% loaded';
     btn_rst.type = "button";
     btn_rst.value = "Reset Camera";
     btn_rst.addEventListener('click', function() {
-        fitCameraToCenteredObject(camera, scene, 0, controls, 0);
+        fitCameraToObject(camera, scene, 0, controls, 0);
+        controls.update();
     });
 
     const div_rst = document.createElement("div");

docs/src/pcb1_pcb.md

 
 ## DIY Version
 
+The DIY version is suitable for etching at home, it only needs the bottom copper layer.
+Be aware that there is one track on the top layer, for a safety diode that was added later.
+This connection should be done with a wire by hand.
+
 You can also view the [DIY layout as PDF](./plot/drumkit.kicad_pcb_diy.pdf).
 
 <script src="js/svg-pan-zoom.js" charset="UTF-8"></script>