- 博客(185)
- 收藏
- 关注
RSS订阅
原创 uniapp+微信小程序+仿微信视频聊天+点击小窗切换+全屏拖动小窗（live-player+live-pusher）+完整代码
实时音视频播放，也称直播拉流，通俗的解释一下就是就是接受聊天对面视频的容器，你和朋友在微信小程序里视频聊天，你的手机需要。如果你是app不是使用 live-player，而是直接使用 video 组件。这块也就是把你摄像头对着的内容（自拍的话就是你自己）推到服务器上。主要是使用live-player、live-pusher。url就是推流地址，还有什么美颜啥的看文档即可。实时音视频录制，也称直播推流。这个是大屏 big-box。：定义可拖动的区域，内部包含。，然后播放出来，这就是。内部自由拖动的组件。
2025-03-04 09:57:10
1525
原创 vue3+vite+ts+router4+Pinia+Axios+sass 从0到1搭建
├── style/ // 通用 CSS 目录。├── common/ // 通用类库目录。├── components/ // 公共组件目录。├── router/ // 路由配置目录。├── views/ // 页面组件目录。├── tests/ // 单元测试目录。
2025-01-16 16:49:16
2291
原创 vue2快速安装环境，从0-1创建vue2项目教程
我来一一解读Babel：Babel 是一个 JavaScript 编译器，它可以将最新版本的 JavaScript 代码转换成向后兼容的版本，以确保你的代码可以在更旧的浏览器中运行。选择这个特性可以让你使用最新的 JavaScript 语法和特性，一般选上TypeScript 是 JavaScript 的一个超集，它添加了静态类型检查和其他一些高级特性。选择这个特性可以让你使用 TypeScript 来开发你的 Vue 项目，一般是vue3选择ts,这个不选。
2024-05-25 11:11:16
1270
原创 uniapp _微信小程序使用async,await（易如反掌的理解清楚）
async和await是 JavaScript 中处理异步编程的一种方式，它们是 ECMAScript 2017（也被称为 ES8）引入的新特性。1、asyncasync关键字用于声明一个函数是异步函数。异步函数在执行时返回一个 Promise 对象。它使得在函数内部可以使用await关键字等待异步操作的完成。
2024-02-22 11:33:34
2759
2
原创 uniapp微信小程序-分包（一看就懂）
微信小程序每个分包的大小是2M，总体积一共不能超过20M,当然你也可以提升启动速度，降低首次加载时间，模块化开发，按需加载，提高性能。
2024-01-31 11:52:59
2940
原创 uniapp微信小程序-请求二次封装（直接可用）
当需要添加新的功能、处理错误或者进行性能优化时，只需修改封装的请求逻辑而无需深入到每个组件或页面中。：通过封装请求，你可以在整个项目中重用相同的请求逻辑。这样一来，如果 API 发生变化或者需要进行优化，你只需在一个地方修改代码，而不是在每个使用这个请求的地方都进行修改。：封装的请求可以统一处理错误，提高了错误处理的一致性。你可以在请求拦截器中处理一些通用的错误，例如网络错误、权限问题等，使代码更加健壮。：通过封装，可以在一个地方统一配置请求的一些参数，例如基本路径、请求超时时间、请求头等。
2024-01-26 15:26:36
4885
2
原创 微信小程序使用蓝牙连接硬件保姆级教程
1deviceid蓝牙设备的id这个参数是蓝牙设备的唯一id2uuid服务的id这个是通过deviceid获取到的这个设备服务的uuid3特性值这个是通过deviceid、uuid获取到的特性值。
2024-01-08 18:52:58
5058
原创 Vue.set 响应式原理详解：源码级逐行带入实战解析
Vue2的响应式系统通过Vue.set实现动态添加响应式属性，核心流程如下：1) 检查目标是否为数组并处理；2) 若属性已存在直接赋值；3) 判断是否为响应式对象（含__ob__）；4) 调用defineReactive添加getter/setter，创建Dep依赖收集器；5) 通过ob.dep.notify()触发视图更新。整个过程通过Object.defineProperty将新属性转为响应式，并建立属性与依赖的关联机制，确保数据变化时可自动更新视图。
2025-08-01 12:04:03
721
原创 Vue 实现老人定位平滑移动动画（附完整源码）
本文介绍了在智慧养老系统中实现设备定位数据平滑移动动画的方法。通过Vue+JavaScript结合requestAnimationFrame和自定义缓动函数，实现了设备在地图上的路径平滑移动效果。系统接收后端定位坐标后，利用smoothMoveAlongPath函数拆分路径，调用smoothMove按速度逐帧移动，并采用easeInOut缓动曲线控制动画节奏。核心代码展示了如何计算移动距离、持续时间，以及通过缓动函数实现先快后慢的自然运动效果。最后提供了可直接运行的HTML示例，演示了从固定路径点到目标位置
2025-08-01 10:08:56
133
原创 Vue 示例代码（平滑移动 + 匀速）
该代码实现了一个设备位置平滑移动的演示效果。使用Vue3的Composition API，通过reactive创建响应式设备位置数据，包含两个初始点位(A001和B002)。点击按钮触发simulateMove函数，使用requestAnimationFrame实现动画效果，采用easeInOutQuad插值曲线使移动更平滑自然。移动速度由distance/speed*1000计算得出，确保不同距离的点位以相同速度移动。界面采用CSS定位，包含600x500px的容器和圆形头像标记，点击按钮位于底部居中位置
2025-07-28 09:49:47
113
原创 Three.js 实战：开启阴影、灯光旋转与阴影清晰度设置详解
本文详细介绍了在Three.js中实现阴影效果的关键方法。主要包括：1)启用阴影渲染器和灯光投射；2)设置物体阴影投射和接收属性；3)实现灯光动态旋转产生变化阴影；4)通过调整shadowmap分辨率提升阴影清晰度。文章提供了完整代码示例，重点讲解了renderer.shadowMap.enabled、castShadow/receiveShadow等核心参数的设置方法，以及如何通过数学函数实现灯光动态移动，最后总结了提高阴影质量的优化技巧。
2025-07-24 08:00:00
263
原创 旋转加载进度条+完整代码
摘要：该HTML代码创建了一个双边框旋转加载动画，包含一个固定在视窗中央的半透明背景层和一个旋转的双色圆环。圆环由外圈的浅灰色和内圈的蓝色组成，通过CSS动画实现360度连续旋转效果。页面加载时显示该动画，3秒后自动隐藏并弹出"模型加载完成"提示，可用于网页加载等待状态。代码简洁，包含完整的HTML结构、CSS样式和JavaScript控制逻辑。
2025-07-22 08:00:00
194
原创 百分比进度条+完整代码
这篇文章展示了一个动态进度条的HTML实现。代码创建了一个渐变色进度条（橘色渐变），包含百分比显示。进度条容器宽度设为80%，带有圆角和阴影效果。JavaScript部分通过定时器模拟进度增长，每50毫秒增加1%直至100%。进度条宽度和百分比文本同步更新，完成后自动停止。该实现简洁美观，适合用于网页加载或任务进度展示场景。
2025-07-21 16:22:11
341
原创 THREE+gltf模型或者glb模型过大DRACO压缩和解压引入
本文介绍了如何使用Three.js中的GLTFLoader和DRACOLoader加载DRACO压缩的3D模型。通过创建加载器实例、设置解码器路径、关联加载器，最终加载压缩后的GLB模型文件。DRACO压缩能有效减小模型体积，提升加载速度。需要注意的是，模型只需压缩一次，重复压缩不仅无效还可能导致损坏。文末提供了模型加载后的处理示例，展示了如何获取模型场景数据。
2025-07-21 12:24:39
285
原创 Three.js 实战：使用 PBR 贴图打造真实地面材质
本文介绍了在Three.js中使用PBR材质贴图创建真实地面效果的方法。通过MeshStandardMaterial配合五种贴图(map、aoMap、roughnessMap、normalMap、displacementMap)模拟物理材质特性，并详细说明了各贴图作用及使用注意事项，包括UV设置、几何体细分数要求等。文章还提供了免费PBR贴图资源网站，帮助开发者获取专业材质贴图。
2025-07-16 23:35:00
347
原创 Three.js如何处理浏览器窗口尺寸变化：WebGL 渲染与摄像机视角更新
这段代码实现了浏览器窗口大小变化时调整WebGL渲染的功能。通过window.innerWidth/innerHeight获取新尺寸，调用renderer.setSize()更新画布大小。同时调整camera.aspect宽高比并调用updateProjectionMatrix()更新投影矩阵，确保3D场景正确映射到2D屏幕且不会失真。这些操作共同保证了窗口尺寸变化时WebGL渲染的正确显示。
2025-07-16 16:21:20
187
原创 Three.js实现点击射线采集点生成自定义曲线老人按照曲线行走
基于Three.js的3D老人路径导航系统实现 摘要：本项目使用Vue3和Three.js构建了一个3D场景中的老人路径导航系统。主要功能包括：1) 通过GLTFLoader加载场景和老人模型；2) 使用鼠标点击地面生成导航路径点；3) 利用CatmullRomCurve3创建平滑路径曲线；4) 实现老人沿路径自动行走动画。系统采用Raycaster进行鼠标拾取，通过AnimationMixer控制老人行走动画，并支持环境贴图加载和实时渲染。代码结构包含场景初始化、模型加载、动画控制等模块，实现了完整的3D
2025-07-15 17:06:17
363
原创 从顶点到画面：Three.js如何用WebGL绘制3D图形
本文介绍了使用Three.js创建3D几何体的基本方法。通过BufferGeometry和BufferAttribute设置顶点坐标和颜色数据，构建了一个由两个三角形组成的正方形平面。顶点坐标范围为-1到1，z轴固定为1；顶点颜色采用RGB值实现颜色渐变。使用MeshBasicMaterial材质并开启线框模式，最终组合成一个可渲染的网格模型。文中还解答了关于顶点数据格式、BufferAttribute作用以及BufferGeometry与PlaneGeometry区别等常见问题，为自定义3D模型提供了基础
2025-07-15 08:00:00
748
原创 Three.js如何实现帧率无关的动画系统：基于 Delta-Time 的动画驱动
摘要：帧率无关动画技术是现代前端和游戏开发中确保动画流畅性的关键。通过基于时间而非帧率更新动画（如使用时间差delta），解决了不同设备帧率波动导致的动画速度不一致问题。示例代码展示了Three.js中通过AnimationMixer和时钟差值实现帧率无关动画的方法，使动画在不同性能设备上都能保持稳定自然的播放效果。
2025-07-14 11:26:49
109
原创 Three.js 中通过包围盒矫正模型的位置与缩放 —— 实战总结
这篇文章介绍了使用Three.js的GLTFLoader加载3D模型时，通过计算模型包围盒来实现自动居中与规范化缩放的技术。关键步骤包括：1)用Box3计算模型边界坐标；2)获取中心点将模型移动到原点；3)测量模型尺寸并按比例缩放，使最长边标准化为10个单位；4)调整相机位置和控制参数。这种方法解决了不同来源模型位置偏移、尺寸不一的问题，确保所有模型都能正确居中显示并保持统一的操作体验。核心思想是通过"透明盒子"测量模型整体空间信息，进行自动化位置矫正和尺寸规范化。
2025-07-10 10:33:50
321
原创 Three.js根据生成的点生成一条曲线并且可视化出来
本文摘要：这是一个使用Three.js创建平滑曲线的函数。当路径点数量不足2个时返回false，否则使用CatmullRom曲线算法生成非闭合路径。函数从曲线上提取50个等距点，通过BufferGeometry创建绿色半透明线段并添加到场景中。该函数主要用于3D场景中动态路径的可视化渲染。
2025-07-10 08:00:00
77
原创 Three.js创建水平地板平面planegeometry
摘要：创建了一个透明平面作为地板，用于交互点击取值。使用THREE.PlaneGeometry(20,20)创建平面几何体，通过MeshStandardMaterial设置透明材质，并绕X轴旋转-90度使其水平放置。将地板命名为"Floor"并添加到场景中，同时启用阴影接收功能。该平面主要作为数据采集的交互层使用。
2025-07-09 11:51:28
127
原创 基于 Vue3 + Three.js 实现老人模型沿路径行走动画系统
本文介绍了一个基于Three.js和Vue3的三维场景交互平台，主要实现了老人模型路径漫游、可视化路径编辑等功能。系统包含场景初始化、模型加载、光照设置、地板交互等核心模块，支持GLTF格式模型加载与动画播放，使用CatmullRom曲线生成平滑路径，并实现沿路径自动移动的人物漫游效果。关键技术包括：环境贴图转换、相机控制、射线拾取交互、动画混合器控制等。项目采用模块化设计，通过响应式布局适配不同屏幕，并优化了性能表现，包括资源释放和帧同步机制。
2025-07-09 10:02:41
859
原创 基于Three.js的人物模型沿房间路径自动行走动画系统⑯
本项目基于Vue3和Three.js开发了一个3D可视化系统，主要实现了以下功能：1. 加载建筑模型并自动提取房间中心点作为路径点；2. 加载带动画的人物模型（行走动画）；3. 人物沿路径匀速移动并自动调整朝向；4. 支持轨迹可视化、动画控制及窗口自适应。系统使用GLTFLoader加载模型，通过Box3计算房间中心点作为路径，利用AnimationMixer控制动画播放，Tween.js实现平滑移动，OrbitControls提供交互控制。关键技术包括：360度环境贴图、GLTF模型遍历、路径点自动提取、
2025-06-27 17:22:22
390
原创 学习Three.js背景与天空盒⑮
本文对比了在Three.js中实现背景的多种技术方案： CSS背景图 - 简单实现但缺乏交互性 静态纹理贴图 - 支持后处理但需手动调整比例 立方体贴图(Skybox) - 提供360度环绕效果 等距矩形贴图 - 单张全景图解决方案 自定义Mesh天空盒 - 灵活但性能较低 重点推荐立方体贴图和等距矩形贴图方案，它们既能实现专业视觉效果，又可作为环境贴图用于材质反射。文章包含详细代码示例，展示了从基础实现到高级动态环境的完整开发流程，并提供了不同场景下的技术选型建议。
2025-06-18 08:00:00
626
原创 记录学习three.js 为什么 .glTF 是更适合 Web 的 3D 模型格式？——从 .OBJ 到 .glTF 的转变⑭
摘要：文章对比了3D模型格式.OBJ与.gltf的差异，指出.gltf是更适合Web3D项目的标准格式。.OBJ作为早期文本格式，存在加载慢、体积大、功能有限等问题；而.gltf采用二进制压缩，支持动画、PBR材质等高级特性，加载快速且兼容性好。通过Three.js示例展示了.gltf的一行代码加载优势，建议在现代Web3D项目中优先选用.gltf格式，仅在简单测试时考虑.OBJ。
2025-06-17 10:15:18
300
原创 记录学习Vue3 + Three.js 加载 OBJ 模型⑬
本文介绍了在Vue项目中使用Three.js加载和展示3D模型的完整流程。主要内容包括：1) 通过OBJLoader和MTLLoader加载.obj模型及材质；2) 使用OrbitControls实现模型交互控制；3) 设置多光源照明环境；4) 实现叶片旋转动画；5) 处理响应式布局。文章特别说明要使用.obj格式而非.blend格式，因.obj具有跨平台兼容性强、纯文本格式易解析等特点，更适合WebGL应用。同时提供了模型文件存放位置建议和关键功能实现代码。
2025-06-17 09:50:42
398
原创 three.js前端需要干的事？
Three.js前端加载3D模型后的主要操作包括：相机控制（调整视角、距离）、灯光设置（添加光源）、模型变换（缩放/位置/旋转）、交互功能（点击事件）、加载优化（进度条）、材质修改、环境设置（背景/天空盒）以及动画处理。通过这些操作可让静态模型实现动态展示，例如加载汽车模型后，可以调整灯光质感，添加旋转查看、点击交互和开合动画等功能，使模型在网页中生动呈现。核心要点是控制展示方式和增强用户交互体验。
2025-06-16 08:00:00
366
原创 记录下three.js学习过程中不理解问题----渲染目标⑪
WebGLRenderTarget是three.js中用于实时生成动态纹理的核心技术。它主要应用于四大场景：1. 实现"电视监控"效果，通过将特定场景实时渲染到纹理并应用于目标物体；2. 后处理特效制作，如模糊、发光等效果；3. 创建反射/镜面效果；4. 作为延迟渲染的中间缓存。当窗口尺寸变化时，需同步调整RenderTarget的尺寸和相关相机参数，包括更新宽高比和投影矩阵，否则会导致图像变形。这种技术相当于在内存中创建了一张"活"的纹理，可以动态更新并像普通纹理一
2025-06-14 08:15:00
1350
原创 记录下three.js学习过程中不理解问题----雾⑩
Three.js中实现雾效主要通过Fog（线性）和FogExp2（指数）两种方式。线性雾需设置近/远距离参数，物体在两者间渐变过渡；指数雾通过密度值控制浓度，呈现更自然的衰减效果。雾色应与背景色一致以保证视觉连贯性。开发者可通过材质fog属性控制特定对象是否受雾影响，适用于室内外场景区分等需求。两种雾效各有特点：线性雾便于控制，指数雾更显真实。
2025-06-14 08:00:00
771
原创 记录下three.js学习过程中不理解问题----相机⑧
本文介绍了3D图形学中的两种摄像机类型：透视相机（PerspectiveCamera）和正交相机（OrthographicCamera）。重点解析了透视相机的视锥体（frustum）概念，将其形象比喻为"削顶的金字塔"，并详细说明其参数（fov、aspect、near、far）对可视区域的影响。文章还对比了五种基本几何体的特征，强调理解锥台（截头圆锥体）对掌握3D视图的重要性。此外，提供了使用Three.js设置两种摄像机的方法，讨论了z-fighting问题的解决方案，以及通过双视口渲
2025-06-13 08:00:00
718
原创 记录下three.js学习过程中不理解问题----阴影⑨
Three.js阴影机制解析：默认采用shadowmaps技术，光源（需开启castShadow）会从自身视角渲染场景，生成深度图记录遮挡关系，主相机渲染时据此判断阴影区域。关键性能问题在于每个投射阴影的光源（特别是点光源需6次渲染）都会产生额外渲染开销。优化建议包括：限制投影光源数量、使用预烘焙光照贴图，或采用贴图模拟阴影（假阴影）。正确使用需同时开启渲染器shadowMap、光源castShadow及物体cast/receiveShadow设置，并注意调整阴影相机范围和分辨率。
2025-06-13 08:00:00
1052
原创 记录下three.js学习过程中不理解问题----纹理⑥
纹理技术是实现3D物体表面细节的关键方法。摘要介绍了纹理的基本概念，即通过将2D图像应用到3D模型上来增强真实感。文章详细讲解了纹理加载流程（使用THREE.TextureLoader）、色彩空间设置（sRGB处理）、多纹理应用方式以及内存管理注意事项。特别强调了纹理文件格式选择（JPG/PNG）和性能优化技巧，包括Mipmap和纹理过滤器的使用。最后还提供了多纹理同步加载的实现方案，确保所有资源加载完成后再渲染场景。这些知识为3D图形开发中的纹理应用提供了实用指导。
2025-06-12 08:00:00
576
原创 记录下three.js学习过程中不理解问题----光照⑦
摘要：本文介绍了Three.js中五种常见光源的特性与应用。环境光（AmbientLight）提供无方向均匀照明；半球光（HemisphereLight）模拟天空和地面的自然光线；方向光（DirectionalLight）产生平行光照效果；点光源（PointLight）向四周发射光线，可设置照射距离；聚光灯（SpotLight）形成锥形光照区域，角度可调。每种光源通过color和intensity参数控制颜色和强度，通过position或target属性调节照射方向，适用于不同的场景照明需求。
2025-06-12 08:00:00
382
原创 记录下three.js学习过程中不理解问题----材质（material）⑤
Three.js中的材质决定了3D对象的外观特性，包括颜色、光泽度等视觉效果。主要材质类型包括：MeshBasicMaterial（不受光照影响的基础材质）、MeshLambertMaterial（简单光照计算的漫反射材质）、MeshPhongMaterial（带镜面高光的材质）、MeshPhysicalMaterial（支持物理属性的高级材质）等。每种材质适用于不同场景，如卡通风格、金属质感或物理真实感渲染。可通过调整属性（如颜色、粗糙度）和设置flatShading（平面着色）来控制外观表现，修改关键属
2025-06-11 12:04:34
1020
原创 记录下three.js学习过程中不理解问题④
Three.js中的场景(Scene)是3D渲染的核心容器，用于管理所有可见元素包括物体、光源和摄像机。开发者通过创建场景实例后，可以添加3D对象(如立方体网格)、设置相机位置和渲染器。在动画循环中，通过requestAnimationFrame实现对象旋转等动态效果，最终由渲染器将场景和相机视角结合输出到画布上。场景图机制协调了物体与光源的交互，确保3D环境的正确渲染。
2025-06-11 10:52:10
247
原创 记录下three.js学习过程中不理解问题③
本文介绍了Three.js中几种常用几何体的创建与参数设置方法： 四面体(TetrahedronGeometry)：通过radius控制大小，detail参数调节细分级别以获得更平滑表面。 3D文字(TextGeometry)：需先用FontLoader加载.typeface.json字体文件，支持设置大小、深度、斜角等立体效果参数。 圆环体(TorusGeometry)：可调节主半径、管道半径及分段数，实现不同粗细和精度的"甜甜圈"效果。 环形节(TorusKnotGeometry)：
2025-06-10 18:15:55
905
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人