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 </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>
Yes! I got it to work. thanks a lot!
1 Like