动态交互网站 Vite+Vanilla js+Three

搭建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;