VUE3_Three项目构建（基础模板）

最新推荐文章于 2024-05-17 10:13:46 发布

HM-hhxx！

最新推荐文章于 2024-05-17 10:13:46 发布

阅读量1.6k

点赞数 2

分类专栏： Three VUE 文章标签： vue.js javascript Three.js three.js 着色器

本文链接：https://blog.csdn.net/damadashen/article/details/126064919

版权

Three 同时被 2 个专栏收录

23 篇文章 20 订阅

订阅专栏

VUE

20 篇文章 1 订阅

订阅专栏

2.2 配置glsl语法支持：在vue.config.js文件添加如下代码

1. VUE3项目创建

1.1 项目创建

vue create vue_three_template

1.2 项目配置

Default([Vue 3] babel, eslint):vue3的项目，只包含js编译器babel，代码检测工具eslint。
Default([Vue 2] babel, eslint):vue2的项目，只包含js编译器babel，代码检测工具eslint。
Manually select features:自定义添加选择功能。

Babel：js编译器
Typescript：js的超集
Progressive Web App Support:渐进式的网页应用程序
Router:vue的路由
Vuex:vue的状态管理
CSS Pre-processors:css的预处理器
Linter/Formatter:代码风格检测与格式化(如果自己代码不是很规范的话可以用这个约束下自己,也可不选择，按照自己的风格)
Unit Testing:单元测试
E2E Testing:端对端测试
（选项根据个人需求选择）

选择VUE3版本：

Babel、ESLint 等的配置存放选择都存放在package.json中，选择第二项：

是否选择保存配置：

选择打包方式：

1.3 项目创建完成

主要内容如下：

2. 配置Three.js

2.1 安装项目所需依赖

1）安装Three

npm install three --save
or
yarn add three

2)安装dat.gui

npm install webpack-glsl-loader
or
yarn add webpack-glsl-loader

3)安装glsl-loader

npm install webpack-glsl-loader
or
yarn add webpack-glsl-loader

2.2 配置glsl语法支持：
在vue.config.js文件添加如下代码

configureWebpack: (config) => {
    config.module.rules.push({
      test: /\.glsl$/,
      use: [
        {
          loader: "webpack-glsl-loader",
        },
      ],
    });
  },