Skip to content

feat: Add 3MF export/preview support with custom WASM build#77

Open
mikekuniavsky wants to merge 14 commits intoseasick:mainfrom
mikekuniavsky:main
Open

feat: Add 3MF export/preview support with custom WASM build#77
mikekuniavsky wants to merge 14 commits intoseasick:mainfrom
mikekuniavsky:main

Conversation

@mikekuniavsky
Copy link

Summary

  • Enables 3MF export and preview (previously TODO-commented out) using a custom OpenSCAD WASM build with 3MF color support
  • Adds readFrom3MFFile.ts using Three.js ThreeMFLoader to render multi-color 3MF previews
  • Updates worker to use --export-format=3mf when the file type is 3MF, falling back to binstl otherwise
  • Updates Three.js ecosystem packages (@react-three/drei, @react-three/fiber, three) to newer versions
  • Fixes Model.tsx to guard against null geometry and enable shadow casting on 3MF meshes
  • Adjusts camera FOV and far plane in ThreeJsCanvas.tsx for better large-model visibility

WASM Setup

This PR requires a custom OpenSCAD WASM build with 3MF color support. Since src/vendor/ is gitignored, you must manually download the WASM files before running:

# Download openscad.js and openscad.wasm from:
# https://github.com/mikekuniavsky/openscad-wasm-debug/tree/main/test-server/tests
mkdir -p src/vendor/openscad-wasm
curl -L https://raw.githubusercontent.com/mikekuniavsky/openscad-wasm-debug/main/test-server/tests/openscad.js -o src/vendor/openscad-wasm/openscad.js
curl -L https://raw.githubusercontent.com/mikekuniavsky/openscad-wasm-debug/main/test-server/tests/openscad.wasm -o src/vendor/openscad-wasm/openscad.wasm

Test plan

  • Run npm run dev and verify no WASM magic number error in the console
  • Render a model and verify STL export still works
  • Render a model using color() statements and export as 3MF — verify colors are preserved
  • Preview a rendered 3MF file in the viewer — verify multi-color rendering

🤖 Generated with Claude Code

Mike Kuniavsky and others added 14 commits February 26, 2026 15:38
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Add GitHub Pages live link to README
- Update get-openscad.sh to download the custom WASM build
  (replaces old openscad.org zip with the vibejects build)
- Simplify README dev setup to use the script

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
npm 11 (Node 25) was resolving @types/react@19 while CI's npm 10
(Node 20) resolves @types/react@18, causing npm ci to fail.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Jest 30 changed the guide URL from goo.gl/fbAQLP to
jestjs.io/docs/snapshot-testing and now validates it at test time.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
ts-jest requires explicit @types/node for fs and __dirname in tests.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
The preview function was hardcoded to 'stl', meaning the worker always
exported STL and the 3MF color rendering path was never reached.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
OpenSCAD uses Z-up coordinates; Three.js uses Y-up. Without this
rotation the model renders with its top face as the front face.
Matches the existing rotation applied in readFromSTLFile.ts.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant