Как сделать input в canvas three.js?

Question

Есть окно с канвасом three.js:

import * as THREE from "https://threejs.org/build/three.module.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);
});

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

и форма с инпутом:

        <form class="stlviewer">
            <input type="file" accept=".stl">
        </form>
        <canvas id="viewer"></canvas>

Вопрос - Как их соединить, чтобы можно было через инпут загружать модель в канвас?

Answer 1

СПАСИБО Mugen87 ЗА ОТВЕТ, оригинал ответа тут: https://stackoverflow.com/questions/62832351/how-to-connect-input-and-three-js-canvas

Вот полный рабочий пример, который показывает основной рабочий процесс:https://jsfiddle.net/17q6b2sd/2/

Во-первых, нужен соответствующий входной тег:

Затем в JS-коде вы должны event listener к этому элементу, который обрабатывает выбранный файл. Код использует для этого API FileReader:

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, который читает файлы не через элемент ввода, а через drag'n'Drop.

БЛОГ НА HUSL

Как сделать input в canvas three.js?

Ответы (1 шт):