- 博客(151)
- 收藏
- 关注
RSS订阅原创 【案例】Three.js 模拟水波纹与天空场景（附案例代码）
Three.js实现动态水面与真实天空效果 本文介绍了如何使用Three.js的Water和Sky类创建逼真的水面和天空效果。通过PlaneGeometry创建水面载体，配合法线贴图实现波纹动画，调整参数控制水面扭曲、反射和颜色。Sky类通过大气散射算法渲染动态天空，并能转换为环境贴图影响场景光照。文章还演示了如何添加浮动方块增强场景互动性，完整代码展示了水波动画、天空光照与物体反射的整合实现。关键点包括：使用官方着色器简化开发、参数调优实现自然效果、通过PMREMGenerator生成环境贴图。
2025-09-03 16:05:37
504
原创 【案例】Three.js 半球光与雪花降落场景（附案例代码）
摘要： 本文介绍了Three.js中半球光(HemisphereLight)的应用，模拟天空与地面的环境光效果，适合室外场景但无法产生阴影，需配合平行光(DirectionalLight)实现阴影。通过代码示例展示了如何创建半球光、平行光、地面和球体，并设置阴影效果。此外，还演示了雪花粒子系统的实现，包括加载雪花纹理、生成随机粒子位置以及下落动画，最终形成完整的冬日场景渲染效果。完整代码提供了场景搭建、光照设置和粒子动画的整合方案。
2025-09-03 14:35:38
806
原创 【基础】Three.js中的粒子系统 （附案例代码）
Three.js 粒子系统教程：创建动态粒子效果 本文介绍了使用Three.js创建粒子系统的方法，包括基础实现和纹理增强效果。核心通过THREE.Points类结合BufferGeometry和PointsMaterial，实现大量粒子的渲染。文章详细讲解了基础方形粒子的创建过程，并解释了默认呈现正方形的原因。随后展示了如何通过纹理贴图实现圆形和雪花粒子效果，包括纹理加载、透明度设置和动画实现。文中还提供了粒子动画代码，演示了上下浮动和螺旋运动效果，并附有完整的代码示例和效果GIF展示。最后给出了纹理图片
2025-09-01 10:07:03
1149
原创 【基础】Three.js中如何添加阴影（附案例代码）
这篇文章介绍了如何使用three.js实现阴影效果，主要包含三个关键步骤：1. 渲染器开启阴影功能；2. 使用支持阴影的光源（定向光、点光源、聚光灯）；3. 设置物体材质为支持光照的材质并开启投射/接收阴影。文中提供了完整代码示例，包括场景搭建、光源设置、球体动画和调试面板等，并解释了为什么动画要使用requestAnimationFrame而不是setInterval（更流畅、后台节能等）。最后还给出了相关基础教程链接，适合three.js初学者学习阴影实现。
2025-09-01 09:47:33
831
原创 ETag + If-Match和ETag + If-None-Match 的区别与使用场景
摘要：HTTP协议通过ETag机制解决资源并发修改和缓存验证问题。ETag是服务器生成的资源版本标识，客户端在修改资源时携带If-Match头验证版本一致性，若冲突则返回412错误；在获取资源时使用If-None-Match头验证缓存有效性，未变更则返回304状态码。前者用于防止多人同时修改导致的冲突，后者用于优化静态资源加载性能。两种机制分别适用于不同的HTTP方法和场景，共同保障Web应用的并发控制和缓存效率。
2025-08-26 09:09:24
448
原创 文件导出时无法获取响应头Content-Disposition的文件名
前端无法直接获取Content-Disposition响应头是因浏览器CORS安全限制，需后端通过Access-Control-Expose-Headers显式暴露。解决方案包括后端配置响应头，前端通过正则解析文件名，并提供完整的文件下载方法（支持zip/csv/xlsx），处理Blob响应及错误类型。代码示例涵盖文件名提取、下载逻辑及异常处理，确保导出功能兼容多种文件格式。
2025-08-20 09:50:55
505
原创 Vuetify日期时间选择器的使用与踩坑
摘要：Vuetify 3中时间选择器(v-time-picker)是需单独引入的实验性组件。本文介绍了如何结合v-date-picker和v-time-picker封装可复用的日期时间选择器组件，使用dayjs处理日期格式。组件包含输入框触发器、日期/时间选择面板及确认/取消功能，支持双向绑定和清空操作。使用时需先安装dayjs，然后在项目中导入封装好的组件即可实现完整的日期时间选择功能。
2025-08-11 09:33:23
512
原创 vue和React中配置Eslint和Prettier
本文介绍了如何在Vue和React项目中配置ESLint代码检查工具。对于Vue项目，需安装ESLint核心包、Vue插件、Prettier等依赖，并创建包含JavaScript和Vue文件特定规则的配置文件，同时配置Prettier格式化规则。React项目则需要额外安装React相关插件，更新ESLint配置以支持JSX和React Hooks等特性。两种配置都包含忽略文件设置、基础规则和自定义规则，并提供了运行检查的npm脚本命令。通过合理配置ESLint，可以统一团队代码风格，提高代码质量。
2025-07-14 15:42:05
278
原创 RAG 推理引擎：如何通过外部知识库提升AI搜索与生成能力？
RAG（检索增强生成）技术解析 RAG是一种让大语言模型实现开卷考试的智能系统，通过结合信息检索与文本生成能力，提升回答的准确性和时效性。其工作流程分为： 离线索引阶段 文档切块处理 文本向量化嵌入 构建向量数据库 在线推理阶段 将用户问题转换为向量 检索相似度最高的Top-K文本片段 组合检索结果与原始问题生成增强提示 大模型基于提示生成最终答案 RAG的核心价值在于：降低AI幻觉、支持知识实时更新、提高答案可追溯性，以及无需微调即可注入领域知识。通过结构化提示工程，RAG将开放问
2025-07-11 17:24:08
875
原创 WSL/Linux 常用命令速查
这篇文章总结了Linux/WSL中的常用命令，分为5大类别：1)系统基础命令如pwd、ls等目录操作；2)Debian/Ubuntu的软件管理命令apt；3)网络相关命令如ping、ssh；4)文件查看编辑命令cat、vim；5)Git版本控制命令。特别说明了组合命令的用法，如sudo apt update && sudo apt install表示管理员身份更新并安装软件。这些命令涵盖了Linux系统操作、软件管理、网络工具、文件处理及版本控制等核心功能。
2025-06-30 17:28:22
338
原创 使用WSL在Ollama本地模型部署（windows）
本文介绍了如何在Windows系统的WSL（Windows Subsystem for Linux）中安装Ubuntu子系统，并部署Ollama工具来本地运行开源大语言模型。主要内容包括：1）通过PowerShell命令安装WSL和Ubuntu；2）三种方法在Ubuntu中安装Ollama（自动安装脚本、手动安装或本地下载安装）；3）启动Ollama服务并运行轻量级AI模型（如deepseek-r1:1.5b）。文章还提供了WSL常用命令和Ollama模型库链接，帮助用户在Windows环境下实现离线AI模
2025-06-30 16:56:20
1361
原创 前端实现导出element-plus表格和从后端获取数据导出，支持勾选导出
本文介绍了如何使用file-saver和xlsx库实现前端Excel文件导出功能。通过element-plus表格组件展示数据，支持选择导出勾选项或默认导出全部数据。代码实现了表头映射、列宽设置、状态格式化等功能，最终将JSON数据转为Excel文件并触发浏览器下载。核心步骤包括：安装依赖、构建工作表、设置格式、生成文件并保存。该方案适用于前端处理表格数据导出需求，提供了灵活的配置选项。
2025-05-26 15:04:53
1395
原创 AI提示怎么写最聪明？来自Google 的提示工程
LLM 并不正式地预测单个 token。相反，LLM 预测下一个 token 可能是什么的概率，LLM 词汇表中的每个 token 都有一个概率。然后对这些 token 概率进行采样，以确定下一个生成的 token 将是什么。
2025-04-29 13:18:11
930
原创 使用github pages部署vuepress搭建的博客
几个月前写了一篇，拖了几个月终于把这篇github pages部署方法写好了（我太懒了🥹）这里我使用的是部署之前搭建的博客，因为它是免费的！部署起来也比较方便，缺点是域名有些不美观，会有些长。
2025-04-14 10:00:34
460
原创 长轮询和短轮询的区别？
短轮询：前端固定时间间隔（如每 5 秒）发送 HTTP 请求，获取最新数据。服务器不管有没有新数据，都返回响应，前端定时继续请求。
2025-03-04 10:11:09
510
原创 前端如何渲染几千几万条数据而不卡顿?
在 Vue 中渲染成千上万条数据时，直接渲染所有 DOM 节点会导致严重的性能问题（如内存占用高、渲染卡顿）。
2025-03-03 16:21:45
1440
1
原创 从vue底层原理上解释ref和reactive的区别
在 Vue 3 中，ref 和 reactive 是用于的两种核心 API，它们的底层实现和适用场景有显著差异。
2025-02-24 16:39:41
663
原创 HTTP1.0/1.1/2.0/3.0 的区别?
HTTP（Hypertext Transfer Protocol）是用于传输超文本的协议。各版本的主要区别体现在性能优化、数据传输方式以及支持的功能上。
2025-01-15 14:55:06
952
原创 什么是 DNS？DNS 的三种查询方式？
DNS（Domain Names System），域名系统，是互联网一项服务，是进行和与之相对应的进行转换的服务器。简单来讲，DNS相当于一个翻译官，负责将域名翻译成ip地址。域名是一个树状结构，最顶层的域名是（root），然后是（top-level domain，简写 TLD），再是。例如www.xxx.com，www为、xxx为、com为，系统为用户做了兼容，域名末尾的一般不需要输入。这种树状结构的意义在于，只有上级域名，才知道下一级域名的 IP 地址，需要逐级查询。
2025-01-15 13:53:16
1903
原创 Javascript中正常对象和异质对象是什么？
正常对象是指符合 ECMAScript 规范中默认行为的对象。这些对象没有特别的内部行为或自定义逻辑，它们的属性访问、赋值、删除等操作完全遵循语言的标准行为。
2025-01-13 15:33:01
475
原创 Web Worker和 Service Worker 的区别和共同点？
Web Worker 是浏览器提供的多线程机制，用于在后台执行脚本,适合长时间运行的计算密集型任务。
2025-01-06 11:01:56
1203
原创 JavaScript中对象继承的方式有哪些？
父类的属性和方法不会共享到所有子类实例，支持向父类传递参数。通过在子类的构造函数中调用父类构造函数，避免共享引用类型属性，也就是下面所提到的。采用这种方式父类构造函数只调用一次，继承了父类的实例属性和原型方法，高效且是目前最常用的继承方式。继承了父类的实例属性和原型方法，不会共享引用类型属性，每个实例都可以单独使用父类的方法。简化了继承的语法，支持调用父类构造函数（super），更符合面向对象编程的习惯。当使用原型链继承时，父类的引用类型属性会被所有子类实例共享，子类通过原型链继承父类的属性和方法。
2025-01-06 09:58:56
508
原创 《Vue.js设计与实现》权衡的艺术、框架设计的核心要素
从范式上来看，视图层框架通常分为命令式和声明式。早年间流行的 jQuery 就是典型的命令式框架。命令式框架的一大特点就是关注过程，每一步都有确定的执行步骤。
2024-12-26 16:19:58
1115
原创 什么是Web Worker？如何使用Web Worker？
JavaScript 语言采用的是单线程的，也就是说，所有任务只能在一个线程上完成，一次只能做一件事。前面的任务没做完，后面的任务只能等着。是一种，允许在后台线程中执行脚本，从而避免长时间运行的脚本阻塞用户界面。Web Worker 的作用，就是。在主线程运行的同时，Worker 线程在后台运行，两者互不干扰。等到 Worker 线程完成计算任务，再把结果返回给主线程。主线程与 Worker 之间的通信内容，
2024-11-27 14:01:59
2913
原创 【react】Redux基础用法
Redux 是一个用于 JavaScript 应用的状态管理库，它不依赖于任何 UI库，但常用于与 React 框架配合使用。它提供了一种集中式的状态管理方式，将应用的所有状态保存在一个单一的全局 Store（存储）中，使得状态的变化和共享变得更加可控和可预测。✨Redux 的核心概念：StoreRedux 的 Store 是一个对象，存储了应用的全部状态。应用中只有一个 Store，作为单一数据源。任何组件需要访问状态时都会从这个 Store 中获取数据。ActionAction 是一个简单的 Jav
2024-11-05 08:18:38
1774
原创 【react】基础知识点学习
useState是一个 React Hook(函数)，它允许我们向组件添加一个状态变量，从而控制影响组件的渲染结果。也就是当数据发生变化时，页面也会跟着变化。
2024-10-30 10:59:47
1455
原创 基础教程 | 用VuePress搭建一个简单的个人博客（附源码）
用VuePress搭建一个简单的个人博客基础教程，基础版和美化版风格 （附源码）
2024-10-09 13:44:57
3822
2
原创 使用原生HTML的drag实现元素的拖拽
HTML 拖放（Drag and Drop）接口使应用程序能够在浏览器中使用拖放功能。例如，用户可使用鼠标选择可拖拽（draggable）元素，将元素拖拽到可放置（droppable）元素，并释放鼠标按钮以放置这些元素。拖拽操作期间，会有一个可拖拽元素的半透明快照跟随着鼠标指针
2024-09-12 11:51:40
1592
原创 Vue3.5正式上线，有哪些新特性和用法？
9月1日， Vue 3.5 正式发布了！此次要版本不包含重大更改，并且包括内部改进和有用的新功能。我们将在这篇博文中介绍一些亮点 - 有关更改和新功能的完整列表，请参阅 GitHub 上的完整更新日志。
2024-09-10 15:57:06
4049
原创 【基础】Three.js 自定义几何体和复制几何体
通过自定义顶点数据，可以创建任意的几何体。像threejs的长方体BoxGeometry、球体SphereGeometry等几何体都是基于BufferGeometry类构建的，它表示一个没有任何形状的空几何体。
2024-09-06 16:45:57
1274
原创 【基础】Three.js加载纹理贴图、加载外部gltf格式文件
.gltf（JSON文件）: 描述模型的主要结构，包括几何体、材质、动画、场景等。.bin（二进制文件）: 存储顶点数据、法线、UV坐标等二进制数据。纹理（.png, .jpg）: 存储模型使用的纹理贴图。。
2024-09-02 17:27:54
3420
原创 【基础】Three.js中添加操作面板，GUI可视化调试（附案例代码）
1.先引入GUI库：2.实例化gui对象，并添加需要显示的参数:3.分组案例代码：
2024-08-28 16:55:15
2061
原创 使用vueuse在组件内复用模板
如果你有一组表单元素（如输入框、下拉菜单等），并且这些元素在多个表单或多个组件中使用，createReusableTemplate 可以帮助你将这些表单元素封装为一个可复用的模板。： 如果你有一套通用的布局结构，例如卡片布局或者特定的网格布局，并且在多个组件中使用相同的结构，可以通过 createReusableTemplate 进行封装和复用。： 假设你有一个复杂的列表项结构，需要在多个地方使用，比如在主页的推荐列表和分类页的商品列表中。这对于需要在多个组件中重复使用相同的结构和逻辑时非常有用。
2024-08-27 17:32:00
1139
原创 使用html2canvas将网页导出为图片
Vue 3 的 ref 用来引用 DOM 元素。我们通过 exportContent 引用需要导出的 DOM 元素。：html2canvas 库会将指定的 DOM 元素渲染为画布（canvas），然后可以通过。// backgroundColor: null, // 保留背景透明度。// 使用 html2canvas 渲染指定的 DOM 元素。将画布转换为图片的 Base64 数据 URL。// 将画布转换为图片数据 URL。方法自动触发图片的下载。// 启用跨域资源支持。// 创建一个下载链接。
2024-08-22 11:32:42
2045
原创 【css】伪元素实现图片悬停文字聚焦效果
创建两层边框效果，悬停时它们会从上下两端逐渐收缩，覆盖在图片上，形成一个视觉上的悬停突出效果。将 .box 文字盒子定位在图片上方。父容器 .img-wrap 使用了。伪元素实现半透明黑色背景层，这些伪元素在正常状态下通过。确保子元素的绝对定位在父容器的边界内生效。// 伪元素实现两层边框效果半透明黑色背景层。// 图片和文字盒子上的所有元素都有过渡效果。图片和文字盒子上的所有过渡效果都设置了。，使得在悬停时的动画效果平滑。进行隐藏，并在悬停时使用。
2024-08-21 15:04:55
839
原创 css实现闪烁渐变背景，@property自定义属性
@property是 CSS 中一个相对较新的功能，主要用于定义自定义属性（即 CSS 变量）的类型、继承性以及初始值。它允许开发者更好地控制和利用 CSS 自定义属性，尤其是在动画、过渡等动态场景中。
2024-08-20 13:54:32
1038
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人