How to connect input and three.js canvas?

Question

This is STL Viewer:

import * as THREE from "https://threejs.org/build/three.module.js";
import {OrbitControls} from "https://threejs.org/examples/jsm/controls/OrbitControls.js";
import {STLLoader} from "https://threejs.org/examples/jsm/loaders/STLLoader.js";

const scene = new THREE.Scene();
scene.background = new THREE.Color( 0xafdafc );
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({canvas:test});
renderer.setSize(500, 500);
const loader = new STLLoader();
loader.load('./model.stl', function (geometry) {
    const material = new THREE.MeshStandardMaterial({
        color: 0xe6e6fa,
        emissive: 0x2b2b2b,
        specular: 0xe6e6e6,
        metalness: 1,
        roughness: 0.8,
    });
    const mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);
});

const spotLight = new THREE.SpotLight(0xeeeece);
spotLight.position.set(1000, 1000, 1000);
scene.add(spotLight);

const controls = new OrbitControls(camera, renderer.domElement);
camera.position.set(0, 20, 100);
controls.update();

function render() {
    requestAnimationFrame(render);
    controls.update();
    renderer.render(scene, camera);
}
render();

And this HTML:

<form>
    <input type="file" id="button" class="button">
    <script src="js/index.js" type="module"></script>
    <canvas class="test" id="test"></canvas>
</form>

how to connect <input> and three.js ? I want to use the button to upload any STL model to canvas. I trying use input.addEventListener , but it's not working. Mby i do something wrong.

Answer 1

Here is a full working example that shows the basic workflow: https://jsfiddle.net/17q6b2sd/2/

First, you need a respective input tag:

<input id="input" type="file">

In your JS code, you then have to add an event listener to this element which process the selected file. As you can see, the code uses the FileReader API for this:

var input = document.getElementById( 'input' );
input.addEventListener( 'change', function( event ) {
    
    var file = this.files[ 0 ];
    var reader = new FileReader();
    
    reader.addEventListener( 'load', function ( event ) {

        var contents = event.target.result;

        var geometry = new STLLoader().parse( contents );
        var material = new THREE.MeshStandardMaterial();
        var mesh = new THREE.Mesh( geometry, material );
        
        mesh.castShadow = true;
        mesh.receiveShadow = true;
        
        scene.add( mesh );

    }, false );
    
    if ( reader.readAsBinaryString !== undefined ) {

        reader.readAsBinaryString( file );

    } else {

        reader.readAsArrayBuffer( file );

    }
    
} );

Similar code is used in the three.js editor which does not read files via an input element but via drag'n'drop.

BTW: I've tested the fiddle with this STL file: slotted_disk.stl