javascript - 如何连接input和two.js Canvas ？

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 模型上传到 Canvas 。我尝试使用 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 文件测试了 fiddle :slotted_disk.stl