# vue_threejs_study
## Project setup
```
npm install
```
### Compiles and hot-reloads for development
```
npm run serve
```
### Compiles and minifies for production
```
npm run build
```
### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).
```
1.Three.js 点击模型,高亮发光模型外轮廓
https://blog.csdn.net/GISuuser/article/details/126136366
2.一篇文章了解 threejs 在 vue 项目中的基本使用
https://blog.csdn.net/weixin_42776111/article/details/127511552
3.three.js 给地球加标签和弹窗
https://blog.csdn.net/weixin_38946164/article/details/125992061
4.three.js 制作地球标注的两种方法
https://blog.csdn.net/weixin_38946164/article/details/125972252
5.three.js canvas vue3+vite的一个demo
https://blog.csdn.net/weixin_42147400/article/details/127167290
6.three.js绘制直线
https://blog.csdn.net/yinge0508/article/details/122984639
7.Threejs实现模拟河流,水面水流,水管水流,海面
https://blog.csdn.net/baidu_29701003/article/details/125505876
8.Threejs物联网,工厂3D可视化,加载模型,水流监测,标签动态数据展示
https://blog.csdn.net/baidu_29701003/article/details/123833477
9.threejs-纹理贴图
https://blog.csdn.net/qq_37987033/article/details/126533553
10.threejs效果比较好的天空和水面
https://blog.csdn.net/Zz10566/article/details/125895470
11.Three.js实现可透视的水面效果
https://www.cnblogs.com/jiujiubashiyi/p/17433449.html
12.three.js学习笔记(十九)——后期处理
https://blog.csdn.net/weixin_43990650/article/details/126249530
13.Three.js 点击模型,高亮发光模型外轮廓
https://blog.csdn.net/GISuuser/article/details/126136366
14.three.js
https://threejs.org/docs/index.html#api/zh/textures/VideoTexture
15.处理天空图软件
https://jaxry.github.io/panorama-to-cubemap/
16.JavaScript对象转JSON
http://www.atoolbox.net/Tool.php?Id=1006
17.李伟的博客
http://yxyy.name/blog/
18.跃焱邵隼
https://www.wellyyss.cn/ys-cesium/#/
19 Three.js中文网(郭隆邦博客)
http://www.webgl3d.cn/pages/e28594/
20.3D模型
https://ch.3dexport.com/free-3d-models/industrial?page=2
https://sketchfab.com/categories/architecture
https://brandfolder.com/sketchfab?locale=zh
21.vue + threejs 给3D模型添加label标签(dom的方式)
https://blog.csdn.net/CodingNoob/article/details/124254378
22.blender 制作城市建筑模型
https://blog.csdn.net/qq_40257538/article/details/130371231
23.BlenderGIS插件 城市建筑3D模型自动生成 教程
https://blog.csdn.net/ChaoChao66666/article/details/127920891
24.Three.js+mapbox 快速构建三维城市可视化效果,三维城市漫游!
https://zhuanlan.zhihu.com/p/596693422
25.利用blender+Open Street Map+blender-geo制作3D地图渲染图
https://blog.csdn.net/u011070272/article/details/53067762
https://pan.baidu.com/s/1WefBJv94RkMVue53_-mYnw?from=init
26.three.js 使用 ShaderMaterial 材质深度信息丢失问题
https://www.195440.com/3295
https://www.cnblogs.com/yaosusu/category/1514966.html
https://blog.csdn.net/u010657801/article/details/129500470
https://www.cnblogs.com/w-wanglei/p/6736615.html
27.所有开发文档
https://devdocs.io/
28.threejs深入纹理,立体场景cubeResolution(四)
http://www.cnblogs.com/hsprout/p/7989076.html
29.$ npm install draco3d
https://github.com/google/draco/tree/master/javascript/npm/draco3d
30.three.js使用CubeCamera创建反光效果,动态环境贴图实现,立方体全景贴图(vue中使用three.js83)
https://blog.csdn.net/qw8704149/article/details/117606904
31.three.js天空盒贴地解决方案
https://blog.csdn.net/soclear_/article/details/123787852
32.three.js Material半透明材质遮挡后面的模型
https://blog.csdn.net/m0_58028532/article/details/118379574
33.Three.js 模型闪烁重影(深度问题)
https://blog.csdn.net/RumbleWx/article/details/125977327
34.three.js模型之间出现穿模问题
https://blog.csdn.net/dick_1999/article/details/122299522
35.Threejs中的透明对象、模型的重叠部位显示错误
https://blog.csdn.net/dick_1999/article/details/122358866
```
vue-threejs
需积分: 0 77 浏览量
更新于2023-06-12
收藏 23.11MB RAR AIGC 举报
Vue.js 是一款流行的前端JavaScript框架,它以组件化开发、轻量级和高效著称。Vue.js 提供了丰富的生态系统,使得开发者可以方便地与其他库和工具集成,比如本话题中的 "vue-threejs",它是将 Three.js 与 Vue.js 结合的一个项目。
Three.js 是一个基于 WebGL 的 JavaScript 3D 库,它简化了在浏览器中创建三维图形的复杂性。Three.js 提供了大量预定义的对象、材质、光源和相机类型,以及动画和交互处理等功能,为WebGL编程提供了一层抽象。
"vue-threejs" 项目是将 Vue.js 的组件化思想与 Three.js 的3D渲染能力结合的产物。通过这个项目,开发者可以在 Vue 组件中无缝地使用 Three.js,实现3D元素的创建、更新和管理,以及与用户交互。
项目中包含的文件有:
1. `.gitignore`:这是一个配置文件,用于指示Git忽略某些不需要版本控制的文件或目录,如编译产出物、缓存文件等。
2. `vue.config.js`:这是 Vue CLI 的配置文件,可以自定义项目的构建设置,如端口、公共路径、代理等。
3. `babel.config.js`:Babel 的配置文件,用于转换现代JavaScript语法到浏览器支持的旧版JavaScript,确保代码兼容性。
4. `package-lock.json`:此文件由npm生成,记录了所有依赖包的确切版本,确保团队成员之间的依赖一致性。
5. `package.json`:项目的核心配置文件,包含了项目信息、依赖库列表及其版本。
6. `jsconfig.json`:JavaScript配置文件,通常用于VS Code这样的IDE,帮助提高代码智能提示和导航功能。
7. `README.md`:项目介绍文件,通常包含项目的基本信息、安装和使用指南。
8. `src`:源代码目录,通常包含Vue组件、样式、脚本等。
9. `public`:公共资源目录,存放不需经过webpack处理的静态资源,如HTML入口文件、图标等。
在实际开发中,"vue-threejs"项目可能包含以下步骤:
1. **安装依赖**:首先通过npm或yarn安装vue、three以及vue-threejs相关的插件。
2. **创建Vue组件**:在`src/components`目录下创建Vue组件,导入Three.js库并初始化场景、相机和渲染器。
3. **定义3D元素**:在组件中创建Three.js对象,如几何体、材质、光源等,并将其添加到场景中。
4. **组件通信**:利用Vue的props和事件系统,实现组件间的3D元素交互,如传递数据、触发3D动作。
5. **动画和交互**:使用Vue的生命周期钩子或Three.js的动画系统实现3D元素的动态效果,同时可以结合Three.js的Raycaster实现鼠标或触摸的交互功能。
6. **配置Vue CLI**:在`vue.config.js`中设置Webpack的配置,可能包括对Three.js非模块化库的处理,或者自定义打包规则。
7. **测试和部署**:使用Vue CLI的命令进行本地开发、测试,然后打包项目部署到服务器。
通过这个项目,开发者可以充分发挥Vue.js的易用性和Three.js的3D渲染能力,构建出具有出色用户体验的3D Web应用。同时,这也是前端技术发展的一个实例,展示了框架与库的深度融合如何促进Web开发的进步。

vitenode
- 粉丝: 285