Javascript 如何连接input和three.js画布？

这是STL查看器：

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();

这个HTML：

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

---

如何连接

和

three.js

？我想使用按钮上传任何STL模型到画布。我尝试使用

input.addEventListener

，但它不起作用。Mby我做错了什么。

下面是一个完整的工作示例，显示了基本的工作流程：

首先，您需要相应的输入标记：

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

在中使用了类似的代码，它不通过输入元素而是通过拖放来读取文件

---

顺便说一句：我用这个STL文件测试了小提琴：

你说的“不工作”到底是什么意思？你收到错误信息了吗？有什么事发生吗？你试过调试吗？如果是的话，程序在哪里卡住了/开始出现意外的行为？我想说的是我不知道怎么做。我试图直观地了解语法，因为我没有找到任何示例，但它不起作用。错误指的是模块代码Three.js，而不是我的代码.Thx！还有一个问题-如何在加载模型之前清除场景？现在，每个新模型都与旧模型一起放置在舞台上。我建议您通过

Object3D.traverse（）

遍历场景，并处理所有材质和几何体。最后，删除该对象。有关此论坛主题的更多信息：