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://tdhooper.github.io/threejs-slice-geometry/build/slice.js"></script>
<script src="https://rawcdn.githack.com/mrdoob/three.js/dev/examples/js/exporters/OBJExporter.js"></script>
<div>
<button id="export_scene">Export Scene1</button>

<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><br/>
			<label><input id="option_binary" name="visible" type="checkbox">Binary (<code>.glb</code>)</label>
			<label><input id="option_maxsize" name="maxSize" type="number" value="4096" min="2" max="8192" step="1"> Max texture size</label>
		</div>

JavaScript

// a basic three.js scene

var container, renderer, scene, camera, controls;

import { GLTFExporter } from 'https://threejs.org/examples/jsm/exporters/GLTFExporter.js';

			function exportGLTF( input ) {

				const gltfExporter = new THREE.OBJExporter();//GLTFExporter();

				const 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,
					maxTextureSize: Number( document.getElementById( 'option_maxsize' ).value ) || Infinity // To prevent NaN value
				};
				gltfExporter.parse( input, function ( result ) {

					if ( result instanceof ArrayBuffer ) {

						saveArrayBuffer( result, 'scene.obj' );

					} else {

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

					}

				}, options );

			}

					const 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 Firefox...

			}

			function saveString( text, filename ) {

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

			}


			function saveArrayBuffer( buffer, filename ) {

				save( new Blob( [ buffer ], { type: 'application/octet-stream' } ), filename );

			}

      
init();
animate();

function init() {

    // renderer
    renderer = new THREE.WebGLRenderer({
        antialias: false
    });
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setClearColor(0xccccff);
    container = document.createElement('div');
    document.body.appendChild(container);
    container.appendChild(renderer.domElement);

   ...