THREE.FileLoader 中的 load 方法只获取 index.html 的内容

Question

我已经使用 create-js-app 建立了一个非常小的浏览器项目。我尝试加载位于 src 目录中的名为 test.txt 的文件。

以下是我main.js的内容：

import * as THREE from 'three';

const loader = new THREE.FileLoader();

loader.load(
    "test.txt",
    function (data) {
      console.log(data);
    },
    function (xhr) {
      console.log(
        "Loading file : " +
          (xhr.loaded / xhr.total) * 100 +
          "% loaded"
      );
    },
    function (err) {
      console.error(err);
    }
  );

当运行我的站点在 Chrome 时，我得到我的 index.html 文件的内容而不是 test.txt。我花了一些时间试图理解这一点，但没有成功。

无论我将哪个文件路径指定为 loader.load() 的第一个参数，我都会得到这个结果，我什至可以指定一个不存在的文件。

有人遇到过这个问题吗？

非常感谢。

编辑：我使用 Parcel 作为打包器。

Answer 1

此问题归结为 create-js-app, and different web applications may host static resources (i.e. images and other assets that are not compiled source code) in different ways. But generally speaking, the src/ directory is not hosted/deployed/served on the website. If your application has the structure shown here 的内部细节，那么您可能希望将 .txt 文件放入 public/ 目录。

请求任何在给定 URL 找不到的文件可能会为您提供索引页面，具体取决于您的网站是如何通过 create-js-app 设置的。

Answer 2

我正在更新上面的答案：我正在使用 Parcel。我通过添加此行修复了我的项目：

url = require('test.txt')

require 函数使浏览器导入 txt 文件，它 returns 存储文件的散列 url。接下来我要做的就是打电话给

loader.load(url, ... )

THREE.FileLoader 中的 load 方法只获取 index.html 的内容

load method in THREE.FileLoader only gets the content of index.html

javascript

three.js