自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(73)
  • 收藏
  • 关注

原创 javascript跳转微信: 扫码,分享链接,下载二维码

微信后台配置扫码、扫描二维码、分享链接、下载二维码。

2024-01-25 20:45:00 459 1

原创 苹果系统H5下拉加载事件重复触发(react hooks)

ios端手机下的h5/小程序,滚动到底部时加载更多数据,但是滚动到底部时重复触发加载事件,在安卓机下则不会发生该问题,记录一下解决方案。

2023-10-27 12:08:47 555

原创 nodejs-处理http请求

使用nodejs搭建后端代理服务,处理http请求,理解nodejs是如何处理get、post请求的。

2023-09-07 15:20:49 351

原创 JavaScript下载excel文件

JavaScript下载excel文件,通过链接下载;直接下载文件流两种方式,对于其他格式的文件下载也适用

2023-08-23 17:43:47 2334

原创 mapbox-gl 点位编辑功能

矢量在线编辑是gis常用的编辑功能,兴趣点(POI)与区域面(AOI)或者道路线不同,在地图上没有形状和面积,仅表示落位地点,本文介绍使用mapbox进行点位编辑的常用方式,底图使用高德公开的地图服务。根据UI设计生成新的雪碧图,作为地图上点位的图标。方法有两种:借助 Marker方式二;采用 mapbox-gl-draw 插件。

2023-06-21 12:21:05 1216 1

原创 浏览器网络请求——HTTP详解

浏览器网络请求——HTTP详解

2023-05-17 19:49:16 2803 1

原创 mapbox-gl 移动端(H5)位置共享交互

分享最近写的一个小demo,功能类似微信小程序端的大头针位置共享功能,需要实现的主要功能包括位置查询、周边地点检索、位置定位等,数据采用天地图球面墨卡托(WGS84)的 WMTS 矢量底图与标记服务,框架采用Taro。

2023-04-25 19:45:00 804 4

原创 Cesium实践(4)——空间数据加载

本文介绍Cesium如何加载空间数据,空间数据即明确定义在三维空间中的数据,空间数据包括以下几类:1、几何形体(点、线、面、体)2、标签(文字图标等)3、几何文件(geojson、kml、czml)4、三维模型(gltf、gltf)。3D Tiles 作为Cesium提出的处理大型三维数据的格式暂不在本文介绍。

2023-04-23 20:00:00 1550

原创 浏览器网络之TCP与UDP

TCP协议:三次握手与四次挥手,为什么要三次握手与四次挥手。TCP与UDP的区别,UDP的使用场景。

2023-04-19 08:00:00 626

原创 Cesium实践(3)——坐标系与相机系统

本文介绍Cesium世界中的坐标系统,Cesium的坐标系分三种:屏幕坐标、笛卡尔空间直角坐标、地理坐标,在得知目标的坐标后,即可使用相机系统对目标进行定位或进行相机交互。

2023-04-17 09:00:00 1553

原创 threejs-后期通道效果汇总

Threejs提供了很多后期处理通道,配合可实现各种效果,本文列举Threejs包含的通道及效果。

2023-04-15 14:31:00 917

原创 threejs-效果合成器(EffectComposer)

threejs中的效果合成器可以在场景渲染完毕后再增加一些特效,如:让场景再某些情况下变得更加模糊或者更加鲜艳,增加滤镜或者闪烁效果,使用扫描线添加老旧电视屏幕上的效果等等。本文介绍 EffectComposer的基本使用,并使用这个通道为地球添加闪烁效果。

2023-04-11 22:45:50 1179

原创 Cesium实践(2)—— 加载地形与影像

地形数据用来表示真实的地形起伏;地图数据指的则是真实的影像服务, 本文实践在Cesium中加载地形与影像数据。

2023-04-08 22:20:22 6493

原创 webgl——必须掌握的数学知识

想要学好WebGL,良好的数学储备是必不可少的,本节详细地介绍与WebGL相关的数学知识,并总结这些知识在图形学中的应用。

2023-03-30 22:00:58 940 1

原创 DOM事件体系:事件流、事件对象、事件代理

DOM事件体系:事件流——事件冒泡、事件捕获;事件对象;事件代理

2023-03-27 21:54:16 317

原创 webgl——给场景添加光

在之前的学习中已经将三维物体添加到了场景中,但是并没有在场景中使用光,照可以使模型更具有立体感,本文主要介绍 webgl 中的光照理论和计算方式,并展示如何在三维场景中添加光照。

2023-03-25 22:40:13 720

原创 Cesium实践(1)—— Hello World

工作大半年来主要的技术栈是mapbox-gl 和 threejs,但是作为一名GIS专业毕业生,一直对Cesium充满兴趣。Cesium不仅保持了 threejs 的三维绘制能力,而且内置大量渲染地理数据的API于算法,相较于 mapbox “制作世界上最漂亮的地图”的定位,Cesium无疑是重gis项目或业务的首选框架。据说Cesium与Vue结合更加简便,本文介绍Cesium中的核心类,并使用 Vite + Vue 搭建Cesium应用。

2023-03-22 00:21:23 998 1

原创 微信3D小游戏系列一:在微信小游戏中使用threejs

本文基于微信开发者工具,在微信小游戏环境中使用threejs

2023-03-18 23:45:56 2633 3

原创 浏览器DOM基本操作

DOM 结构以树的形态存在。他提供了一系列API。Document 就是指本份html 文件。当浏览器载入 HTML 文档, 它就会成为Document对象。Element 就是指 HTML 文件内的各个标签,像是下面这样的标签都属于Element。TextText 就是指被各个 Element 包起来的文字。

2023-03-16 19:00:00 406

原创 JavaScript异步机制——Event-Loop

JS是单线程的语言,所有的异步都要通过`异步`实现,而Event-Loop 就是JavaScript的异步实现机制。

2023-03-14 12:29:25 295

原创 JavaScript现代异步方案——Promise、async / await

Promise、async / await 的出现,解决了回调地狱的问题,优雅地实现了异步方案

2023-03-06 23:42:57 190

原创 mapbox-gl实现 2.5D 图层高度编辑器

mapbox-gl 支持表达式编辑 2.5D 建筑物高度,但是 style 文件原生的表达式很不直观,本文实现一个简单的 2.5D高度图层编辑器,核心是理解mapbox表达式规则与递归算法。

2023-03-02 20:55:28 1006

原创 threejs创建各面不同色的立方体

threejs创建一个每个面都不同色的立方体,基于 BoxGeometry 的 faces 属性,不需要使用 BufferGeometry 创建复杂的顶点颜色缓冲区。直接上代码,原理很简单不加赘述

2023-02-27 21:30:00 846

原创 webgl三维绘制——彩色立方体

webgl的知识储备了这么多,从现在开始将会正式进入立方体的绘制,本文介绍如何在webgl中绘制一个三维立方体。

2023-02-26 21:10:25 713

原创 webgl渲染优化——深度缓冲区、多边形缓冲机制

webgl在渲染三维场景时,按照Z坐标的值决定前后关系,但是在默认状态下它并未开启深度检测,而是将后绘制的物体放在前面;当两个物体Z坐标相差无几时,会产生深度冲突,两个物体颜色互相影响,使得表面看上去斑斑驳驳,需要开启多边形缓冲来避免此类问题。

2023-02-25 15:06:44 955

原创 JavaScript中的this关键字

this 的取值是在函数执行的时候确定的,不是在函数定义的时候确定的,与闭包相反。this 指向调用它所在方法的那个对象

2023-02-23 22:17:21 645

原创 webgl投影矩阵推导(正射投影、透视投影)

在webgl中,三维空间中的所有物体不是会都被绘制出来,只有当它在可视范围内时,才会进行绘制。因为不在可视范围中的物体即使绘制也不会在屏幕上显示。除了水平和垂直范围内的限制,WebGL还限制观察者的可视深度,即"能够看多远"。水平视角、垂直视角、可视深度,三者定义了可视空间。由正射投影(orthographic projection)产生的长方体状可视空间由透视投影(perspective projection)产生的锥体状可视空间正射投影矩阵透视投影矩阵。

2023-02-20 01:29:56 1134 2

原创 JavaScript作用域、闭包

如果一个函数引用了自由变量,即该函数使用了某变量,但它既不是函数参数、也不是函数内部定义的变量,则该函数就叫闭包。

2023-02-18 22:02:58 664

原创 JavaScript原型、原型链、原型方法

构造函数有一个prototype原型对象, 原型对象里的constructor指向构造函数本身,每个对象都有一个__proto__属性,并且指向它的构造函数的原型对象(prototype),对象不必存储所有的属性或方法,而可以通过原型层层向上查找,减少内存的占用。

2023-02-14 20:40:00 332

原创 webgl深入理解视图矩阵

在前面的学习中,已经得知了webgl是如何绘制二维图形,并进行仿射变换(矩阵变换)、纹理、交互等操作也适用于绘制三维图形。本节将介绍webgl是如何通过视图矩阵进入三维世界的。

2023-02-12 21:06:21 884

原创 threejs多种方式封装飞线组件(几何、贴图、着色器)

之前在研究threejs时,尝试了通过线几何体、通过纹理贴图、通过着色器等几种方式实现飞线效果,现在将这几种方式使用 typescript, 采用面向对象的方式封装整理并记录下来,思路供大家参考。

2023-02-07 17:03:05 2432 2

原创 webgl绘制图形API——drawArrays、drawElements

gl.drawArrays()作为webgl中常用的函数图形绘制方法,可以在浏览器按照指定的模式绘制图形,与之相对的gl.drawElements()函数也是常用的绘制函数,本文将介绍二者的区别与使用。

2023-01-30 21:15:35 2833 13

原创 threejs相机控件使用记录

threejs提供了很多摄像机控件,提供这些控件可以操作场景中的摄像机的移动、旋转等,实现交互动画效果,全部的控件在threejs发布的包中都已封装,本文记录常用相机控件的使用场景。

2023-01-28 13:30:02 1630

原创 OpenGL ES着色器语言(GLSL ES)规范 ——下篇

本篇接上文继续对着色器语言规范进行讲解,本文的内容包括:分支和循环、着色器内置变量、函数、存储限定字、精度限定字、预处理指令等,接OpenGL ES着色器语言(GLSL ES)规范 ——上篇。

2023-01-25 15:35:08 1148

原创 OpenGL ES着色器语言(GLSL ES)规范 ——上篇

着色器语言通过控制GPU来进行前端图形的渲染,WebGL使用名为GLSL ES的规范进行着色器语言的编写,GLSL ES是在OpenGL的基础上进行一定的精简后形成的,它的语法与C语言有些类似。本文对webgl常用到的GLSL ES知识进行记录。共分为上下两篇,本篇包括OpenGL ES基础:一段基本的着色器代码、大小写和分号、数据值类型、命名规范、类型转换、运算符;矢量和矩阵:矢量和矩阵类型、矢量和访问矩阵构造,矢量和矩阵运算规则;特殊类型:结构体和数组结构体;数组取样器等。

2023-01-25 09:52:19 958

原创 webgl纹理贴图机制

在计算机图形学中,为了模拟更加真实的效果,需要给每个像素赋予不同的颜色值,这种情况下如果手动指定每个像素点的rgb值,将会是一件难以完成的任务。这就需要有一种机制,能够让我们把图片素材渲染到模型的一个或者多个表面上,这种机制叫做纹理贴图,本文将详细介绍在webgl中如何把一张真实图像贴到计算器图形上的。

2023-01-23 22:49:55 2127 5

原创 webgl变换矩阵理论详解

在webgl中将图形进行平移、旋转、缩放等操作时可以在着色器中使用数学表达式来操作,但是这样并不是最好的方式,当进行的变换比较复杂,如“旋转后平移再缩放”这样的场景,每次都要先重新计算表达式,然后在着色器中去更改它,这样很不方便,因此,出现了另一种数学手段——变换矩阵,变换矩阵非常适合处理计算机图形。本文对变换矩阵的理论进行讲解。矩阵运算、矩阵变换的一般规则变换矩阵进行图形变换实例。

2023-01-19 17:58:09 1061 3

原创 webgl图形平移、缩放、旋转

在webgl中将图形进行平移、旋转、缩放的操作称为变换或仿射变换,图形的仿射变换涉及到顶点位置的修改,通过顶点着色器是比较直接的方式。本文通过着色器实现对webgl图形的仿射变换。

2023-01-07 22:27:46 1429

原创 mapbox-gl添加threejs飞线

mapbox-gl是一个基于webgl开发的三维地图渲染引擎,但是很多三维特效只用mapbox并容易实现,比如带高度的飞线,本文结合之前对threebox的研究实现带高度的飞线。

2023-01-05 20:51:00 2267 5

原创 浏览器动画之requestAnimationFrame()

在相当长的一段时间里,定时器工具是JavaScript中最常使用的动画工具,但是该方式作为动画的实现手段存在其原理上的弊端,直到requestAnimationFrame()这个API的出现,可以使浏览器以最优的时机进行重绘,自此后,requestAnimationFrame已经成为前端动画实现的最佳选择。

2023-01-03 21:09:30 647

cesium使用webpack搭建react项目

cesium使用webpack搭建react项目

2023-10-08

threejs纹理贴图资源

threejs纹理贴图资源

2023-10-08

微信小游戏:在开发者工具中使用threejs

微信小游戏:在开发者工具中使用threejs,工程代码。

2023-03-18

threejs着色器编程

threejs着色器编程

2022-08-23

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除