Как подключить вход и три. js холста? - PullRequest
Новая
       9

Как подключить вход и три. js холста?

2 голосов
/ 10 июля 2020

Это 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: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, но это не работает. Я что-то делаю не так.

1 Ответ

2 голосов
/ 10 июля 2020

Вот полный рабочий пример, который показывает рабочий процесс basi c: 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 );

    }
    
} );

Подобный код используется в 3. js редакторе , который не читает файлы через элемент ввода, но с помощью drag'n'drop.

BTW: я тестировал скрипку с этим файлом STL: slotted_disk.stl

...