# Export to GLTF files

**URL:** <https://discourse.threejs.org/t/export-to-gltf-files/26852>\
**Category:** Questions\
**Tags:** gltf-exporter\
**Created:** [June 2, 2021, 12:34pm UTC](https://discourse.threejs.org/t/export-to-gltf-files/26852 "2021-06-02T12:34:58Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![RomeoGG](https://avatars.discourse-cdn.com/v4/letter/r/c57346/32.png) [@RomeoGG](https://discourse.threejs.org/u/RomeoGG)\
**Post date:** [June 2, 2021, 12:34pm UTC](https://discourse.threejs.org/t/export-to-gltf-files/26852/1 "2021-06-02T12:34:58Z")

</div>

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:

> ```javascript
> <!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,

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [June 2, 2021, 1:22pm UTC](https://discourse.threejs.org/t/export-to-gltf-files/26852/2 "2021-06-02T13:22:00Z")

</div>

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

[https://threejs.org/examples/misc\_exporter\_gltf](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](https://github.com/mrdoob/three.js/blob/d39d82999f0ac5cdd1b4eb9f4aba3f9626f32ab6/examples/js/exporters/GLTFExporter.js)

---

<div class="post-metadata">

**Author:** ![RomeoGG](https://avatars.discourse-cdn.com/v4/letter/r/c57346/32.png) [@RomeoGG](https://discourse.threejs.org/u/RomeoGG)\
**Post date:** [June 2, 2021, 1:49pm UTC](https://discourse.threejs.org/t/export-to-gltf-files/26852/3 "2021-06-02T13:49:56Z")

</div>

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…

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [June 2, 2021, 2:04pm UTC](https://discourse.threejs.org/t/export-to-gltf-files/26852/4 "2021-06-02T14:04:13Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![RomeoGG](https://avatars.discourse-cdn.com/v4/letter/r/c57346/32.png) [@RomeoGG](https://discourse.threejs.org/u/RomeoGG)\
**Post date:** [June 4, 2021, 7:25am UTC](https://discourse.threejs.org/t/export-to-gltf-files/26852/6 "2021-06-04T07:25:42Z")

</div>

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

```javascript
> <!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>

```

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [June 4, 2021, 8:52am UTC](https://discourse.threejs.org/t/export-to-gltf-files/26852/7 "2021-06-04T08:52:51Z")

</div>

Try it like so: [https://jsfiddle.net/qwxrfc1h/2/](https://jsfiddle.net/qwxrfc1h/2/)

---

<div class="post-metadata">

**Author:** ![RomeoGG](https://avatars.discourse-cdn.com/v4/letter/r/c57346/32.png) [@RomeoGG](https://discourse.threejs.org/u/RomeoGG)\
**Post date:** [June 4, 2021, 9:12am UTC](https://discourse.threejs.org/t/export-to-gltf-files/26852/8 "2021-06-04T09:12:34Z")

</div>

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