如何使用threejs在html中上传STL文件

Question

我的任务是开发一个网络应用程序，用户可以在其中上传由 matlab 代码生成的 STL 文件并查看它们。我在传递 STL 加载中的参数时遇到问题。

我尝试按照此链接中的答案User uploaded textures in three.js

function readURL(input) {

    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#blah').html( e.target.result);
            console.log(e.target.result);
            var loader = new THREE.STLLoader();
            loader.load(e.target.result) , function (    geometry ) {
                var material = new THREE.MeshPhongMaterial( { color:   0xff5533, specular: 0x111111, shininess: 200 } );
                var mesh = new THREE.Mesh( geometry, material );
                mesh.position.set( 0, - 0.25, 0.6 );
                mesh.rotation.set( 0, - Math.PI / 2, 0 );
                mesh.scale.set( 0.005, 0.005, 0.005 );
                mesh.castShadow = true;
                mesh.receiveShadow = true;
                scene.add( mesh );
            } );

        }

        reader.readAsDataURL(input.files[0]);
    }
}

$("#imgInp").change(function () {
    readURL(this);
});

我希望渲染 STL 模型。

Answer 1

STLLoader 有一个parse 函数，它可以将文件的内容作为数组缓冲区并返回处理后的几何图形。您可以使用FileReader.readAsArrayBuffer 获取内容。

if (input.files && input.files[0]) {
    var reader = new FileReader();
    reader.onload = function (e) {

        var geometry = loader.parse(e.target.result);
        var mesh = new THREE.Mesh( geometry, material );

        // ...

        scene.add(mesh);
    }
    reader.readAsArrayBuffer(input.files[0]);
}

让我知道这是怎么回事！