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

Question

这是 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>

如何连接<input> 和three.js？我想使用按钮将任何 STL 模型上传到画布。我尝试使用input.addEventListener，但它不起作用。 Mby 我做错了什么。

Answer 1

这是一个显示基本工作流程的完整工作示例：https://jsfiddle.net/17q6b2sd/2/

首先，你需要一个相应的输入标签：

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

在您的 JS 代码中，您必须向该元素添加一个事件侦听器，以处理所选文件。如您所见，代码为此使用了FileReader API：

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

    }
    
} );

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

顺便说一句：我已经用这个 STL 文件测试了小提琴：slotted_disk.stl