Есть вот такой 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: viewer});
renderer.setSize(1200, 600);
const loader = new STLLoader();
loader.load('./models/lamp.stl', function (geometry) {
const material = new THREE.MeshStandardMaterial({});
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
});
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();
И есть Input file в HTMl
<form class="stlviewer" id="stlviewer">
<input type="file" accept=".stl">
</form>
<canvas id="viewer"></canvas>
Вопрос: Как их связать, чтобы через input можно было бы загрузить модель в канвас?