1

所以我决定用three.js做一个项目，react和vite。后来我意识到我不想真正打扰 React，所以我项目中的 React 代码主要是骨架代码（如默认的 App 组件等）。我决定就这样离开它，基本上只专注于学习three.js。我的项目使用npm run dev. 所以我尝试使用 npm run build 来构建它。它生成一个 dist 文件夹，其中包含一个 index.html 和一个 assets 文件夹。assets 文件夹中有三个文件：

index.02582158.css

index.c83bad18.js

vendor.5957e3fb.js

我猜这是某种压缩的 css，另外两个是 typescript/typescript react 文件转译？

当我尝试运行构建的 dist 文件夹时，使用npm run serve它说

vite v2.3.8 build preview server running at: Local: http://localhost:5000/

我访问该页面，它是一个黑屏，每个错误都是这样的：

index.c83bad18.js:1 未捕获类型错误：无法读取未定义的属性“adjustOrbit”

adjustOrbit 是 typescript 文件中定义的导出类的对象的成员函数。它闪烁得非常快，但我看到 npm run build 确实构建了这个 .ts 文件。所以我不确定我做错了什么。

当我尝试将其放在 GitHub 页面上时，我在上述所有三个文件中都找不到 404。通过更改 dist 内 index.html 中的 src 和 href 从

/assets/index.c83bad18.js对于./assets/index.c83bad18.js这三个中的每一个（在每个路径的开头添加一个点），GitHub Pages 停止说 404 not found 并且与尝试使用 vite 运行构建预览有相同的问题。

更新：如果我注释掉前面提到的从导出的 .ts 类中调用对象成员函数的代码，我会得到......我会描述为......我的 three.js 代码中有 25% 实际呈现在屏幕上。它根本不起作用。还有更多关于Uncaught (in promise) DOMException: The element has no supported sources.

4

1 回答 1

0

我想我找到了解决方案。我说想想，因为我前一阵子解决了这个问题，忘记写下我是怎么想出来的。我很确定这是因为我的 three.js 代码找不到任何使用的资产，因此当从 typescript 编译为 javascript 时整个项目会中断。为了解决这个问题，我导入了所有使用的资产，以便将它们与其他所有内容一起编译：

import skyboxTop from './assets/skyboxwithsun/top.png?url'

在我做类似的事情之前

txtLoader = new THREE.TextureLoader("./assets/skyboxwithsun/top.png", callbackfunc)

现在我做

txtLoader = new THREE.TextureLoader(skyboxTop, callbackfunc)

但我认为它失败的原因是因为该资产 top.png 在 vi​​te 构建应用程序时被编译成一些奇怪的文件名，它将类似于 c3ga867fj34.png

所以因为我的加载器无法解析这些 url，我认为这就是为什么一切都坏了。导入确保它skyboxTop在运行时可用。

于 2021-10-18T12:59:14.253 回答