一些Bug和我的解决

[wzh656]

1.ShaderTest.ts构建时报错

我先用git clone后，
（我使用的是pnpm）
直接执行pnpm vite可以运行
执行pnpm run build后
src/core/components/ShaderTest.ts报错

src/core/components/ShaderTest.ts(2,125): error TS2307: Cannot find module "../libs/xviewer" or its corresponding type declarations.
src/core/components/ShaderTest.ts(35,14): error TS2339: Property "viewer" does not exist on type "ShaderTest".
src/core/components/ShaderTest.ts(46,14): error TS2339: Property "viewer" does not exist on type "ShaderTest".
src/core/components/ShaderTest.ts(52,33): error TS2304: Cannot find name "cameraCenter".
src/core/components/ShaderTest.ts(53,34): error TS2304: Cannot find name "cameraCenter".

我的解决：

• 将第2行的../libs/xviewer改为../../libs/xviewer（路径错误）

-import { Color, Mesh, MeshPhysicalMaterial, PlaneGeometry, Plugin, ShaderMaterial, SphereGeometry, Vector3, property } from "../libs/xviewer";
+import { Color, Mesh, MeshPhysicalMaterial, PlaneGeometry, Plugin, ShaderMaterial, SphereGeometry, Vector3, property } from "../../libs/xviewer";

• 注释掉第52~53行（cameraCenter未知报错）

-this.mesh.position.copy(cameraCenter.clone().add(new Vector3(0, -10, -100)))
-this.plane.position.copy(cameraCenter.clone().add(new Vector3(30, -27, -100)))
+//this.mesh.position.copy(cameraCenter.clone().add(new Vector3(0, -10, -100)))
+//this.plane.position.copy(cameraCenter.clone().add(new Vector3(30, -27, -100)))

2.文件路径报错

打包到dist文件夹后，直接pnpm run preview可以正常运行，但是将dist放到自己的服务器下运行时资源路径会出现错误
（一些png, mp3文件路径/Genshin/*被直接定向至域名下的根目录localhost:8080/Genshin/*，而实际路径为localhost:8080/www-genshin/Genshin/*）

我的解决：

• 在vite.config.ts配置文件中修改为相对路径

export default defineConfig({
+  base: "./",
  plugins: [react()],
})

• 修改src/pages/Menu.tsx中引用的jump.png文件路径（第45行）

-backgroundImage: `url("/Genshin/jump.png")`
+backgroundImage: `url("./Genshin/jump.png")`

• 修改src/core/Game.ts中引用的mp3文件路径（第191~194行）

-AssetManager.Load({ url: "/Genshin/BGM.mp3" });
-AssetManager.Load({ url: "/Genshin/Genshin Impact [Duang].mp3" });
-AssetManager.Load({ url: "/Genshin/Genshin Impact [DoorThrough].mp3" });
-AssetManager.Load({ url: "/Genshin/Genshin Impact [DoorComeout].mp3" });
+AssetManager.Load({ url: "./Genshin/BGM.mp3" });
+AssetManager.Load({ url: "./Genshin/Genshin Impact [Duang].mp3" });
+AssetManager.Load({ url: "./Genshin/Genshin Impact [DoorThrough].mp3" });
+AssetManager.Load({ url: "./Genshin/Genshin Impact [DoorComeout].mp3" });

[lozyue]

补充非常有效👍。
关于 src/core/components/ShaderTest.ts 的 cameraCenter 未知报错，我的解决办法：
在文件第3行添加：

+import { cameraCenter } from "./ForwardCamera";

亲测有效。