generate incs for 3d visualizers

.github/workflows/docs.yml

 
       - name: Install dependencies
         run: |
-          sudo add-apt-repository --yes ppa:kicad/kicad-7.0-releases
+          sudo add-apt-repository --yes ppa:kicad/kicad-8.0-releases
           sudo apt update
-          sudo apt install -y --install-recommends kicad pipx libfuse2 libegl1 poppler-utils
+          sudo apt install -y --install-recommends kicad pipx libfuse2 libegl1 poppler-utils openscad zip
 
       - name: Install latest mdbook
         run: |
       - name: Generate Plots
         run: pcb/generate_plot.sh
 
+      - name: Render STLs
+        run: 3dprint/generate_stls.sh
+
       - name: Build Book
         run: docs/generate_docs.sh build
 

.github/workflows/kicad.yml

 
       - name: Install dependencies
         run: |
-          sudo add-apt-repository --yes ppa:kicad/kicad-7.0-releases
+          sudo add-apt-repository --yes ppa:kicad/kicad-8.0-releases
           sudo apt update
           sudo apt install -y --install-recommends kicad
           sudo apt-get install -y zip

.github/workflows/scad.yml

+# SPDX-FileCopyrightText: 2024 Thomas Buck <thomas@xythobuz.de>
+# SPDX-License-Identifier: CERN-OHL-S-2.0+
+#
+#  ------------------------------------------------------------------------------
+# | Copyright (c) 2024 Thomas Buck <thomas@xythobuz.de>                          |
+# |                                                                              |
+# | This source describes Open Hardware and is licensed under the CERN-OHL-S v2  |
+# | or any later version.                                                        |
+# |                                                                              |
+# | You may redistribute and modify this source and make products using it under |
+# | the terms of the CERN-OHL-S v2 (https://ohwr.org/cern_ohl_s_v2.txt)          |
+# | or any later version.                                                        |
+# |                                                                              |
+# | This source is distributed WITHOUT ANY EXPRESS OR IMPLIED WARRANTY,          |
+# | INCLUDING OF MERCHANTABILITY, SATISFACTORY QUALITY AND FITNESS FOR A         |
+# | PARTICULAR PURPOSE. Please see the CERN-OHL-S v2 (or any later version)      |
+# | for applicable conditions.                                                   |
+# |                                                                              |
+# | Source location: https://git.xythobuz.de/thomas/drumkit                      |
+# |                                                                              |
+# | As per CERN-OHL-S v2 section 4, should You produce hardware based on this    |
+# | source, You must where practicable maintain the Source Location visible      |
+# | on the external case of the Gizmo or other products you make using this      |
+# | source.                                                                      |
+#  ------------------------------------------------------------------------------
+
 name: STLs
 
 # build for each push and pull request

docs/generate_docs.sh

 cp -r ../3dprint/stl src
 #echo
 
+INSTL=`ls ../3dprint/stl/*.stl`
+
 for IN in $INSCH
 do
     o="src/inc_$IN.md"
     echo
 done
 
+plot_3d() {
+    echo '<script type="importmap">' >> $1
+    echo '    {' >> $1
+    echo '        "imports": {' >> $1
+    echo '            "three": "https://cdn.jsdelivr.net/npm/three@0.163.0/build/three.module.js",' >> $1
+    echo '            "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.163.0/examples/jsm/"' >> $1
+    echo '        }' >> $1
+    echo '    }' >> $1
+    echo '</script>' >> $1
+    echo "<p>Status: \"<span id=\"3d_info_$2\">Preparing 3D model...</span>\"</p>" >> $1
+    echo "<div id=\"3d_viewer_$2\" style=\"width: 100%; height: 100%; background-color: white; border: 1px solid black;\"></div>" >> $1
+    echo '<script type="module">' >> $1
+    echo "    var info = document.getElementById(\"3d_info_$2\");" >> $1
+    echo "    var view = document.getElementById(\"3d_viewer_$2\");" >> $1
+    echo '    view.style.height = Math.floor(view.clientWidth * 0.707) + "px";' >> $1
+    echo '    import { init_3d } from "./js/3d.js";' >> $1
+    echo "    init_3d(\"$3\", view, info, view.clientWidth, view.clientHeight);" >> $1
+    echo '</script>' >> $1
+}
+
+for IN in $INPCB
+do
+    o="src/inc_$IN.md"
+    file="plot/$IN.wrl"
+    name=`echo $file | sed "s:plot/::g" | sed 's:.wrl::g'`
+    echo "Include for $IN at $o, $file, $name"
+    rm -rf $o
+
+    plot_3d $o $name $file
+    echo
+done
+
+for IN in $INSTL
+do
+    o=`echo $IN | sed "s:../3dprint/stl/:src/inc_:g" | sed "s:.stl:.stl.md:g"`
+    file=`echo $IN | sed "s:../3dprint/::g"`
+    name=`echo $file | sed "s:stl/::g" | sed 's:.stl::g'`
+    echo "Include for $IN at $o, $file, $name"
+    rm -rf $o
+
+    plot_3d $o $name $file
+    echo
+done
+
 echo "Generating docs"
 if [ "$1" = "serve" ] ; then
     mdbook serve --open

docs/src/3dprint.md

 
 **TODO** work in progress
 
-<script type="importmap">
-    {
-        "imports": {
-            "three": "https://cdn.jsdelivr.net/npm/three@0.163.0/build/three.module.js",
-            "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.163.0/examples/jsm/"
-        }
-    }
-</script>
-
 ## Actuator All
 
-<p>Status: "<span id="3d_info">Preparing 3D model...</span>"</p>
-<div id="3d_viewer" style="width: 100%; height: 100%; background-color: white; border: 1px solid black;"></div>
+{{#include inc_actuator_all.stl.md}}
+
+## Actuator Cap
 
-<script type="module">
-    var info = document.getElementById('3d_info');
-    var view = document.getElementById('3d_viewer');
-    view.style.height = Math.floor(view.clientWidth * 0.707) + "px";
+{{#include inc_actuator_cap.stl.md}}
 
-    import { init_3d } from "./js/3d.js";
-    init_3d('stl/actuator_all.stl', view, info, view.clientWidth, view.clientHeight);
-</script>
+## Actuator Hammer
 
-## Actuator Cap
+{{#include inc_actuator_hammer.stl.md}}
+
+## Actuator Spool
+
+{{#include inc_actuator_spool.stl.md}}
+
+## Tamb Mount All Visualize
+
+{{#include inc_tamb_mount_all_visualize.stl.md}}
+
+## Tamb Mount Inner
+
+{{#include inc_tamb_mount_inner.stl.md}}
+
+## Tamb Mount Outer
+
+{{#include inc_tamb_mount_outer.stl.md}}
+
+## Enclosure Bottom
+
+{{#include inc_enclosure_bottom.stl.md}}
+
+## Enclosure Top
 
-<p>Status: "<span id="3d_info2">Preparing 3D model...</span>"</p>
-<div id="3d_viewer2" style="width: 100%; height: 100%; background-color: white; border: 1px solid black;"></div>
+{{#include inc_enclosure_top.stl.md}}
 
-<script type="module">
-    var info = document.getElementById('3d_info2');
-    var view = document.getElementById('3d_viewer2');
-    view.style.height = Math.floor(view.clientWidth * 0.707) + "px";
+## Enclosure Faceplate
 
-    import { init_3d } from "./js/3d.js";
-    init_3d('stl/actuator_cap.stl', view, info, view.clientWidth, view.clientHeight);
-</script>
+{{#include inc_enclosure_faceplate.stl.md}}

docs/src/js/3d.js

+/*
+ * 3d.js
+ *
+ * Copyright (c) 2024 Thomas Buck (thomas@xythobuz.de)
+ */
+
 import * as THREE from 'three';
 import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 import { STLLoader } from 'three/addons/loaders/STLLoader.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 ) {
+    const boundingBox = new THREE.Box3();
+    boundingBox.setFromObject( object );
+
+    var size = new THREE.Vector3();
+    boundingBox.getSize(size);
+
+    // figure out how to fit the box in the view:
+    // 1. figure out horizontal FOV (on non-1.0 aspects)
+    // 2. figure out distance from the object in X and Y planes
+    // 3. select the max distance (to fit both sides in)
+    //
+    // The reason is as follows:
+    //
+    // Imagine a bounding box (BB) is centered at (0,0,0).
+    // Camera has vertical FOV (camera.fov) and horizontal FOV
+    // (camera.fov scaled by aspect, see fovh below)
+    //
+    // Therefore if you want to put the entire object into the field of view,
+    // you have to compute the distance as: z/2 (half of Z size of the BB
+    // protruding towards us) plus for both X and Y size of BB you have to
+    // figure out the distance created by the appropriate FOV.
+    //
+    // The FOV is always a triangle:
+    //
+    //  (size/2)
+    // +--------+
+    // |       /
+    // |      /
+    // |     /
+    // | F° /
+    // |   /
+    // |  /
+    // | /
+    // |/
+    //
+    // F° is half of respective FOV, so to compute the distance (the length
+    // of the straight line) one has to: `size/2 / Math.tan(F)`.
+    //
+    // FTR, from https://threejs.org/docs/#api/en/cameras/PerspectiveCamera
+    // the camera.fov is the vertical FOV.
+
+    const fov = camera.fov * ( Math.PI / 180 );
+    const fovh = 2*Math.atan(Math.tan(fov/2) * camera.aspect);
+    let dx = size.z / 2 + Math.abs( size.x / 2 / Math.tan( fovh / 2 ) );
+    let dy = size.z / 2 + Math.abs( size.y / 2 / Math.tan( fov / 2 ) );
+    let cameraZ = Math.max(dx, dy);
+
+    // offset the camera, if desired (to avoid filling the whole canvas)
+    if( offset !== undefined && offset !== 0 ) cameraZ *= offset;
+
+    camera.position.set( 0, 0, cameraZ );
+
+    // set the far plane of the camera so that it easily encompasses the whole object
+    const minZ = boundingBox.min.z;
+    const cameraToFarEdge = ( minZ < 0 ) ? -minZ + cameraZ : cameraZ - minZ;
+
+    camera.far = cameraToFarEdge * 3;
+    camera.updateProjectionMatrix();
+
+    if ( orbitControls !== undefined ) {
+        // set camera to rotate around the center
+        orbitControls.target = new THREE.Vector3(0, 0, 0);
+
+        // prevent camera from zooming out far enough to create far plane cutoff
+        orbitControls.maxDistance = cameraToFarEdge * 2;
+    }
+}
+
 export function init_3d(path, container, status, div_width, div_height) {
     const width = div_width;
     const height = div_height;
 
     container.appendChild( renderer.domElement );
 
-    const light = new THREE.DirectionalLight( 0xffffff, 0.5 );
-    light.position.set(0, 1, 0);
-    scene.add(light);
-
-    const light42 = new THREE.DirectionalLight( 0xffffff, 0.5 );
-    light42.position.set(1, 0, 0);
-    scene.add(light42);
-
-    const light23 = new THREE.DirectionalLight( 0xffffff, 0.5 );
-    light23.position.set(0, 0, 1);
-    scene.add(light23);
-
-    const lightb = new THREE.DirectionalLight( 0xffffff, 0.5 );
-    lightb.position.set(0, -1, 0);
-    scene.add(lightb);
-
-    const light42b = new THREE.DirectionalLight( 0xffffff, 0.5 );
-    light42b.position.set(-1, 0, 0);
-    scene.add(light42b);
-
-    const light23b = new THREE.DirectionalLight( 0xffffff, 0.5 );
-    light23b.position.set(0, 0, -1);
-    scene.add(light23b);
+    const controls = new OrbitControls( camera, renderer.domElement );
+    controls.enableDamping = true;
 
-    const light2 = new THREE.AmbientLight(0x101010);
-    light2.position.set(100, 100, 100);
-    scene.add(light2);
+    if (path.endsWith(".stl")) {
+        const light_amb = new THREE.AmbientLight(0x424242);
+        scene.add(light_amb);
+
+        for (const i of [1, -1]) {
+            for (const j of [0, 1, 2]) {
+                const light = new THREE.DirectionalLight(0xffffff, 0.5);
+                light.position.set(i * (j == 0 ? 1 : 0),
+                                   i * (j == 1 ? 1 : 0),
+                                   i * (j == 2 ? 1 : 0));
+                scene.add(light);
+            }
+        }
 
-    const material = new THREE.MeshStandardMaterial();
-    //material.roughness = 0.42;
+        const material = new THREE.MeshStandardMaterial();
+        //material.roughness = 0.75;
 
-    if (path.endsWith(".stl")) {
         const loader = new STLLoader();
         loader.load(
-            //'plot/actuator_all.stl',
             path,
             function (geometry) {
                 const mesh = new THREE.Mesh(geometry, material);
                 scene.add(mesh);
+                fitCameraToCenteredObject(camera, scene, 0, controls);
             },
             (xhr) => {
                 const s = (xhr.loaded / xhr.total) * 100 + '% loaded';
             }
         );
     } else if (path.endsWith(".wrl")) {
+        const light_amb = new THREE.AmbientLight(0xffffff);
+        scene.add(light_amb);
+
         const loader = new VRMLLoader();
         loader.load(
-            //'plot/drumkit.kicad_pcb.wrl',
-            //'plot/dispensy.wrl',
             path,
             function (object) {
                 scene.add(object);
-        });
+                fitCameraToCenteredObject(camera, scene, 0, controls);
+            },
+            (xhr) => {
+                const s = (xhr.loaded / xhr.total) * 100 + '% loaded';
+                console.log(s);
+                status.textContent = s;
+            },
+            (error) => {
+                console.log(error);
+                status.textContent = error;
+            }
+        );
     } else {
         const s = "error: unknown filetype for " + path;
         console.log(s);
         status.textContent = s;
     }
 
-    const controls = new OrbitControls( camera, renderer.domElement );
-    controls.enableDamping = true;
-
-    // https://wejn.org/2020/12/cracking-the-threejs-object-fitting-nut/
-    const fitCameraToCenteredObject = function (camera, object, offset, orbitControls ) {
-        const boundingBox = new THREE.Box3();
-        boundingBox.setFromObject( object );
-
-        var middle = new THREE.Vector3();
-        var size = new THREE.Vector3();
-        boundingBox.getSize(size);
-
-        // figure out how to fit the box in the view:
-        // 1. figure out horizontal FOV (on non-1.0 aspects)
-        // 2. figure out distance from the object in X and Y planes
-        // 3. select the max distance (to fit both sides in)
-        //
-        // The reason is as follows:
-        //
-        // Imagine a bounding box (BB) is centered at (0,0,0).
-        // Camera has vertical FOV (camera.fov) and horizontal FOV
-        // (camera.fov scaled by aspect, see fovh below)
-        //
-        // Therefore if you want to put the entire object into the field of view,
-        // you have to compute the distance as: z/2 (half of Z size of the BB
-        // protruding towards us) plus for both X and Y size of BB you have to
-        // figure out the distance created by the appropriate FOV.
-        //
-        // The FOV is always a triangle:
-        //
-        //  (size/2)
-        // +--------+
-        // |       /
-        // |      /
-        // |     /
-        // | F° /
-        // |   /
-        // |  /
-        // | /
-        // |/
-        //
-        // F° is half of respective FOV, so to compute the distance (the length
-        // of the straight line) one has to: `size/2 / Math.tan(F)`.
-        //
-        // FTR, from https://threejs.org/docs/#api/en/cameras/PerspectiveCamera
-        // the camera.fov is the vertical FOV.
-
-        const fov = camera.fov * ( Math.PI / 180 );
-        const fovh = 2*Math.atan(Math.tan(fov/2) * camera.aspect);
-        let dx = size.z / 2 + Math.abs( size.x / 2 / Math.tan( fovh / 2 ) );
-        let dy = size.z / 2 + Math.abs( size.y / 2 / Math.tan( fov / 2 ) );
-        let cameraZ = Math.max(dx, dy);
-
-        // offset the camera, if desired (to avoid filling the whole canvas)
-        if( offset !== undefined && offset !== 0 ) cameraZ *= offset;
-
-        camera.position.set( 0, 0, cameraZ );
-
-        // set the far plane of the camera so that it easily encompasses the whole object
-        const minZ = boundingBox.min.z;
-        const cameraToFarEdge = ( minZ < 0 ) ? -minZ + cameraZ : cameraZ - minZ;
-
-        camera.far = cameraToFarEdge * 3;
-        camera.updateProjectionMatrix();
-
-        if ( orbitControls !== undefined ) {
-            // set camera to rotate around the center
-            orbitControls.target = new THREE.Vector3(0, 0, 0);
-
-            // prevent camera from zooming out far enough to create far plane cutoff
-            orbitControls.maxDistance = cameraToFarEdge * 2;
-        }
-    };
-
-    //camera.position.z = 50;
-    fitCameraToCenteredObject(camera, scene, 0, controls)
+    camera.position.z = 50;
 
     function render() {
         renderer.render(scene, camera);

docs/src/pcb1_pcb.md

 
 ## 3D PCB Layout
 
-<p>Status: "<span id="3d_info">Preparing 3D model...</span>"</p>
-<div id="3d_viewer" style="width: 100%; height: 100%; background-color: white; border: 1px solid black;"></div>
-
-<script type="importmap">
-    {
-        "imports": {
-            "three": "https://cdn.jsdelivr.net/npm/three@0.163.0/build/three.module.js",
-            "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.163.0/examples/jsm/"
-        }
-    }
-</script>
-
-<script type="module">
-    var info = document.getElementById('3d_info');
-    var view = document.getElementById('3d_viewer');
-    view.style.height = Math.floor(view.clientWidth * 0.707) + "px";
-
-    import { init_3d } from "./js/3d.js";
-    init_3d('plot/drumkit.kicad_pcb.wrl', view, info, view.clientWidth, view.clientHeight);
-</script>
+{{#include inc_drumkit.kicad_pcb.md}}