- 博客(68)
- 收藏
- 关注
RSS订阅原创 基于MDX的在线文档实时编译方案
MDX 是一种用于编写 Markdown 和 JSX 内容的格式，其全称是 “Markdown for JSX”。它结合了 Markdown 的简洁易用与 JSX（JavaScript XML）的强大功能，使得开发者可以在 Markdown 文档中直接插入并使用 React 组件。这种格式特别适合于构建内容丰富的文档或博客，同时需要一部分动态、交互性组件的项目。
2025-05-21 20:28:54
468
原创 MCP协议简单拆解
模型上下文协议（Model Context Protocol，MCP），是由 Anthropic推出的开源协议，旨在实现大语言模型与外部数据源和工具的集成，用来在大模型和数据源之间建立安全双向的连接。模型上下文协议协议是专为高效获得模型所需要上下文信息而设计的通用接口，可以将推动大语言模型应用的标准化和去中心化。
2025-04-29 10:56:19
774
原创 基于Node+HeadlessBrowser的浏览器自动化方案
Playwright：适合需要多浏览器支持的项目，API 现代且跨平台，对新功能的支持很快。Puppeteer：专注于 Chromium，适合简单的自动化测试和爬虫任务。Selenium：对于复杂的跨浏览器测试任务是很好的选择，但需要较多的配置和学习。PhantomJS：虽然轻量且快速，但由于停止维护，而其使用逐渐减少，不建议用于新项目。
2025-04-25 17:00:48
585
原创 RAG知识库-LlamaIndex文档切片
在处理文本数据时，我们需要将这些信息转变成向量格式，比如说把1000个文字变成1024维的向量。为了让向量化流程更加精准做，避免内容丢失，我们需要先对文档进行切片，并进行的数据标准化处理。提高向量化质量：通过适当的切片，可以确保每个切片的内容具有一致的格式和上下文。这有助于在转换为向量时保留更多的语义信息，提高向量化表示的质量和准确性。数据处理更高效：处理非常大的文档或长篇文章时，如果不进行切片，处理这些数据将非常耗时且资源密集。文档切片可以将数据分成较小的部分，提高处理速度，并减少内存消耗。
2025-03-24 15:02:10
437
原创 基于LlamaIndex实现Rag向量数据存储与召回
super();// 请求Embedding模型,并返回向量数据.....return [];// 如果查询嵌入与文档嵌入相同，可以直接调用 getTextEmbedding。
2024-11-25 11:23:32
345
原创 React性能优化API
PureComponent：React 自带的一个纯组件，其 shouldComponentUpdate 函数已经被自动实现，只有在 props 或 state 发生变化时才会重新渲染组件。shouldComponentUpdate：通过重写该函数实现组件的条件渲染，即只有在组件的 props 或 state 发生变化时才重新渲染组件。memo：类似于 PureComponent，但是用于函数式组件，可以使其只在 props 发生变化时重新渲染。
2023-06-15 18:15:11
1282
原创 Umi、React框架学习笔记
Umi 以路由为基础的，同时支持配置式路由和约定式路由，保证路由的功能完备，并以此进行功能扩展。然后配以生命周期完善的插件体系，覆盖从源码到构建产物的每个生命周期，支持各种功能扩展和业务需求。
2023-01-16 11:43:19
996
原创 Three.js地图轮廓分割效果
Three.js地图轮廓分割轮廓效果基于GeoJson数据解析绘制,支持多级国家/省/市细粒度路径绘制可以通过Shader/材质/贴图实现不同的轮廓分割效果阿里云GeoJson配置/下载地址相关方法 // 经纬度与世界坐标转换 const getPosition = (lng, lat, radius) => { const phi = (180 + lng) * (Math.PI / 180); const theta = (90 - lat) * (Math
2021-12-28 15:29:26
1181
原创 Three.js/Shader墙体流光特效
Three.js墙体流光效果基于ShaderMaterial，通过两张贴图实现流动效果，配置不同的贴图可以有不同效果生成方法 /** * 创建流体墙体材质 * option => * params bgUrl flowUrl * **/ const createFlowWallMat = ({ bgUrl, flowUrl }) => { // 顶点着色器 const vertex
2021-12-24 18:50:06
6291
13
原创 Three.js通过不规则路径生成墙体
Three.js通过不规则路径生成墙体在一些3D场景的搭建中，经常会遇到图中通过墙体来分割内容的效果，目前Threejs提供的Geometry类型还无法直接处理一些不规则墙体的搭建生成算法通过BufferGeometry基础图形搭建通过路径解析算法，构建出所有需要渲染的面支持三维路径进行构造 /** * option => * params height path material * 通过path构建墙体 * **/
2021-12-23 11:18:53
6615
22
原创 判断经纬度是否在某个区域内
通过经纬度信息，判断某点是否在某个区域内代码/** * 处理区域轮廓点数据 * path : [ [ lon,lat ] ] */export function preceedPointInArea(lng, lat, points) { const polygon = []; for (const point of points) { if (point.length == 2) { point["lng"] = parseFloat(point[0]);
2021-11-22 17:27:36
2827
原创 Vue3.0接入踩坑记录
ref()与reactive()用法上的区别两个方法都是用于为数据添加响应式绑定，ref()一般用于给基础数据添加绑定 字符串/数字绑定后使用.value访问。reactive()一般用于给 object 等复杂类型添加动态绑定，绑定后直接访问即可。 const a = ref({ name: 'bob', age: 18 }); const b = reactive({ name: 'bob', age: 18 }); console.log('a::', a, 'b::'.
2021-07-12 17:19:02
3705
2
原创 Babylon.js 实现鼠标拾取操作
Babylon.js 实现鼠标拾取操作通过scene.pick(scene.pointerX, scene.pointerY);API实现物体选中,并返回结果对象hit（bool）：如果点击击中了场景中的一个对象，则为true。distance（float）：当前活动相机与命中点之间的距离（如果未命中任何物体，则为infinite无限）。pickMesh（BABYLON.Mesh）：如果击中一个物体，则这就是这个物体的实例对象。 如果不是，则为空。pickPoint（BABYLON.Vector
2021-07-07 11:10:10
2106
1
原创 Babylon.js实现物体碰撞检测
Babylon.js实现物体碰撞检测通过intersectsMesh()api实现物体间碰撞检测通过intersectsPoint()api实现物体与点间的碰撞检测代码<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> &
2021-07-06 14:34:43
1561
原创 Three.js清除场景/模型释放内存
加在开发时，若遇到需要动态添加删改模型、场景，页面切换重渲染时，为避免内存叠加占用，需要手动清除场景所占用的内存，避免溢出与资源浪费。使用 dispose() 清除所有网格模型几何体的顶点缓冲区占用内存使用 object.clear() 销毁模型对象，清除页面内存暂停 requestAnimationFrame() 方法，避免无意义运行清空 canvas画布，置空dom与相关元素清除场景 clearScene() { cancelAnimationFrame(this.animati
2021-04-19 18:48:26
17607
7
原创 Vue3.x接入Vuex，Vue-router
一、Vuex用法近乎相同，{ mapState,mapMutations,mapActions,mapGetters }方法在option写法中用法依旧相同，在组合api中需要用 useStore 代替 $store，在Vue3中新增了{ provide,inject }方法，在多组件共用数据时提供了更方便的选择1.安装npm install vuex@next --save2.编写store/store/index.jsimport { createStore } from "vuex";e
2021-01-19 20:42:41
1638
原创 Three.js无限星空特效
效果代码<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> * {
2021-01-15 18:01:48
1540
原创 Three.js星空粒子特效
效果代码只渲染固定个数与区域的粒子保证性能初始化时确定每个粒子偏移向量方向，操作帧动画时做三维向量偏移超过规定区域时还原，实现无限粒子移动<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
2021-01-15 17:27:18
2134
1
原创 Three.js Line2渐变色线条序列帧动画
效果代码1. 生成轨迹线// 轨迹曲线线 const curve = new THREE.CatmullRomCurve3( [ new THREE.Vector3(-20, 30, 4), new THREE.Vector3(20, 30, 4), new THREE.Vector3(20, 0, 4), new THREE.Vector3(-20, 0, 4),
2021-01-15 11:36:04
7358
11
原创 Three.js渲染Dom元素到3D场景
效果中间两个swiper部分用dom方式实现，再将其转化成为Three中的CSS3DObject对象添加到3D场景中，代码需要创建两个场景与渲染器（普通渲染器，CSS3Render）通过两个场景融合实现dom插入（这种方式会导致深度信息丢失）<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" c
2021-01-14 20:39:04
2739
5
原创 Three.js基于Canvas的文字贴图
Three.js基于Canvas的文字贴图居中对齐，对中文文字做了长度兼容处理，可更具开发需求自行构造Canvas贴图 const createLabel = () => { const name = "马达加斯加的企鹅们正在快乐的玩耍"; const canvas = document.createElement("canvas"); const color = "#dddddd"; const fontSize = 50;
2020-12-28 19:56:23
1733
原创 Three.js 修复UnrealBloomPass导致背景失效问题
Three.js 修复UnrealBloomPass导致背景失效问题import { AdditiveBlending, Color, LinearFilter, MeshBasicMaterial, RGBAFormat, ShaderMaterial, UniformsUtils, Vector2, Vector3, WebGLRenderTarget} from "../../../build/three.module.js";import { Pass } from "
2020-12-21 16:04:20
2885
12
原创 Three.js带Depth实现分区辉光
一、效果二、如何实现1.基于EffectComposer后期渲染器。2.借助UnrealBloomPass渲染通道，实现辉光效果。3.接住ShaderPass，保此原有material。4.单帧两次渲染，分别渲染辉光部分，还原正常部分。5.相比直接分层两次渲染，修复了深度信息丢失导致的层级问题。三、代码实现<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /&
2020-12-21 11:36:02
2081
3
原创 Vue按比例居中适配组件
Vue实现按比例居中适配实现类似视频缩放，居中，保持视频比例不变形效果<template> <div class="pageWarp32Ratio9"> <div class="content-wrap" :style="{ transform: `scale(${scaleRation})` }"> <slot></slot> </div> </div></templat
2020-12-02 11:48:12
657
1
原创 Three.js实现hover与Click选中效果
一、效果展示二、如何实现使用Three.js提供的光线投射Raycaster模块通过Raycaster将物体在场景中的位置与鼠标的位置进行对比当鼠标的平面坐标与场景中物体的平面坐标发生重叠时认为选中了物体三、代码实现<script type="module"> import * as THREE from "./node_modules/three/build/three.module.js"; import { OrbitControls } from
2020-11-26 11:52:37
4518
原创 Three.js实现分区Bloom辉光效果
一、效果展示辉光效果二、如何实现1.基于EffectComposer后期渲染器。2.借助UnrealBloomPass渲染通道，实现辉光效果。3.了解three.js中 layers 分层的概念，实现分层渲染。4.单帧两次渲染，分别渲染两个不同的场景，组合成为需要的场景。三、代码实现<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <
2020-11-23 20:17:34
6502
6
原创 webpack多页应用打包配置
项目结构webpack.config.dev.jsconst path = require("path");const resolve = (url) => path.resolve(__dirname, url);const HtmlWebpackPlugin = require("html-webpack-plugin");// const CopyWebpackPlugin = require("copy-webpack-plugin");module.exports = {
2020-11-17 23:11:51
293
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人