VUE3_Three项目构建（基础模板）

最新推荐文章于 2025-06-10 13:25:39 发布

HM-hhxx！

最新推荐文章于 2025-06-10 13:25:39 发布

阅读量1.9k

点赞数 2

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/damadashen/article/details/126064919

Three 同时被 2 个专栏收录

23 篇文章

订阅专栏

VUE

20 篇文章

订阅专栏

本文档详细介绍了如何使用Vue3创建一个集成Three.js的项目，从项目创建、配置Three.js、设置glsl语法支持，到项目结构解析，以及最终的项目源码地址和运行效果展示。在项目配置中，涉及了Babel、ESLint的选择，以及项目打包方式的设定。在Three.js的配置中，安装了必要的依赖，并在vue.config.js中添加了glsl支持的配置。项目结构中，src目录下包含了assets、components、router、shader、three、views等多个子目录，分别用于存放不同类型的文件和组件。文章最后提供了项目源码链接和运行效果截图。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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",
        },
      ],
    });
  },