JSFiddle - React, Tailwind, and code Playground

by Simon060694

HTML

<script src="https://threejs.org/build/three.js"></script>
<script src="https://threejs.org/examples/js/loaders/STLLoader.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<input type="file" id="fileUpload" accept=".stl"/>
<!--https://threejs.org/examples/models/stl/binary/pr2_head_tilt.stl  --stl file example

CSS

#fileUpload{
  position:absolute;
  left:0;
  top:0;
}

JavaScript

var container, stats;

        var camera, cameraTarget, scene, renderer;
        initScene();
        function initScene() {
            camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 1, 15000);
            camera.position.set(10, 10, 10);

            scene = new THREE.Scene();
            renderer = new THREE.WebGLRenderer({ antialias: true });
            renderer.setSize(window.innerWidth, window.innerHeight);

            document.body.appendChild(renderer.domElement);

            controls = new THREE.OrbitControls(camera, renderer.domElement);

            controls.autoRotate = true;
            var size = 10;
            var divisions = 10;

            var gridHelper = new THREE.GridHelper(size, divisions);
            scene.add(gridHelper);

            window.addEventListener('resize', function () {
                camera.aspect = window.innerWidth / window.innerHeight;
                camera.updateProjectionMatrix();

                renderer.setSize(window.innerWidth, window.innerHeight);
            });

            (function animate() {

                requestAnimationFrame(animate);

                renderer.render(scene, camera);
                controls.update();

            })()

        }
        function loadStlFile(url) {
            return new Promise((resolve, reject) => {
                let self = this;
                var loader = new THREE.STLLoader();
                loader.load(url, function (orGeometry) {
                    var mesh = new THREE.Mesh(orGeometry, new THREE.MeshBasicMaterial({ wireframe: true }));

                    scene.add(mesh);
                    resolve();
                }, (e) => { console.log(e) }, (e) => { console.log(e); reject(); }, (e) => { console.log(e) });
            })

        }
        fileUpload.addEventListener('change', function (e) {
            let file = e.target.files[0];



            var chunkSize = 1024 * 1024 * 10; //10MB Chunk size
           ...