refactoring functional rendering methods into a class with the exporter. enabled setting the colorscheme of the thumbnails

Author: kevinkhill

package.json

@@ -9,6 +9,7 @@
     "scad"
   ],
   "homepage": "https://www.npmjs.com/package/eleventy-plugin-scad",
+  "readme": "https://github.com/kevinkhill/eleventy-plugin-scad#readme",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/kevinkhill/eleventy-plugin-scad.git"
@@ -31,6 +32,7 @@
   ],
   "scripts": {
     "build": "tsdown",
+    "build:test": "pnpm clean:test && cd test/_11ty && eleventy --config=test.eleventy-config.js",
     "bump": "bumpp",
     "clean": "concurrently -c 'auto' 'npm:clean:*'",
     "clean:dist": "rm -rvf ./dist/*",
@@ -67,6 +69,7 @@
     "concurrently": "9.2.1",
     "rollup-plugin-copy": "3.5.0",
     "tempy": "^3.1.0",
+    "three": "^0.182.0",
     "tsdown": "0.11.13",
     "tsx": "4.20.6",
     "typescript": "5.9.3",
@@ -75,6 +78,5 @@
   "peerDependencies": {
     "@11ty/eleventy": "^3"
   },
-  "packageManager": "pnpm@10.22.0",
-  "readme": "https://github.com/kevinkhill/eleventy-plugin-scad#readme"
+  "packageManager": "pnpm@10.25.0"
 }

pnpm-lock.yaml

@@ -20,6 +20,8 @@ let renderer,
 	scene,
 	controls;
 
+const lights = { key: undefined, fill: undefined, rim: undefined };
+
 function frameObject(object, camera, controls, fitOffset = 1.2) {
 	const box = new THREE.Box3().setFromObject(object);
 	const size = box.getSize(new THREE.Vector3());
@@ -96,15 +98,6 @@ function setupPostProcessing({ strength, radius, threshold }) {
 	// composer.addPass(outputPass);
 }
 
-/**
- * Setup initial camera position & orbit controls.
- *
- * @param {Object} options - Configuration object for the initial camera position.
- * @param {number} options.x - The x-coordinate of the camera position.
- * @param {number} options.y - The y-coordinate of the camera position.
- * @param {number} options.z - The z-coordinate of the camera position.
- * @param {number} options.fov - The field of view of the camera
- */
 function setupCameraAndControls() {
 	const aspect = container.clientWidth / container.clientHeight;
 	const frustumSize = 100;
@@ -126,31 +119,23 @@ function setupCameraAndControls() {
 	// controls.enableDamping = true;
 }
 
-/**
- * Setup the initial spotlight position.
- *
- * @param {Object} options - Configuration object for the initial spotlight position.
- * @param {number} options.x - The x-coordinate of the spotlight position.
- * @param {number} options.y - The y-coordinate of the spotlight position.
- * @param {number} options.z - The z-coordinate of the spotlight position.
- */
-function setupScene({ x, y, z }) {
+function setupScene() {
 	scene = new THREE.Scene();
 
 	// Slight ambient so shadows aren’t pure black
 	scene.add(new THREE.AmbientLight(0xffffff, 0.25));
 
-	const key = new THREE.DirectionalLight(0xffffff, 1.2);
-	key.position.set(2, 3, 4);
-	scene.add(key);
+	lights.key = new THREE.DirectionalLight(0xffffff, 1.2);
+	lights.key.position.set(2, 3, 4);
+	scene.add(lights.key);
 
-	const fill = new THREE.DirectionalLight(0xffffff, 0.6);
-	fill.position.set(-3, 1, 2);
-	scene.add(fill);
+	lights.fill = new THREE.DirectionalLight(0xffffff, 0.6);
+	lights.fill.position.set(-3, 1, 2);
+	scene.add(lights.fill);
 
-	const rim = new THREE.DirectionalLight(0xffffff, 0.9);
-	rim.position.set(0, 3, -4);
-	scene.add(rim);
+	lights.rim = new THREE.DirectionalLight(0xffffff, 0.9);
+	lights.rim.position.set(0, 3, -4);
+	scene.add(lights.rim);
 }
 
 /**
@@ -212,45 +197,34 @@ function animate() {
 
 function setupGUI(initialState) {
 	const gui = new GUI();
-	// const cameraFolder = gui.addFolder("Camera");
-	// const lightingFolder = gui.addFolder("Lighting");
-	// const meshFolder = gui.addFolder("Mesh");
 	const bloomFolder = gui.addFolder("Bloom");
-	const { lightPos, bloomPass } = initialState;
-	const set = (target, key) => (value) => { target[key] = Number(value); };
+	const { bloomPass } = initialState;
 
 	// gui.onChange((event) => {
 	// 	console.log("Saving: %O", gui.save());
 	// });
 
-	// meshFolder.addColor(initialState.mesh, "color").onChange(console.log);
-	// lightingFolder.add(lightPos, "x", -500, 500, 1).onChange(set(spotLight.position, "x"));
-	// lightingFolder.add(lightPos, "y", -500, 500, 1).onChange(set(spotLight.position, "y"));
-	// lightingFolder.add(lightPos, "z", -500, 500, 1).onChange(set(spotLight.position, "z"));
-
-	bloomFolder.add(bloomPass, "radius", 0, 1, 0.1).onChange(set(bloomPass, "radius"));
-	bloomFolder.add(bloomPass, "strength", 0, 3, 0.1).onChange(set(bloomPass, "strength"));
-	bloomFolder.add(bloomPass, "threshold", 0, 1, 0.1).onChange(set(bloomPass, "threshold"));
+	bloomFolder.add(bloomPass, "radius", 0, 1, 0.1).onChange(v => {
+		bloomPass.radius = Number(v);
+	});
+	bloomFolder.add(bloomPass, "strength", 0, 3, 0.1).onChange(v => {
+		bloomPass.strength = Number(v);
+	});
+	bloomFolder.add(bloomPass, "threshold", 0, 1, 0.1).onChange(v => {
+		bloomPass.threshold = Number(v);
+	});
 }
 
 function init() {
 	const initialState = {
-		// mesh: {
-		// 	color: "#ab98fc"
-		// },
-		lightPos: {
-			x: 20,
-			y: 50,
-			z: 200
-		},
 		bloomPass: {
 			strength: 1,
 			radius: .5,
 			threshold: .5
 		}
 	};
 	setupRenderer();
-	setupScene(initialState.lightPos);
+	setupScene();
 	setupCameraAndControls();
 	setupPostProcessing(initialState.bloomPass);
 	setupGUI(initialState);

src/assets/scad.bloomRenderer.js

@@ -1,18 +1,18 @@
 import path from "node:path";
 import { bold, gray, green, red, reset } from "yoctocolors";
-import { cache, scadExporter } from "../core";
-import { DOT_SCAD, DOT_STL, PLUGIN_NAME, SCAD_EXT } from "../core/const";
 import {
 	createScadLogger,
 	createSilentLogger,
 	Debug,
 	exists,
 	resolveOpenSCAD,
 } from "../lib";
+import * as cache from "./cache";
+import { DOT_SCAD, DOT_STL, PLUGIN_NAME, SCAD_EXT } from "./const";
+import { OpenSCAD } from "./openscad";
 import type {
 	EleventyConfig,
 	EleventyDirs,
-	Files,
 	FullPageData,
 	ParsedPluginOptions,
 	ScadTemplateData,
@@ -107,25 +107,27 @@ export function addScadExtensionHandler(
 					const stlExists = exists(outFile);
 					const hashMatch = await cache.fileHashesMatch(inFile);
 
-					debug.extend("compile")("pre-generate: %O", {
-						inFile,
-						outFile,
-						projectRoot,
-						stlExists,
-						hashMatch,
-					});
-
 					if (!stlExists || !hashMatch) {
 						_log(
 							`${reset("Writing")} ${data.stlFile} ${gray(`from ${inputPath}`)}`,
 						);
 
-						const exportResult = await scadExporter(String(resolvedScadBin), {
-							cwd: projectRoot,
-							in: inFile,
-							out: outFile,
+						debug.extend("compile")("pre-generate: %O", {
+							inFile,
+							outFile,
+							projectRoot,
+							stlExists,
+							hashMatch,
 						});
 
+						const openscad = new OpenSCAD(projectRoot);
+
+						openscad.setInput(inFile);
+						openscad.setOutput(outFile);
+						openscad.setColorScheme(opts.thumbnailColorScheme);
+
+						const exportResult = await openscad.export(resolvedScadBin);
+
 						if (!exportResult.ok) {
 							log(red("OpenSCAD encountered an issue"));
 							for (const line of exportResult.output) {

src/assets/scad.renderer.js

@@ -12,6 +12,8 @@ export const SCAD_EXT = "scad";
 
 export const DOT_SCAD = `.${SCAD_EXT}`;
 
+export const SCAD_VIEWER_JS = "scad.renderer.js";
+
 export const SCAD_VIEWER_LAYOUT = "scad.viewer.njk";
 
 export const SCAD_COLLECTION_LAYOUT = "scad.collection.njk";