一些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";

亲测有效。