- 博客(469)
- 收藏
- 关注
RSS订阅原创 WebGL图形编程实战【3】：矩阵操控 × 从二维到三维的跨越
本文深入探讨了矩阵变换在 WebGL 图形编程中的关键作用。文章首先剖析了矩阵变换的基本原理，包括平移、旋转和缩放操作，阐述了如何通过矩阵乘法实现复杂的图形变换。接着，详细介绍了正射投影和透视投影两种常用的投影方式。正射投影能够保持物体的形状和比例，适用于绘制等轴测图；而透视投影则通过模拟人眼视觉，使物体在远处变小，增强三维效果。通过矩阵操控，文章展示了如何将二维图形平滑过渡到三维空间，为开发者提供了从理论到实践的完整指导，助力其在 WebGL 世界中实现更丰富的视觉效果。
2025-03-28 14:10:28
1095
原创 WebGL图形编程实战【2】：动态着色 × 纹理贴图技术揭秘
本文是《WebGL初体验》系列第二篇，在基础图形绘制（首篇）上，重点讲解颜色渐变与2D贴图的实现。通过顶点和片元着色器协作，解析颜色插值原理与varying变量传值机制。详解2D贴图全流程：图像加载→UV坐标映射→纹理参数配置（如gl.texParameteri的缩放滤波）→片元着色器texture2D采样，并解决纹理翻转、像素模糊等常见问题。通过渐变色与贴图融合案例，演示如何用GLSL混合颜色与纹理数据，实现动态效果。文章提供精简代码示例及调试技巧，帮助快速掌握WebGL平面贴图的核心方法。
2025-03-21 11:01:57
1197
原创 WebGL初体验【1】：绘制图形与变换技巧
本文深入浅出地介绍了WebGL的基础知识及其部分API的使用。首先，文章从WebGL入门讲起，帮助读者快速搭建WebGL环境。接着，详细阐述了如何通过WebGL绘制点、线、面等基本图形，并结合实例讲解相关API的调用方法。此外，还探讨了图形变换的实现，包括平移、旋转和缩放等操作，通过矩阵运算实现图形的动态效果。文章内容丰富，示例清晰，适合初学者快速掌握WebGL的基本应用，为后续深入学习打下坚实基础。
2025-03-14 09:44:42
645
原创 React-Native 项目初始化及安卓环境搭建
本文探讨了React Native（RN）项目的初始化和安卓环境搭建，旨在为开发者提供一个清晰的指南。文章首先介绍了React Native的基本概念及其在跨平台移动应用开发中的优势。接着，详细描述了RN项目的初始化步骤，包括安装必要的依赖、创建新项目、以及配置Android开发环境。此外，文章还讨论了在不同操作系统上搭建安卓环境的具体过程，如Windows和macOS系统。通过本文，读者可以获得从零开始搭建RN开发环境的全面指导，从而更高效地进行移动应用开发。
2024-12-16 10:35:19
1816
原创 初识Electron & 进程通信
本文详细介绍了Electron的初始化和进程通信机制，重点探讨了Electron框架的核心构成、主进程与渲染进程的职责及其通信方式。通过分析Electron如何结合Chromium和Node.js实现跨平台桌面应用开发，本文揭示了Electron在现代开发中的广泛应用和技术优势。此外，文章还涵盖了Electron的进程模型、上下文隔离、以及预加载脚本等技术细节，旨在帮助开发者更好地理解和应用Electron进行高效的桌面应用开发。
2024-11-06 17:37:00
2067
原创 qiankun 应用之间数据传递
本文探讨了如何使用Qiankun框架实现多个微前端应用之间的数据通信。首先，介绍了Qiankun的基本架构和数据传递的前提条件。接着，详细阐述了通过全局状态管理、事件驱动机制以及共享存储三种方式实现数据传递的方法。
2024-10-17 10:13:51
1489
原创 微前端 Spa & qiankun
本文旨在阐述微前端SPA的概念及其在现代Web开发中的应用，并特别介绍Qiankun框架如何助力开发者实现模块化的单页应用。通过分析微前端的优势、Qiankun的核心特性及实践案例，文章揭示了如何通过Qiankun提升开发效率和应用性能，同时保持项目的可维护性与可扩展性。
2024-10-15 16:26:56
1181
原创 Three.js 实战【4】—— 3D地图渲染
该文章介绍了在Vue3和Three.js中将地图JSON文件渲染成三维模型的步骤。首先，加载地图的JSON数据并使用THREE.ShapeBufferGeometry创建多边形。接着，通过TextureLoader加载纹理图片并应用到材质上，再将材质赋予网格模型实现贴图。最后，文章还讲解了如何监听地图事件，如点击和悬停，以增强用户体验。整个过程结合了Vue3的响应式特性和Three.js的图形处理能力，提供了一个完整的解决方案。
2024-09-14 11:44:40
4049
原创 Three.js 实战【3】—— 城市模型渲染
本文介绍了如何使用Vue 3和Three.js来渲染一个3D城市。首先，简要概述了Vue 3的响应式数据绑定和组合式API的优势，以及Three.js在3D图形渲染中的强大功能。然后，通过详细的步骤讲解了如何搭建项目、创建场景、添加灯光、导入模型等关键操作。接着，深入探讨了如何在Vue 3中使用Three.js进行动画控制和交互处理。最后，总结了使用这种方法的优势，如代码模块化和高性能渲染，并展望了其在可视化领域的应用前景。
2024-09-13 14:59:13
1501
原创 leaflet【十】实时增加轨迹点轨迹回放效果实现
在本文中，我们将介绍如何使用Vue3和Leaflet实现实时增加轨迹点的功能。通过利用leaflet-trackplayer插件，我们可以在不改变原始运行轨迹和速度的情况下，实现实时效果。这种方法不仅提高了地图交互的灵活性，还增强了用户体验。我们的目标是为用户提供一个直观且高效的工具，以便他们能够更好地理解和分析地理数据。
2024-09-11 14:22:12
1804
原创 记2024-08原生微信小程序开发
本文是微信小程序开发的实战宝典，涵盖了从快速编写CSS样式、配置路径别名，到使用npm进行项目构建的现代化开发流程。同时，文章深入探讨了如何利用UI库提升开发效率，通过分包优化应用性能，以及将原生API进行封装以适应小程序环境。此外，针对提高代码质量的静态检查、自定义表格的设计实现、OCR文本识别技术的集成、表单验证的策略、自动化测试流程、邮件发送功能的实现，以及全局数据管理和实时监听也一一进行了详细阐述。通过掌握这些核心技巧和最佳实践，开发者能够打造既高效又易于维护的微信小程序。
2024-08-07 15:37:27
1332
原创 leaflet【九】使用天地图&改变地图底色
本文将详细探讨如何在Leaflet地图框架中集成天地图，并介绍如何通过调整背景色和滤镜来改变地图的显示效果。通过具体示例和代码片段，读者可以学习到如何根据自己的项目需求，灵活地调整地图的视觉风格。本研究不仅为开发者提供了一种实用的地图定制方法，同时也扩展了Leaflet在地理信息系统中的应用范围。
2024-07-25 17:06:07
3769
1
原创 Three.js 实战【2】—— 船模型海上场景渲染
在这篇文章中，我们将探索如何将Vue 3和Three.js的强大功能结合起来，创造出令人惊叹的三维视觉效果。文章详细介绍了如何使用Vue 3框架和Three.js库来渲染一个精细的船模型到网页上。通过一系列创新的技术手段，我们不仅为船模型添加了逼真的纹理，还模拟出了波光粼粼的水面效果。这一过程不仅展示了Vue 3在前端开发中的灵活性，还彰显了Three.js在处理三维图形方面的强大能力。文章的目标是为开发者提供一种新颖、高效的方式来增强网页的交互性和视觉吸引力。
2024-07-17 17:21:38
1771
原创 leaflet【八】 加载文件资源
本文将探讨如何使用Leaflet插件加载GPX和KML文件，并将文件内容解析并渲染到地图上。我们将介绍如何使用对应的插件来处理这两种常见的地理数据格式，以及如何将它们集成到Leaflet中。通过深入分析插件的工作原理和使用方法，我们将展示如何在地图上呈现这些文件的内容。此外，我们还将探讨一些高级技巧，以优化文件的加载和渲染过程。无论您是初学者还是有经验的开发者，本文都将为您提供宝贵的见解和实用的方法。让我们一起探索Leaflet的强大功能吧！
2024-07-10 09:49:13
1590
4
原创 Leaflet【七】加载海量点数据
本文深入探讨了Leaflet在渲染海量点数据时面临的性能挑战，提出了一种创新的解决方案——利用leaflet-marker-canvas插件。传统的循环绘制Marker方式在数据量巨大时会导致明显的性能下降，而通过将点数据加入Canvas进行批量渲染，显著提高了绘图效率。文章还细致分析了leaflet-marker-canvas的源码，揭示了其内部优化机制，为开发者提供了有效利用该插件的深入见解。
2024-07-08 11:10:14
2833
3
原创 Leaflet【六】绘制交互图形、测量、经纬度展示
本文主要探讨了如何利用leaflet-draw插件在地图上绘制图形，以及通过leaflet-measure测量距离和面积，并将经纬度绘制到地图上。首先，我们使用leaflet-draw插件，该插件提供了一种简单而直观的方式来绘制各种形状（如点、线、多边形等）到地图上。然后，我们利用leaflet-measure插件，该插件可以测量地图上任意两点之间的距离，以及任意多边形的面积。最后，我们将经纬度数据绘制到地图上，以便于进行地理位置分析和可视化。这种方法为地理信息的收集、分析和可视化提供了一种有效的工具。
2024-07-05 11:11:56
2411
原创 Leaflet【五】Marker点闪烁效果
本文深入探讨了在Leaflet中通过调整点、线、面的透明度来实现闪烁效果的技巧，并介绍了如何使用leaflet-pulse-icon插件简化此过程。文章不仅展示了如何利用这些技术吸引视觉注意力，还对leaflet-pulse-icon插件的源码进行了透析，揭示了其背后的工作原理。为开发者提供了一种新颖、高效的方法来增强地图交互性和视觉吸引力。
2024-06-28 08:30:00
1175
原创 Leaflet【四】轨迹回放效果&控制台控制轨迹运动效果
本文主要介绍了使用Leaflet-trackplayer插件实现轨迹回放效果和控制台控制轨迹运动效果的方法。首先，我们通过引入Leaflet-trackplayer插件，实现了在地图上播放GPS轨迹的功能。然后，我们通过编写JavaScript代码，实现了在控制台上控制轨迹的播放、暂停、快进、倒退等操作。最后，我们还对如何优化轨迹回放效果进行了探讨，包括调整播放速度、改变轨迹颜色等。通过本文，读者可以了解到如何使用Leaflet-trackplayer插件来实现复杂的轨迹回放和控制效果。
2024-06-21 14:46:06
2356
5
原创 Vue3源码【三】—— createApp执行流程源码分析
在本文中，我们深入探讨了Vue 3核心函数createApp的内部构造和执行流程。文章详述了应用初始化中涉及到的核心对象创建、全局API的安装以及响应式效果的建立等步骤。进一步地，分析了组合式API是如何与响应式系统和组件系统相互配合，使得状态管理变得更加灵活和高效。通过对源码的细致解读，揭示了Vue 3在设计上如何兼顾了扩展性、复用性和性能，为开发者提供了对框架内部运作机制的深刻见解。
2024-06-18 18:37:32
1216
原创 Vue3源码【二】—— watch侦听&computed计算属性原理及简单实现
本文聚焦Vue3的watch侦听器和computed计算属性，二者均用于处理数据变化。watch能追踪并响应数据变动，而computed提供缓存的计算值。通过源码分析，我们将揭示它们的工作原理，以及如何在Vue3中实现这两个功能，从而实现对数据变化的高效管理。
2024-06-17 15:27:25
929
原创 Vue3源码【一】—— ref&reactive响应式原理及简单实现
本文深入剖析了Vue3中ref和reactive的工作机制及背后的响应式原理。文章首先揭示了ref是如何将一个普通值封装成响应式的，并返回一个可访问该值的响应式对象。接着，详细讨论了reactive如何使用Proxy来实现对象的响应式转换，使其所有属性的变化都能被Vue3精确捕捉。文中进一步探讨了Vue3响应式系统的内核，即依赖追踪和派发更新机制，展示了它们如何确保界面与状态的一致性。
2024-06-14 10:23:53
2695
原创 Leaflet【三】图层组 & geoJson & 热力图
图层组功能允许用户将多个图层组合在一起，便于管理和控制。GeoJSON是一种基于JSON的地理空间数据交换格式，可以用于在Leaflet中加载和显示地理数据。热力图则是一种可视化技术，用于表示地理数据的密度分布。通过结合使用这三个功能，可以实现在Leaflet中创建具有丰富地理信息和交互性的地图应用。
2024-05-17 09:00:00
1231
原创 Leaflet【二】图层绘制——UI图层【点线面】& 矢量图层【img、svg】
Leaflet地图库中，图层绘制是构建交互式地图的重要部分。UI图层包含点、线、面，实现地图上的标记和路径规划。通过API，开发者可以定制图形样式及交互功能。矢量图层支持img和svg格式，用于展示清晰可缩放的复杂图标和自定义图形。Leaflet结合这些图层提供了一个强大的平台，以满足不同复杂度地图应用的需求。
2024-05-16 14:25:28
1745
原创 Leaflet【一】初识Leaflet与Leaflet视图操作
本文为Leaflet系列的第一篇，介绍了Leaflet这一流行的开源JavaScript地图库。内容涵盖Leaflet的基本概念和特点，以及如何通过视图操作实现地图的缩放、平移和旋转，为后续深入学习Leaflet打下坚实基础。
2024-05-14 19:57:14
891
原创 Openlayer【四】—— 控件
该文详细探讨了OpenLayers库中的控件。FullScreen控件用于实现全屏显示，MousePosition控件提供鼠标位置坐标信息，OverviewMap控件展示地图总体概览，Rotate控件可旋转地图视图，ScaleLine控件显示比例尺，ZoomSlider控件提供滑块进行地图缩放，ZoomToExtent控件允许一键缩放到指定地图范围。通过本文，您将深入了解这些控件的功能和使用方法，有助于更灵活地利用OL创建交互性地图。欢迎阅读并探索OL中这些有趣且实用的地图控件
2024-01-15 21:14:32
1282
原创 Openlayer【三】—— 绘制多边形&GeoJson边界绘制
深入探讨了OpenLayers中多边形和GeoJson边界的绘制方法。首先，我们介绍了OpenLayers的基本概念和功能，然后详细解析了如何使用OpenLayers绘制多边形。接着，我们深入探讨了GeoJson数据格式的特点和应用，以及如何在OpenLayers中使用GeoJson数据进行边界绘制。最后，我们通过实例演示了如何结合多边形和GeoJson进行复杂的地图边界绘制
2023-11-21 16:15:00
1753
原创 Openlayer【二】—— 绘制不同的点、线以及给其添加监听事件
该文章将指导读者在OpenLayers平台上进行高级地图操作。该文主要说明如何在地图上精确绘制点，并且通过自定义样式将它们变得独一无二。此外，文章还将介绍如何为这些点添加带有图标和文字的交互功能。同时，也将理解到如何创建和编辑线，并为其添加样式和交互功能。
2023-11-20 14:59:27
1400
原创 OpenLayer系列——【一】初识OpenLayer与OpenLayer视图操作
本文介绍了OpenLayers库以及如何进行OpenLayers视图操作。OpenLayers是一个开源的JavaScript库，用于创建交互式的地图应用程序。它提供了丰富的功能和工具，可以用于加载、显示和操作地图数据。在本文中，我们将初步了解OpenLayers库，并介绍如何使用它进行地图视图的操作，包括聚焦、缩放和平移等功能。无论是初学者还是有经验的开发人员，都可以通过本文快速入门OpenLayers，并开始构建自己的地图应用程序。
2023-11-17 14:06:41
693
原创 Canvas实战效果——代码雨、无规则运动背景、改变图片像素、元素拖动
Canvas 是 HTML5 中新增的一个标签，用于在网页中进行图形绘制和动画渲染等操作。使用 Canvas 可以快速创建出丰富多彩的用户界面效果。这篇文章主要偏向于效果实现，实现代码雨、无规则运动、改变像素、元素拖拽效果
2023-06-22 09:00:00
1421
1
原创 Three.js 实战【1】—— 3D全景视图开发
我们先看一下这篇文章主要要实现的一个demo效果，现如今在第三方租房、买房App、或者百度、高德地图上会出现这种全景视图，当手势操作时，他对应的景色也会发生一定的变化。又或者你最近刷抖音看到了HM玩的图寻，给了一张可以旋转的3D全景图片，然后找这张图片在哪拍摄的，你可能会好奇这种效果在前端是如何实现的。这就是这篇文章将会教会你的一个小demo。
2023-05-17 09:32:50
4306
原创 探索三维世界【4】：Three.js & dat.gui & gsap 的使用
该文为读者介绍了如何使用 Three.js、dat.gui 和 gsap 三个 JavaScript 库来创建逼真的 3D 图形界面。首先介绍了 Three.js 的基本概念和用途，并提供了一些实际代码示例，帮助初学者快速上手。然后，该文章重点讲解了 dat.gui 在 Three.js 中的应用。dat.gui 是一个轻量级 JavaScript 库，它可以帮助用户添加交互式控制面板，使用户能够在 3D 场景中调整对象参数并实时预览结果。
2023-05-16 09:46:47
1562
原创 探索三维世界【3】：Three.js 的 Geometry 几何体 与 Material 材质
最后将几何体与材质通过Mesh对象创建，Mesh是构成3D物体的基本单元之一，它是由Geometry和Material组合而成的。在使用Three.js创建物体时，需要将Geometry传入到Mesh对象中，Mesh对象则用于定义物体的材质和纹理等属性。Geometry包含了物体的顶点、面、法线、UV映射、颜色等信息，它可以定义各种各样的形状，例如三角形、矩形、圆形、立方体等等。需要注意的是，使用Geometry创建物体时，需要手动计算并设置物体的法线以及UV映射等属性，这一过程有些繁琐。
2023-05-04 20:11:21
1256
原创 探索三维世界【2】：Three.js 的 Texture 纹理
你可以使用 TextureLoader 加载网页中的图像，然后在场景中创建一个新的纹理对象，并将其应用到任何需要的物体表面上。纹理是指将一张图像映射到 three.js 场景中的物体表面上的过程。在进行创建纹理加载器时，直接通过THREE父类进行创建，之后通过load方法进行加载图片到对应的纹理对象上。因此，TextureLoader 和 Texture 以及其子类之间是一种解耦的关系，TextureLoader 负责纹理的加载和创建工作，而 Texture 及其子类则负责实现具体的纹理效果和属性。
2023-05-02 12:56:19
2234
原创 瘦身SpringBoot：优化项目打包大小的方法
现有的应用开发中，不论是单体架构、微服务架构，如果项目采用的是 springboot、springcloud 来作为底层框架，打包时最终都会以jar包的方式打包、部署。这是就会面临一个问题，就是 jar 包非常大，单体应用还好，但是如果是微服务就非常痛苦，几十个微服务就要拆分打包几十个 jar 包，每个 jar 包都很大(几百M)，合起来就好几个 GB，非常占用空间。
2023-04-12 15:01:42
3839
原创 探索三维世界：从Hello World开始的Three.js入门之旅
Three.js是一款基于WebGL的JavaScript库，它可以帮助开发者快速构建3D场景和动画效果。它提供了丰富的API，包括几何体、材质、光源、相机等组件，可以实现复杂的3D交互。Three.js还支持多种导入格式，包括OBJ、Collada、FBX等，可以方便地将3D模型导入到场景中。入门Three.js需要掌握WebGL的基础知识，因为Three.js是基于WebGL的，所以对于WebGL的了解可以帮助更好地理解Three.js的原理和使用。
2023-04-07 16:47:20
1073
原创 Vue3为什么要使用组合式API——Vue3的组合式API和Vue2的选项式API的优缺点
使用组合式API的主要原因是为了更好的解决组件复杂性和代码重用性的问题。组合式API将组件的逻辑按照功能进行划分，将相关逻辑放在一起，使得代码更加清晰和易于维护。同时，组合式API还可以更好地利用TypeScript等静态类型检查工具，提高代码的可靠性和稳定性。组合式API还提供了一些新的特性，例如响应式API、生命周期钩子函数的重命名、setup函数等，这些新特性使得组合式API更加强大和灵活。
2023-03-24 21:07:52
2865
2
原创 Vue3 组合式API（setup、ref、reactive、computed、watch、hook、shallow、provide ）详解
Vue3中的自定义hook是通过使用函数式组件和Composition API实现的。自定义hook可以将重复的逻辑提取出来，使代码更加简洁和易于维护。要创建一个自定义hook，可以定义一个函数，该函数接受参数并返回一个对象或数组，该对象或数组可供组件使用。
2023-03-24 17:40:29
1470
原创 深入底层——浅谈Vue2和Vue3的响应式数据实现原理
在 JavaScript 中有两种劫持 property 访问的方式：getter / setters 和 Proxies。Vue 2 使用 getter / setters 完全是出于支持旧版本浏览器的限制。而在 Vue 3 中则使用了 Proxy 来创建响应式对象，仅将 getter / setter 用于 ref。
2023-03-18 16:34:41
2109
原创 不一样的邂逅——初识Vue3
Vue3.0 版本代表了 2 年多的开发工作，包括 30+ RFC、2，600+ 提交、来自 628 个贡献者的 99 个拉取请求，以及核心存储库之外的大量开发和文档工作。Vue 是为社区创建并由社区维护的独立项目，如果没有您的持续支持，Vue 3.0 是不可能的。这里直接从对应的官网上获取其打包的一个说明流程图。
2023-03-17 17:55:38
1150
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人