如何使用Threejs上传HTML中的STL文件

时间:2019-01-08 12:34:50

标签: javascript three.js

我的任务是开发一个Web应用程序,用户可以在其中上传由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模型。

1 个答案:

答案 0 :(得分:0)

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

让我知道怎么回事!