用HTML

Question

将gltf文件加载到three.js场景中

我一直试图通过从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>

Answer 1

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

根据文档https://threejs.org/docs/#examples/en/loaders/GLTFLoader，您必须为loader.parse()提供参数数据，路径，onLoad和onError。我知道您可以省略onError，但是在其中包含一些可以处理错误的方法将是明智的。我不确定是否可以省略path参数，因此我将其包括在内。它说数据应该是一个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();

    reader.onload = function ( gltfText ) {

        var loader = new THREE.GLTFLoader();

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

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

        });    

    });

    reader.readAsText( file );