VUE+THREE.JS创建基础项目

1.vue create 项目名称

2.选择VUE3，vue2没有public文件夹，引入静态(非代码类)文件放在public下

public下文件直接使用：gltfLoader.load(`${process.env.BASE_URL}ew8.glb`)引入

选择 bable router css

3.npm install three --save

4.npm install dat.gui  右上角控制器

5.npm install webpack-glsl-loader  着色器 为了在vue导入并使用glsl文件

安装后需修改vue.config.js，告诉webpack在遇到.glsl文件时要使用webpack-glsl-loader加载器

可以解决glsl文件报错：找不到加载器

6.在vue.config.js文件添加如下代码

module.exports = defineConfig({

  transpileDependencies: true,

  lintOnSave: false,

  configureWebpack: (config) => {

    config.module.rules.push({

      test: /\.glsl$/,

      use: [

        {

          loader: "webpack-glsl-loader",

        },

      ],

    });

  },

});

    

注：异常记录

1.无法将“yarn”项识别为 cmdlet、函数、脚本文件或可运行程序的名称

npm install -g yarn

2.This version of npm is compatible with lockfileVersion@1, but package-lock.json was generated for lockfileVersion@2. I'll try to do my best with it!

npm install -g npm