- 博客(174)
- 收藏
- 关注
RSS订阅原创 vue+threeJs 生成一个圆柱体
本文介绍了如何使用Vue.js和Three.js创建3D圆柱体。主要内容包括：1. CylinderGeometry的参数说明（顶部/底部半径、高度、分段数等）；2. 完整代码实现，包含场景初始化、材质设置、光照添加和自动旋转动画；3. 通过OrbitControls实现交互控制；4. 响应式渲染和内存管理技巧。该示例适合作为3D建模基础，可用于创建更复杂的元器件模型。
2025-05-30 11:48:49
800
原创 vue+threeJs 绘制3D圆形
本文介绍了使用Vue+Three.js绘制圆形并实现3D效果的方法。通过THREE.ShapeGeometry和THREE.ExtrudeGeometry类，可以将2D圆形路径转化为3D几何体，并通过参数控制拉伸深度、倒角效果等。文章提供了完整的实例代码，包括场景设置、相机控制、灯光创建等核心功能，并展示了如何开启线框模式（wireframe）进行可视化调试。该技术适用于需要将2D图形转化为3D模型的场景开发，如游戏、可视化项目等。作者通过实践掌握了2D图形3D化的基本技巧，强调了持续学习的重要性。
2025-05-30 09:14:23
748
原创 vue+threeJs 生成云状特效屏幕
本文分享了一个基于Three.js的动态数字云状特效实现方案。通过Vue框架和Three.js库创建了一个具有动态效果的云状背景，详细展示了核心代码实现，包括场景设置、着色器编程（ShaderMaterial）以及动画渲染流程。文章重点说明了动态效果的关键参数iTime的运用，以及如何通过片段着色器调整像素颜色。最后提供了优化建议，如不需要相机控制器、合理释放内存等，并附上相关技术参考链接。该方案适用于需要动态视觉效果的前端项目开发。
2025-05-29 08:40:28
342
原创 vue+threeJs 根据屏幕调整gltf模型的大小、重心、并更换骑车整体颜色
本文介绍了使用Vue和Three.js实现GLTF模型动态调整的案例。主要内容包括：1）通过遍历场景对象实现车身颜色更换功能，预设了13种颜色选项；2）利用THREE.Box3计算模型边界框，根据屏幕高度自动调整模型缩放比例；3）通过OrbitControls实现模型视角控制，并演示了完整的代码实现。文章提供了完整的示例代码，包括模型加载、颜色设置、大小调整等功能，适合Three.js开发者参考学习。
2025-05-28 15:04:47
454
原创 vue+threeJs 创建多色几何体+加载obj模型+跳转ojb模型中心
本文介绍了使用Vue+Three.js实现多色几何体创建、OBJ模型加载及模型中心跳转的方法。主要内容包括：通过GridHelper创建辅助网格；使用OBJLoader加载模型，并通过Box3的getCenter方法获取模型中心位置，调整模型顶点位置使其居中；将模型添加至Group实现旋转效果。文中提供了完整的实例代码，包含场景初始化、灯光设置、模型加载和动画渲染等核心功能实现，并比较了OBJ与GLTF模型的差异。最后总结了关键点：模型中心位置调整方法、OBJLoader的加载管理及两种模型格式的处理区别。
2025-05-27 18:58:07
658
原创 vue+threeJs 设置模型默认的旋转角度
本文介绍了在Vue+Three.js中设置3D模型默认旋转角度的方法。主要内容包括：1) 使用Math.PI定义圆周率；2) 利用Quaternion四元数实现无万向锁的模型旋转；3) 提供了完整的实例代码，展示如何创建3D场景、设置相机参数、添加轨道控制器，并通过四元数设置模型默认旋转角度。文章还包含对three.js常用功能的封装建议，以及场景清理等开发注意事项。通过这个方法可以方便地控制3D模型的初始视角，适用于各种3D展示场景。
2025-05-27 15:54:46
423
原创 vue+ThreeJs 创造自动选择的甜甜圈（圆环）
本文介绍了使用Vue+Three.js创建3D自动旋转圆环的实现方法。通过TorusGeometry类定义圆环几何体，设置半径、管径等参数，并添加材质效果。项目实现了圆环自动缓慢旋转的视觉效果，包含完整的代码示例，从场景初始化、光源设置到渲染循环。文章还提醒注意内存释放等优化事项，适合前端开发者学习Three.js基础3D开发。技术要点包括：Three.js场景搭建、几何体创建、轨道控制器使用和动画渲染实现。
2025-05-26 13:51:43
268
原创 vue+ThreeJs 创建过渡圆圈效果
摘要：本文介绍了使用Vue和Three.js创建过渡圆圈效果的实现方法。重点讲解了着色器中distance、smoothstep和length等函数的作用，并通过实例代码演示了如何构建动态过渡效果。文章包含完整的Three.js场景搭建、着色器编写和动画渲染过程，最后提醒注意内存释放。适合前端开发者和Three.js初学者学习基本的着色器过渡效果实现。
2025-05-26 10:55:14
484
原创 vue+js 创造动态的光晕圈
本文介绍了如何使用Vue和Three.js创建动态光晕圈效果。主要内容包括：1. 着色器基础概念，如uniform变量iResolution(定义画布分辨率)和iTime(用于时间动画)；2. 通过Vue组件实现Three.js场景，包含相机设置、渲染器配置和着色器材质创建；3. 关键代码解析，展示了平面几何体(PlaneGeometry)和自定义着色器材质(ShaderMaterial)的实现，其中片段着色器实现了旋转光晕效果；4. 强调通过实践积累经验的学习方法，建议先完成项目再逐步深入理解。文章提供了
2025-05-25 16:38:36
366
原创 vue+threeJs 创造镂空管状
本文分享了使用Vue+Three.js创建镂空管状几何体的实践过程。作者通过CatmullRomCurve3算法定义曲线路径，结合TubeGeometry构建管状模型，并应用ShaderMaterial实现透明和颜色效果。文章包含完整代码示例，展示了如何设置网格参数、着色器编程以及动画渲染。作者总结了两点收获：1) 掌握管状几何体创建方法；2) 初步理解着色器的UV坐标和颜色控制。最后以"在练习中学习，在学习中复盘"的成长理念作结，鼓励持续实践。
2025-05-24 15:32:23
443
原创 vue+threeJS 创建镂空球体（SphereGeometry）
本文介绍了如何使用Vue和Three.js创建镂空球体。首先，通过ShaderMaterial编写着色器代码，定义顶点着色器和片段着色器，实现独特的视觉效果。接着，利用vUv传递模型的UV纹理坐标。实例代码展示了如何创建球体、设置材质、添加光照和动画效果。总结中提到，几何体可以更换为其他形状，着色器模块具有灵活性，且可以通过合并多个三角形模块提升页面美观度。最后，鼓励读者点赞和关注，并提供了相关参考链接。
2025-05-23 09:39:46
322
原创 vue+threeJs 创建千色三角形宇宙
小路分享了使用Vue和Three.js创建“千色三角形宇宙”的项目经验。首先，他强调了在Vue项目中切换页面时，需注意释放渲染内存，避免内存泄漏。其次，他提到将常用功能封装到commonThree.js中，如生成随机颜色、三角形和光点，以提高代码复用性。实例代码展示了如何创建100个随机颜色的三角形，并通过Three.js的渲染器、场景、相机和控制器实现动态效果。最后，小路总结了持续练习的重要性，并鼓励大家点赞和关注。参考文章提供了更多关于代码封装的细节。
2025-05-21 10:50:15
418
原创 vue+threeJs 在开发中将部分常用的代码模块封装
本文介绍了在Vue和Three.js开发中，如何将常用的代码模块进行封装，以提高代码的复用性和开发效率。具体包括三个封装示例：生成随机颜色、创建光源和生成三角形。通过将这些功能封装成独立的函数，开发者可以在不同项目中轻松调用，减少重复代码的编写。文章还强调了封装代码的重要性，它不仅提升了代码的可维护性，还能显著提高开发效率，是实现复杂系统模块化的关键手段。最后，作者鼓励读者在开发中多进行代码封装，并通过点赞和关注支持其内容。
2025-05-21 10:09:25
732
原创 vue+three.js 五彩烟花效果封装+加载字体
本文介绍了如何使用Vue和Three.js实现五彩烟花效果，并加载字体以创建节日庆典背景。首先，通过FontLoader和TextGeometry加载字体，并将其转换为JSON格式。接着，封装烟花类，允许动态改变颜色，并通过export default导出类，确保烟花能在屏幕上正确显示。文章还提供了实例代码，展示了如何创建3D场景、加载字体、生成随机位置的烟花，并更新烟花状态。最后，总结了实现过程，并预祝读者端午节快乐。
2025-05-20 16:28:58
479
原创 vue+threeJs 生成烟花效果
小路分享了使用Vue和Three.js生成烟花效果的项目经验。首先，他尝试通过AI生成代码，但发现生成的代码老旧、无法在本地运行且不符合需求，尽管注释清晰。接着，他转向GitHub和Gitee上的项目，学习Three.js的代码技巧，并习惯在Vue3中使用函数封装。在实例代码中，他展示了如何创建3D场景、相机、渲染器、光源以及烟花粒子类，并通过随机位置生成烟花效果。最后，他总结了学习过程中的经验，强调了以AI和代码为师的思路，并鼓励大家点赞和关注。
2025-05-20 11:32:40
626
原创 uniapp 微信小程序 获取openId
小路在本次分享中介绍了如何在uniapp微信小程序中获取用户的openId。主要使用了uni.login方法，通过微信登录获取用户的code，然后调用后端接口，结合appid和appscret，从微信服务器获取openId和access_token。文章还提供了前端代码示例，展示了如何实现这一过程，并提醒开发者根据自身框架在api中添加getOpenId方法。最后，小路鼓励读者点赞和关注，以获取更多技术分享。
2025-05-19 10:58:54
840
原创 uniapp vue 开发微信小程序 分包梳理经验总结
在UniApp+Vue框架下开发微信小程序时，分包加载是优化项目性能的关键策略。本文总结了分包加载的几点经验：首先，主包大小应控制在1M左右，以预留空间加载大静态文件如echart.min.js，且这些文件需放置在static文件夹内。其次，预加载的分包总大小不应超过2M，以避免报错。最后，合理规划分包，特别是在功能复杂、资源丰富的项目中，如商城应用，确保主包与分包的协调加载。这些策略有助于提升小程序的启动速度和运行效率。
2025-05-19 09:19:52
868
原创 vue+threeJS 大理石贴图
通过 Vue 3 和 Three.js 实现大理石纹理效果，并将这种技术应用于产品展示、虚拟展览、甚至是互动游戏之中，其潜力无穷。今天主要介绍基础的大理石贴图。
2025-05-12 16:23:07
386
原创 vue3+three 搭建平面上滚动旋转的几何体
在现代前端开发中，结合 Vue 3 的响应式能力和 Three.js 的强大 3D 渲染能力，可以轻松构建出令人惊叹的交互式三维场景。本文将带你一步步实现一个基础但极具视觉吸引力的效果 —— 在平面上滚动并自转的几何体。
2025-05-12 15:49:57
635
原创 vue3 threeJs Sprite模拟下雨、下雪
嗨，我是小路。今天主要和大家分享的主题是“threeJs Sprite模拟下雨、下雪”。在物联网3D可视化、数字孪生、游戏等项目开发过程中，可能会模拟天气的效果的需求。学会精灵图模拟下雨、下雪，也可以用在官网首页做背景图。
2025-04-30 17:10:52
346
原创 iphonex uniapp textarea标签兼容性处理过程梳理
在uniapp项目中，经常会使用到uniapp原生的textarea标签，但在手机兼容性这块，textarea并不是很好用，会出现一些兼容性问题，如点击输入框，整个页面开始闪烁，或者文字输入返回为undefinded。最终分析，发现textarea支持到iphone/6/7/8,但对iphonex/12/13的兼容性不理想，出现上面的问题。以后遇到兼容性问题，先关注兼容性的特征，可以出现兼容性问题的代码直接屏蔽；但遇到这个问题时，就要从兼容性的特征点去出发，去寻找问题，排查问题，这一点才是比较难了。
2025-04-25 11:41:15
366
原创 echart 雷达图搭建
通过以上步骤，可以轻松地使用 ECharts 搭建一个美观且实用的雷达图。如果你有更复杂的需求（如多组数据对比、动态交互等），可以根据实际情况进一步调整配置项。
2025-04-23 09:34:04
576
原创 threeJs+vue 加载gltf模型,显示进度条
在使用Three.js和Vue加载GLTF相关模型时，添加进度条可以显著提升用户体验，让用户知道模型加载的进展情况。
2025-03-03 14:33:17
591
原创 threeJs+vue 加载gltf模型、获取模型尺寸、播放模型动画
加载GLTF模型到基于Three.js和Vue的项目中是一个常见的需求，特别是在开发需要展示高质量3D内容的应用时。下面，我将提供一个详细的指南，帮助你了解如何在Vue项目中使用Three.js加载GLTF模型。
2025-02-28 14:16:54
900
原创 threeJs+vue 轻松切换几何体贴图
通过Three.js动态切换几何体贴图，不仅能极大地提升您的3D项目的视觉吸引力，还能显著增加用户的互动性和满意度。
2025-02-26 15:31:50
623
原创 threeJs+vue 添加控制面板gui，修改几何体和页面的背景色
在现代Web开发中，创建引人入胜的交互式3D内容已成为提升用户体验的关键因素之一。而将Three.js与Vue结合使用，可以让你轻松构建出既美观又功能强大的3D应用程序。今天，我们将介绍如何通过添加一个直观的GUI控制面板来进一步增强你的Three.js项目，使用户能够实时调整几何体的颜色以及页面的背景色。
2025-02-26 09:09:47
1105
原创 threejs 安装教程
嗨，我是小路。今天主要和大家分享的主题是“threejs 安装教程”。在当今的数字化时代，用户对视觉体验的要求越来越高。传统的2D网页已经无法满足所有需求，而三维（3D）图形技术则为前端开发者提供了新的方向。Three.js 是一个强大的 JavaScript 库，专门用于创建和展示复杂的3D图形，并且可以直接在浏览器中运行。本文将为你详细介绍在项目开发过程中如何创建vue3项目，并在vue3结合Three.js进行3D网页的开发，帮助你快速入门并创建令人惊叹的3D网页应用。
2025-02-24 17:09:29
1456
原创 vue3 创建vue-router
嗨，我是小路。今天主要和大家分享的主题是“vue3 创建vue-router”。前面整理了一篇关于vue2创建vue-router，发现和当前使用的项目vue版本不一致，所以重新将vue-router的使用整理一遍。
2025-02-24 10:28:45
461
2原创 软考高项之规划范围管理考点梳理
范围管理计划是项目管理计划的重要组成部分之一，描述将如何定义、制定、监督和确认项目范围。注意：范围管理计划可以是正式的，也可以是非正式的，可以是详细的，也可以是高度概括的。主要用于指导一下工作：1、制定项目范围说明书2、根据详细项目范围说明书创建wbs3、确定如何审批和维护范围基准4、正式验收已完成的项目可交付成果其中主要考的方式有几点：1、更改其中的定义，将正式验收改为确认；2、将根据详细范围说明书创建wbs改成该项详细需求说明书创建wbs,偷换概念。
2025-02-07 10:57:04
526
原创 聊聊前端发展方向之一的低代码平台
全平台的：宜搭自身有一套全平台的前端后端体系，可以直接使用，可以自动生成二维码，自动适配移动端，用起来很方便，就是数据的一些操作和统计需要另外的处理，不同的页面之间的数据之间交互，用起来比较复杂，但整体还是很好用的，同时还可以搭配钉钉，开发对应的移动端小程序，非常优秀，缺点就是优点贵。：有部分页面需要对数据进行筛选，这就需要使用宜搭本身的数据库低代码体系，直接将sql语句模块化成中文，根据中文拼接成对应的sql语句，然后再进行执行。主要有几种类型：涉及数据库相关的，涉及接口相关的，全平台的。
2025-01-25 08:48:40
272
原创 react面试题二
经常复习常见的前端面试题，主要有以下几个好处：1、巩固基础。很多面试题都会涉及到语言的特点，框架的性能以及浏览器的兼容性等基础知识，可以加深对html、css、js等基础知识的巩固。2、搭建前端体系。很多面试题不仅考基础，还要考一些理论知识，如项目中代码的规范，性能如何优化，git操作规范等等。如git提交时，可以将在开头加上fix,feat等标签字样，可以直观明了的说明提交代码的主要用途，有助于其他同事寻找代码，排查问题。3、积累经验。每次解决前端问题，都是成长，为未来升职加薪或者跳槽加薪打下
2025-01-24 11:37:43
1347
原创 在旧的项目中，如何进行功能优化
一般推荐临时方法，因为这种方法影响小，修改比较简单，而且测试人员没有提高其它的功能模块，所以可以暂时忽略其它模块，只改当前页面，不然自己做了很多的工作，而且任务又玩不成，工作量又大，还可能产生新的bug，吃力不讨好。前几天在对旧代码进行维护，发现前端页面的封装程度很高，如果需要对功能进行修复，就需要对组件进行修改，而这个组件在很多地方都用到了，而自己也不清楚到底哪些页面使用到了这个组件，怎么处理呢？这种修改会对整个项目造成影响，影响比较大，所以测试人员会增加很多的功能量，同时也给自己增加很大的工作量。
2025-01-21 09:38:41
161
原创 vue生成自己的自媒体图片
自己平时有些公众号，有用过一些AI去生成一些图片，也有去素材网站寻找一些文章，后来觉得这些没有自己想要的文字图片，就自己写了一个简单的网页，进行然后将标题填写到里面去，形成自己的想要的图片，简洁好用。
2025-01-14 17:05:48
245
原创 vue运用uniapp框架开发企业微信小程序中常用的一些基础方法
作为一名程序员，很多代码都是忘了再用，用了再忘。今天梳理下日常开发中常用到的一些基础的方法，以方便后期开发使用。加深记忆，提高开发效率。
2025-01-14 16:55:57
727
原创 vue3 面试题：vue3和vue2有什么区别？
vue3和vue2有什么区别？以下主要从性能、新特性、对typescript支持、this关键字、状态管理、周期函数的方面分析下vue3和vue2的区别。
2025-01-08 19:10:16
412
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人