使用 html <input> 将 gltf 文件加载到 three.js 场景中答案

【问题标题】：Load gltf file into a three.js scene with a html <input>使用 html <input> 将 gltf 文件加载到 three.js 场景中
【发布时间】：2020-08-29 00:06:09
【问题描述】：

我一直在尝试通过从 HTML 输入标签上传一个 gltf 对象到 three.js 场景。

我需要从客户端计算机中选择一个特定文件，然后将其显示在网站上，将其压缩，然后将其发送到多媒体管理服务器（云）

我的代码（我删除了相机设置以进行问题分类）：

const gltfUploader = document.getElementById('gltf-uploader');
const imageUploadbar = document.getElementById('img-upload-bar');

gltfUploader.addEventListener('change', async (e) => {

    let file = e.target.files[0];

    console.log(typeof file);

    var loader = new THREE.GLTFLoader();
    loader.load(file, 
        function(gltf){
          scene.add(gltf.scene);
          renderer.render(scene, camera);
  });

这里是html：

<input type="file" id="img-uploader">
<progress id="img-upload-bar" value="0" max="100" style="width: 100%"></progress>

【问题讨论】：

标签： javascript html three.js 3d

【解决方案1】：

您必须先使用 FileReader 将文件作为文本读取。而不是使用从 url 加载 gltf 的loader.load()，而是使用从数据（JSON 格式的字符串/文本）加载 gltf 的loader.parse()。

根据文档https://threejs.org/docs/#examples/en/loaders/GLTFLoader，您必须为loader.parse() 提供参数数据、路径、onLoad 和 onError。我不确定您是否可以省略路径参数，所以我将其包含在内。它说数据应该是一个 ArrayBuffer，但在源代码中它显示你可以放入一个字符串..

https://developer.mozilla.org/en-US/docs/Web/API/File

https://developer.mozilla.org/en-US/docs/Web/API/FileReader

gltfUploader.addEventListener( 'change', async (e) => {

    let file = e.target.files[ 0 ];
    let reader = new FileReader();

    // This is code that runs after reader.readAsText() finishes
    reader.onload = function ( gltfText ) {

        var loader = new THREE.GLTFLoader();

        loader.parse( gltfText, '', function( gltf ){

          scene.add( gltf.scene );
          renderer.render( scene, camera );

        }, function( errormsg ){
            console.error( errormsg );
        });    

    });

    reader.readAsText( file );

【讨论】：

【解决方案2】：

在文档中，他们说要解析的 glTF 资产作为 ArrayBuffer 或 JSON 字符串，但请尝试 ArrayBuffer，我希望它可以工作。

适用于 glb 和 gltf 模型的代码

document.querySelector("#inputSelector").onchange = e =>  {
    let file = e.target.files[ 0 ];
    let reader = new FileReader();
    reader.readAsArrayBuffer( file );
    reader.onload = gltfText => {
        let loader = new GLTFLoader();
        loader.parse( gltfText.target.result, '', (gltfData) => {
            scene.add(gltfData.scene)
        }, 
        errMassage => { console.error(errMassage) } )
    }
}

【讨论】：