Add GCodeExporter and external example for Polyslice G-code slicer

[jgphilpott]

Related issue: #17981

Description

Adds integration with Polyslice, an external 3D printing slicer that converts three.js meshes directly to G-code. This addresses the discussion in #17981 where a G-code exporter was deemed too specific for three.js core and should be maintained separately with an external example.

Files Added

1. examples/jsm/exporters/GCodeExporter.js - A wrapper class demonstrating Polyslice integration

   • Follows the same pattern as STLExporter, OBJExporter, etc.
   • Includes comprehensive documentation with installation instructions and usage examples
   • Links to the official repo and demo video
   • Supports both browser (CDN) and Node.js (npm) environments

2. examples/misc_exporter_polyslice.html - Interactive example demonstrating the GCodeExporter

   • Loads Polyslice from CDN with SRI hash for integrity verification
   • Provides interactive geometry selection (cube, sphere, cylinder, torus)
   • Exposes key slicer parameters: layer height, infill density, infill pattern
   • Exports meshes to downloadable G-code files

Usage Example

import { GCodeExporter } from 'three/addons/exporters/GCodeExporter.js';

const exporter = new GCodeExporter();
const gcode = exporter.parse( mesh, {
    printer: 'Ender3',
    filament: 'GenericPLA',
    layerHeight: 0.2,
    infillPattern: 'grid',
    infillDensity: 20
} );

Viewing the Example

Run npm run dev from the repository root, then navigate to http://localhost:8080/examples/misc_exporter_polyslice.html

This contribution is funded by jgphilpott

Original prompt

Hey copilot, good morning! I have a task for you to help me with if you're ready? The project of mine, 'Polyslice' was inspired by the conversation on this three.js issue: #17981

On the issue you can see Mugen87 mentioned that a G-code exporter is too specific for the three.js library and should be maintained in a separate repo and then an external example can be added. #17981 (comment)

I have created and completed the new repo called Polyslice (https://github.com/jgphilpott/polyslice). Can you now help me create an external example file that could be included in examples/jsm/exporters as an example for people to help get them started with Polyslice?

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[Mugen87]

Test link: https://rawcdn.githack.com/jgphilpott/three.js/copilot/add-example-file-for-polyslice/examples/misc_exporter_gcode.html

[Mugen87]

You did this with Copilot, right? As a scaffold it's okay but a lot of fine-tuning is missing.

[jgphilpott]

@Mugen87 yeah i'm working primarily with Copilot, its so much faster, and you can fine-tune the details manually. I will make a few adjustments based off your comments and update you again in 24 ish hours.

Regarding the scale, I have been using a conversion rate of 1 unit in three.js = 1mm. This rate seems to be be consistent with the STL and OBJ exporters. If I create a geometry like new THREE.BoxGeometry(10, 10, 10); and export it to an STL it converts at a 1:1 ratio and all the 3D printing apps i've used interpret that as 1 unit = 1mm. So this geometry would result in a 1cm cube when sliced.

[Mugen87]

For some reasons, the following appears in the browser console:

[Mugen87]

BTW: Tested a round-trip with GCodeLoader and I was able to import an exported mesh from the new demo 👍 .

[jgphilpott]

Updates:

@Mugen87 I have made several updates in response to your comments (9f0dc81) as well as a few additional changes:

• Updated the scene orientation to be Z up/down and X/Y is flat. This is the common orientation in 3D printing apps (29216c8).
• Fixed the mesh movement on export issue you mentioned, more detail in the comment above.
• Added the cone example (ee0909d).
• Added Printer & Filament controls and reordered the controls to match the Polyslice quick start example:

• Added the geometry type to the exported file name and updated the screenshot (96ee360).

Notes:

With regard to the multiple instances warning, I think this is because the Polyslice browser bundle comes with three.js included. Not sure what the best solution should be here ... perhaps I update Polyslice to have two different browser bundles, one with three.js included and one without?

A further note with regard to the scaling issue you mentioned yesterday. Polyslice also comes with config options for using different units of measurement. If you have something you designed in meters or just prefer working in that scale you can add lengthUnit: 'meters' at slicer initialization or use setLengthUnit('meters') afterwards. It supports metric and imperial systems as well as unit selection for other scales such as temperature, time, speed and more. All available options and defaults should be somewhere in the docs ... or just ask copilot (faster option).

I'm glad the round trip between the exporter and loader is working! I could add a lot more functionality to this example such as being able to see/explore the gcode rather than just exporting it to a file but I feel that would just be duplicating the work already done in the G-code Visualizer (a polyslice dev tool) and overlap too much with the loader example. Probably best to keep this example simple/minimal for maintainability and develop more advanced features elsewhere.

Any more thoughts or comments?

[Mugen87]

Probably best to keep this example simple/minimal for maintainability and develop more advanced features elsewhere.

Indeed, let's not make it more complex.

perhaps I update Polyslice to have two different browser bundles, one with three.js included and one without?

Have you considered to provide an ESM build that imports three.js over a three dependency? In this case, Polyslice would automatically import the three.js version from the import map. That would resolve the multiple instances issue completely.

So the things Polyslice needs from three.js would be imported like so:

import { Color, BufferGeometry, Mesh } from 'three';

[Mugen87]

This creates a "community" badge in the navigation sidebar so it's clear the example uses an external component from the community.