samien
/
three.js
mirror of https://github.com/mrdoob/three.js.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298
							<!DOCTYPE html>
<html lang="en">
	<head>
		<title>three.js webgl - exporter - GCode</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<link type="text/css" rel="stylesheet" href="main.css">
	</head>
	<body>
		<div id="info">
			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - exporter - <a href="https://github.com/jgphilpott/polyslice" target="_blank" rel="noopener">GCode</a>
			<br>Slice 3D models to G-code for 3D printing
			<br><a href="https://www.youtube.com/watch?v=V2h3SiafXRc" target="_blank" rel="noopener">Watch the Demo Video</a>
		</div>

		<script type="importmap">
			{
				"imports": {
					"three": "../build/three.module.js",
					"three/addons/": "./jsm/"
				}
			}
		</script>

		<script type="module">

			import * as THREE from 'three';
			import Polyslice from 'https://unpkg.com/@jgphilpott/polyslice@25.12.8/dist/index.browser.esm.js';

			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';

			// Make THREE available globally for Polyslice
			window.THREE = THREE;

			let camera, scene, renderer, mesh;

			const params = {
				addCube: addCube,
				addCylinder: addCylinder,
				addCone: addCone,
				addSphere: addSphere,
				addTorus: addTorus,
				exportToGCode: exportToGCode,
				geometryName: 'cube',
				printer: 'Ender3',
				filament: 'GenericPLA',
				layerHeight: 0.2,
				infillDensity: 20,
				infillPattern: 'grid'
			};

			// Dropdown options (extend as supported by Polyslice profiles)
			const PRINTER_OPTIONS = [ 'Ender3', 'UltimakerS5', 'PrusaI3MK3S', 'AnycubicI3Mega', 'BambuLabP1P' ];
			const FILAMENT_OPTIONS = [ 'GenericPLA', 'GenericPETG', 'GenericABS' ];

			init();

			function init() {

				renderer = new THREE.WebGLRenderer( { antialias: true } );
				renderer.setPixelRatio( window.devicePixelRatio );
				renderer.setSize( window.innerWidth, window.innerHeight );
				renderer.setAnimationLoop( animate );
				document.body.appendChild( renderer.domElement );

				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
				// Use Z-up coordinate system
				THREE.Object3D.DEFAULT_UP.set( 0, 0, 1 );
				camera.up.set( 0, 0, 1 );
				camera.position.set( 42, 42, 42 );

				scene = new THREE.Scene();
				scene.background = new THREE.Color( 0xa0a0a0 );

				const ambientLight = new THREE.AmbientLight( 0xffffff, 0.5 );
				scene.add( ambientLight );

				const directionalLight = new THREE.DirectionalLight( 0xffffff, 2.5 );
				directionalLight.position.set( 0, 200, 100 );
				scene.add( directionalLight );

				// Add ground plane for reference (XY plane when Z is up)
				const gridHelper = new THREE.GridHelper( 220, 10 );
				gridHelper.rotation.x = - Math.PI / 2; // rotate from XZ to XY
				scene.add( gridHelper );

				const gui = new GUI();

				let h = gui.addFolder( 'Printer & Filament' );
				h.add( params, 'printer', PRINTER_OPTIONS ).name( 'Printer' );
				h.add( params, 'filament', FILAMENT_OPTIONS ).name( 'Filament' );

				h = gui.addFolder( 'Slicer Settings' );
				h.add( params, 'layerHeight', 0.1, 0.4, 0.05 ).name( 'Layer Height (mm)' );
				h.add( params, 'infillDensity', 0, 100, 5 ).name( 'Infill Density (%)' );
				h.add( params, 'infillPattern', [ 'grid', 'triangles', 'hexagons' ] ).name( 'Infill Pattern' );

				h = gui.addFolder( 'Geometry Selection' );
				h.add( params, 'addCube' ).name( 'Cube' );
				h.add( params, 'addCylinder' ).name( 'Cylinder' );
				h.add( params, 'addCone' ).name( 'Cone' );
				h.add( params, 'addSphere' ).name( 'Sphere' );
				h.add( params, 'addTorus' ).name( 'Torus' );

				h = gui.addFolder( 'Export' );
				h.add( params, 'exportToGCode' ).name( 'Export G-code' );

				gui.open();

				addCube();

				window.addEventListener( 'resize', onWindowResize );

				const controls = new OrbitControls( camera, renderer.domElement );
				controls.target.set( 0, 0, 0 );
				controls.update();

			}

			function exportToGCode() {

				try {

					// Check if Polyslice is loaded
					if ( typeof Polyslice === 'undefined' ) {

						alert( 'Polyslice library failed to load from CDN.\n\nPossible solutions:\n1. Disable ad blockers or browser extensions\n2. Check your network connection\n3. Ensure unpkg.com is not blocked by your firewall' );
						return;

					}

					// Create printer and filament configurations using Polyslice
					const printer = new Polyslice.Printer( params.printer || 'Ender3' );
					const filament = new Polyslice.Filament( params.filament || 'GenericPLA' );

					// Create the slicer instance with user-defined settings
					const slicer = new Polyslice.Polyslice( {
						printer: printer,
						filament: filament,
						layerHeight: params.layerHeight,
						infillPattern: params.infillPattern,
						infillDensity: params.infillDensity,
						verbose: true
					} );

					// Slice the current mesh directly
					const gcode = slicer.slice( mesh );

					// Download the G-code file (include geometry name)
					const name = params.geometryName || 'model';
					saveString( gcode, `${ name }-geometry.gcode` );

				} catch ( error ) {

					console.error( 'Error exporting to G-code:', error );
					alert( 'Error exporting to G-code. Check console for details.' );
					alert( 'Note: Polyslice is an external library. Please ensure it is loaded correctly.' );

				}

			}

			function clearScene() {

				if ( mesh ) {

					mesh.geometry.dispose();
					mesh.material.dispose();
					scene.remove( mesh );

				}

			}

			// Ensure the mesh sits on the XY plane with min Z = 0
			function placeOnXYPlane( object ) {

				// Update world matrix so bounding box reflects transforms
				object.updateMatrixWorld( true );

				const box = new THREE.Box3().setFromObject( object );
				const minZ = box.min.z;

				if ( isFinite( minZ ) ) {

					// Shift object upward by -minZ so it rests on z=0
					object.position.z -= minZ;
					object.updateMatrixWorld( true );

				}

			}

			function addCube() {

				clearScene();

				const material = new THREE.MeshLambertMaterial( { color: 0x00cc00 } );
				const geometry = new THREE.BoxGeometry( 10, 10, 10 );
				mesh = new THREE.Mesh( geometry, material );
				params.geometryName = 'cube';
				placeOnXYPlane( mesh );
				scene.add( mesh );

			}

			function addCylinder() {

				clearScene();

				const material = new THREE.MeshLambertMaterial( { color: 0x00cc00 } );
				const geometry = new THREE.CylinderGeometry( 5, 5, 10, 42 );
				mesh = new THREE.Mesh( geometry, material );
				mesh.rotation.x = Math.PI / 2;
				params.geometryName = 'cylinder';
				placeOnXYPlane( mesh );
				scene.add( mesh );

			}

			function addCone() {

				clearScene();

				const material = new THREE.MeshLambertMaterial( { color: 0x00cc00 } );
				const geometry = new THREE.ConeGeometry( 5, 10, 42 );
				mesh = new THREE.Mesh( geometry, material );
				mesh.rotation.x = Math.PI / 2;
				params.geometryName = 'cone';
				placeOnXYPlane( mesh );
				scene.add( mesh );

			}

			function addSphere() {

				clearScene();

				const material = new THREE.MeshLambertMaterial( { color: 0x00cc00 } );
				const geometry = new THREE.SphereGeometry( 5, 42, 42 );
				mesh = new THREE.Mesh( geometry, material );
				params.geometryName = 'sphere';
				placeOnXYPlane( mesh );
				scene.add( mesh );

			}

			function addTorus() {

				clearScene();

				const material = new THREE.MeshLambertMaterial( { color: 0x00cc00 } );
				const geometry = new THREE.TorusGeometry( 5, 2, 24, 100 );
				mesh = new THREE.Mesh( geometry, material );
				params.geometryName = 'torus';
				placeOnXYPlane( mesh );
				scene.add( mesh );

			}

			const link = document.createElement( 'a' );
			link.style.display = 'none';
			document.body.appendChild( link );

			function save( blob, filename ) {

				link.href = URL.createObjectURL( blob );
				link.download = filename;
				link.click();

			}

			function saveString( text, filename ) {

				save( new Blob( [ text ], { type: 'text/plain' } ), filename );

			}

			function onWindowResize() {

				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();

				renderer.setSize( window.innerWidth, window.innerHeight );

			}

			function animate() {

				renderer.render( scene, camera );

			}

		</script>

	</body>
</html>