感谢教程创作者:Fireship
搭建Vite:
$ npm init vite
// 实时预览
$ npm run dev
安装Three
$ npm install three
部署:
$ npm run build
Vite会默认把静态文件生成在dist文件夹下
教程使用了Vite来创建脚手架,还是挺新鲜的,遇到的最大问题是Vite+Vanilla js 如何正确部署并上传到我的服务器,研究了很长时间,学习笔记:
1 . Vite默认网站文件是位于根目录,如果需要放在服务器其他目录下,需要在项目目录中创建vite.config.js文件,内容为:
// vite.config.js
export default {
"base": "./",
}
有了这个文件,执行build后,dist文件夹内容就可以放到服务器任意目录了,“./”应该也可替换成静态url。
2. 下一个问题是链接文件没有移动到dist文件夹中,这样就算在生产环境可打开页面,图片无法显示,解决方法是在项目目录中创建public文件夹,把图片放入,图片在main.js中仍以“./xxx.jpg”的格式存在,在build的时候Vite会将图片置入dist目录中。参考:
const spaceTexture = new THREE.TextureLoader().load('./space.jpg');
scene.background = spaceTexture;