JSFiddle - React, Tailwind, and code Playground

by realhunts

HTML

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://threejs.org/examples/js/WebGL.js"></script>
<script src="https://stemkoski.github.io/Three.js/js/Stats.js"></script>
<div id = "frame">

</div>
<script src="https://threejs.org/examples/js/exporters/GLTFExporter.js"></script>
	<div id="info">
			GLTF Exporter<br/>
			<button id="export_scene">Export Scene1</button>
			<button id="export_scenes">Export Scene1 and Scene 2</button>
			<button id="export_object">Export Sphere</button>
			<button id="export_obj">Export WaltHead</button>
			<button id="export_objects">Export Sphere and Grid</button>
			<button id="export_scene_object">Export Scene1 and Sphere</button>
			<br/>
			<label><input id="option_trs" name="trs" type="checkbox"/>TRS</label>
			<label><input id="option_visible" name="visible" type="checkbox" checked="checked"/>Only Visible</label>
			<label><input id="option_drawrange" name="visible" type="checkbox" checked="checked"/>Truncate drawRange</label>
			<label><input id="option_binary" name="visible" type="checkbox">Binary (<code>.glb</code>)</label>
			<label><input id="option_forceindices" name="visible" type="checkbox">Force indices</label>
			<label><input id="option_forcepot" name="visible" type="checkbox">Force POT textures</label>
		</div>

JavaScript

function exportGLTF( input ) {

				var gltfExporter = new THREE.GLTFExporter();

				var options = {
					trs: document.getElementById( 'option_trs' ).checked,
					onlyVisible: document.getElementById( 'option_visible' ).checked,
					truncateDrawRange: document.getElementById( 'option_drawrange' ).checked,
					binary: document.getElementById( 'option_binary' ).checked,
					forceIndices: document.getElementById( 'option_forceindices' ).checked,
					forcePowerOfTwoTextures: document.getElementById( 'option_forcepot' ).checked
				};
				gltfExporter.parse( input, function ( result ) {

					if ( result instanceof ArrayBuffer ) {

						saveArrayBuffer( result, 'scene.glb' );

					} else {

						var output = JSON.stringify( result, null, 2 );
						console.log( output );
						saveString( output, 'scene.gltf' );

					}

				}, options );

			}

			document.getElementById( 'export_scene' ).addEventListener( 'click', function () {

				exportGLTF( scene );

			} );

			document.getElementById( 'export_scenes' ).addEventListener( 'click', function () {

				exportGLTF( [ scene1, scene2 ] );

			} );

			document.getElementById( 'export_object' ).addEventListener( 'click', function () {

				exportGLTF( sphere );

			} );

			document.getElementById( 'export_obj' ).addEventListener( 'click', function () {

				exportGLTF( waltHead );

			} );

			document.getElementById( 'export_objects' ).addEventListener( 'click', function () {

				exportGLTF( [ sphere, gridHelper ] );

			} );

			document.getElementById( 'export_scene_object' ).addEventListener( 'click', function () {

				exportGLTF( [ scene1, gridHelper ] );

			} );


			var link = document.createElement( 'a' );
			link.style.display = 'none';
			document.body.appendChild( link ); // Firefox workaround, see #6594

			function save( blob, filename ) {

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

				// URL.revokeObjectURL( url ); breaks...