Export to GLTF files

Hi everyone,

I’m a little new to javascript and I created a page to model cabinets.
Now I want to export the models so I can re-use them in a later stage.

But I can’t get it to work.

when I press button 9 the model in the scene needs to be exported.
I searched for examples but don’t know where to put everything in the code.

Where do I import the GLTFexporter and how can I export the model to a GLTF-file?

Here’s a part of my code:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Martens Productions</title>
		<style>
			body { margin: 0; }
      		table, th, td, tr, div {
        		padding: 0px;
        		border: 0px solid black;
        		border-collapse: collapse;
        		font-family: arial;
        		color: black;
      			}

			::-webkit-scrollbar{width: 10px;}
			::-webkit-scrollbar-track {box-shadow: inset 0 0 5px grey; border-radius: 10px;}
			::-webkit-scrollbar-thumb {background: grey; border-radius: 10px;}
			::-webkit-scrollbar-thumb:hover {background: #b30000;}
		</style>
	</head>
	<body>
		<table style="margin-left: auto;margin-right: auto;height:655px;">
			<tr style="height:110px;margin:0">
				<td style="width:50%"><img src="img/logo.png"></td>
				<td id="header" style="width:30%;text-align:right;color:grey;vertical-align: bottom;font-size:30px;"><label>Modules&nbsp;&nbsp;&nbsp;</label></td>
				<td style="width:200px"></td>
			</tr>
			<tr>
				<td colspan="2">
				<div style="border:  1px solid black;" id="container">
					<script src="js/three.js">
					</script>
					<script>

                                             **** here is a code that generates a scene with a model ****

                                        </script>
                   <table id="navbar" style="margin-left: auto;margin-right: auto;height:70px;width:1200px;color:black">
			<tr>
				<td id="btn9" style="width:70px;text-align: center;background-image:url(img/button9.png);cursor: pointer;" title="Bevestigen"  onclick="download()" onmouseover="button_mouseover(id)" onmouseout="button_mouseout(id)"></td>
			</tr>
		</table>                     
	</body>
</html>

Can anyone help me out or point me in the right direction?

Thanks,

Please try to use the official example of GLTFExporter as a code template:

https://threejs.org/examples/misc_exporter_gltf

You should find there everything you need for a basic exporting setup. If you are not working with ES6 modules, use the following version of GLTFExporter: three.js/GLTFExporter.js at d39d82999f0ac5cdd1b4eb9f4aba3f9626f32ab6 · mrdoob/three.js · GitHub

I tried the examples from the threejs website but they didn’t work. I found 10+ examples on the internet but none of them worked…

If I try to import the exporter in my script the whole script doesn’t do anything anymore…

Please show with a live example what you are doing. Your shared code snippet from the first post is not sufficient for investigating the issue.

I made a simpeler code, here I rendered a cube, when I press the button it needs to export the model.
How can I do this, the way I did it doesn’t work.

Thank you

> <!DOCTYPE html>
> <html>
> 	<head>
> 		<meta charset="utf-8">
> 		<title>Export</title>
> 	</head>
> 	<body onload="Main()">
> 		<table style="margin-left: auto;margin-right: auto;height:655px;">
> 			<tr>
> 				<td colspan="2">
> 				<div style="border:  1px solid black;" id="container">
> 					<script src="js/three.js">
> 					</script>
> 					<script>
> 						// Create a scene
> 						const scene = new THREE.Scene();
> 						scene.background = new THREE.Color( 0xf0f0f0 );
> 
> 						// Create a camera
> 						const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
> 
> 						// Create the renderer
> 						const renderer = new THREE.WebGLRenderer();
> 						renderer.setSize( window.innerWidth/1.5-10, 653 );
> 						renderer.setPixelRatio( window.devicePixelRatio*1.5 );
> 						renderer.shadowMap.enabled = true;
> 						renderer.shadowMap.type = THREE.PCFSoftShadowMap; // default THREE.PCFShadowMap
> 						document.getElementById("container").appendChild( renderer.domElement );
> 						//document.addEventListener('mousedown', onDocumentMouseDown, false);
> 					
> 						function Main(){
> 							const geometry = new THREE.BoxGeometry( 1, 1, 1 );
> 							const material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );
> 							const cube = new THREE.Mesh( geometry, material );
> 							scene.add( cube );
> 							var geo = new THREE.EdgesGeometry( cube.geometry ); // or WireframeGeometry
> 							var mat = new THREE.LineBasicMaterial( { color: 0xffffff,transparent:true } );
> 							var wireframe = new THREE.LineSegments( geo, mat );
> 							cube.add(wireframe);
> 
> 							camera.position.z = 2;
> 							cube.rotation.y=150;
> 							cube.rotation.x=100;
> 							renderer.render( scene, camera );
> 						}
> 
> 						function exportmodel(){
> 							const exporter = new GLTFExporter();
> 
> 							// Parse the input and generate the glTF output
> 							exporter.parse( scene, function ( gltf ) {
> 								console.log( gltf );
> 								saveString( gltf, 'scene.gltf' )
> 							}, options );
> 						}
> 
> 						function saveString( text, filename ) {
> 							save( new Blob( [ text ], { type: 'text/plain' } ), filename );
> 						}
> 
> 			
> 
> 					</script>
> 				</div>
> 			</tr>
> 		</table>
> 		<button onclick="exportmodel()">export</button>			
> 	</body>
> </html>

Try it like so: https://jsfiddle.net/qwxrfc1h/2/

Yes! I got it to work. thanks a lot!

1 Like