- 博客(48)
- 收藏
- 关注
RSS订阅原创 git常用操作合集
命令行作用git init初始化本地仓库git config --global user.name '用户名'设备Git的用户名git config --global user.email '邮箱'设备Git的邮箱地址git status查看Git当前的状态git log查看Git历史提交版本记录git refloggit操作流程记录从远程仓库克隆代码到本地，此时不需要在initgit add test.html(相对路径或绝对路径)将指定的修改文件加载到暂存区。
2025-12-20 15:59:30
762
原创 使用网页打开电脑的exe可执行文件的几种方法
最近遇到了一个之前没有见过的需求，需要在项目启动之后，通过点击页面上按钮，来唤醒电脑上的一个exe可执行文件，也就是通过网页打开一个APP一样，类似于百度网盘那种功能。经过一番努力，发现了这么几个可行的方法，这里一一列举一下。
2025-12-18 14:32:17
664
原创 【three.js】实现玻璃材质时，出现黑色/白色像素噪点
three.js小白的学习之路。最近在使用blender绘制一些厂房模型，不可避免的要开几个窗户，增加几个玻璃。其实在几个月之前也遇到过类似的问题，就是在blender中将玻璃材质的折射、投射、金属度和粗糙度等参数调整好之后，在blender中看没有任何问题，但是导出glb，加载到three.js中渲染就会出现一些白色或者黑色的噪点，就类似于下面的这种情况：在没有遮挡的时候是正常的玻璃材质，在后面有遮挡的时候就会出现黑色噪点。可以通过GUI调试查看更改各个参数时，玻璃材质会体现出什么样的效果。
2025-11-10 13:57:53
850
原创 element-plus中el-tooltip的effect的亮暗模式
最近在项目中遇到了一个需求，需要根据系统的主题变化，来修改某处提示，白天模式展示白天的内容，黑夜模式展示黑夜的。需求本身没有问题，但是el-tooptip的背景色在跟随变化时，却与自己的预期不符。发现系统主题亮色下确实是白色背景，但是系统主题暗色下依然是白色背景。这就有些意思，是effect没有生效？还是不能这么写？我决定探究一下。
2025-10-22 14:45:00
394
原创 element-plus中Form表单的校验规则书写格式整理
为了方便自己随时查阅，这里做了一个整理(毕竟github不翻墙容易打不开，而且还是英文)。
2025-10-09 19:55:45
895
原创 three.js射线拾取点击位置与屏幕坐标映射
将上述两个分量从鼠标的二维坐标转换到NDC，我们只需要将其归一化，值变为[0, 1]，在乘以2，值变为[0, 2]，在减去1，值变为[-1, 1]，就能达到我们的目的。在使用three.js搭建可视化场景的时候，不可避免的要添加点击事件，需要用到three.js提供的Raycaster类。归一化之后的坐标大概就是下面的示意图，X轴正方向向右，左侧是-1，右侧是1；两行代码其实就是屏幕坐标到二维坐标的一个转换。意思是：鼠标的二维坐标，以归一化设备坐标（NDC）表示——X和Y分量应在-1和1之间。
2025-09-24 19:09:49
468
原创 [three.js] 太空隧道穿梭
three.js小白的学习之路。使用scene的天空盒加上相机的移动实现一个简单的太空中隧道穿梭的例子。其实太空也只是个噱头，只需要替换相应的纹理图片即可。
2025-08-20 14:45:18
384
原创 [假面骑士] 555浅谈
震惊，人类最新的进化形态——奥菲一诺，横空出世！日本的顶级财团，Smart Brain，的前任社长，花形，收养了一批孩子，并创建了流星塾，这些孩子都亲切的称其为父亲。随着这群孩子的长大，大家也都各奔东西。在某一天，一场关于流星塾的同学会如约而至，大家在一起畅所欲言，怀念过去。突然，一个奥菲一诺出现，将流星塾的众人全部杀死。此时，一个路过的奥菲一诺想要救人，却没有救下(小明：嗯？
2025-08-06 21:00:32
1180
原创 three.js实现随机山脉波纹效果
three.js小白的学习之路。好久没有更新了，今天分享一个简单的小效果，可以放在网站首页顶部当个背景展示，大概效果如下所示：下面来分步介绍一下。
2025-08-01 15:29:38
712
原创 [假面骑士] 亚极陀浅谈
亚极陀设定上是继承了空我的世界观，发生在空我事件两年后。小日子过得不错的日本又又又出现了新的奇奇怪怪的“未确认生命体”，不过换了一种新的叫法——“unknown”。话说在远古时期，黑神和白神统治着地球，但二者由于理念等各种原因大打出手，最后白神不低黑神，将希望的种子洒满了大地，并告诉黑神未来会有人觉醒白神的力量，从而击败黑神。
2025-07-02 20:07:40
1653
原创 three.js粒子系统展示图片与动画切换
大佬的代码还是很有东西，这个思想是值得借鉴的。第一看的时候我也比较懵逼，比如id是干啥的？uv能这样计算吗？position好像没有用啊？这些函数是干啥用的？等等。静下心来仔细的品味，发现每一步都有他的道理。就学吧！PS：附上源码<template></div>80,0.01,500});// 允许渲染器渲染阴影// 设置设备像素比，避免渲染模糊问题// blendValue范围是 0 - 1// 缓动函数t < 0.5?// 图片加载路径。
2025-06-17 17:42:36
1046
原创 shader实现发亮的粒子 + 透明度渲染可能出现的坑
shader小白的学习之路。3D可视化就是为了更好地展示效果，谁会拒绝一个闪闪发光的星空呢。说起发光，第一想到的肯定是three.js 自带的后处理的辉光效果，这个在我自己之前的博客中也有讲过。我没有剖析过相关源码，也没有那个能力，今天只是分享一个让粒子发光的另一种方法。
2025-06-13 15:02:55
498
原创 [假面骑士] 空我浅谈
假面骑士空我是一部划时代的作品，为假面骑士斩获了“星云赏”这等重量级奖项，其成功是毋庸置疑的。剧中人物刻画细腻，整体脉络清晰，剧情推动也合情合理。除了画质较为古早(企鹅上有高清的画质)之外，几乎没有什么缺点。是一部非常值得一看的特摄剧！
2025-06-13 11:10:38
1204
原创 [假面骑士] 龙骑浅谈
结束战斗结局和继续战斗结局。这两集内容上是一样的，只不过最后真司的选择不一样。这两集是超脱于其他剧集之外的。开头的龙骑如果我没有记错应该是当时真司去采访的那家人，然后捡到了卡盒。在这儿变成了这个神原送给真司了龙骑卡盒。真司还是老样子，拿着名单开始一个个寻找其他骑士，需求帮助。不出意外，全部被拒绝。就一个那个坑了我令子姐姐的警察，假模假样的说，哎呀，我是警察，我也是组织战斗的，巴拉巴拉，然后反手背刺。警察这个职业算是被你玩明白了！最后还得是我们的莲站在了真司这一边。
2025-06-06 21:57:53
1713
原创 three.js中使用tween.js的chain实现动画依次执行
handle2.chain(handle3) // 执行顺序 1 -> 2 -> 3handle1.chain(handl2, handl3) // 执行顺序 1 -> 2 和 3handle2.chain(handl1) // 无限循环动画，有点类似于 死锁chain也会返回一个句柄，是已经被修改的handle1的句柄。有时可能会出现一些问题，我遇到的一个问题是，第二次执行的时候出现了跳帧问题，就是直接到了结束帧，然后动画的时间依然保持不变。
2025-06-05 19:38:23
650
原创 QGIS3.40.X使用OSM获取数据
该插件会提供一些常用的地图瓦片工具，如谷歌、必应等，有的地图需要科学一下。有的朋友，刚安装这个插件的时候，不会有这么多，此时可以点击 setting -> More services -> Get contributed pack地理空间数据云可以选择不同的数据集，根据行政区块或是自己框选等方式，下载不同的信息，如DEM信息等。
2025-05-21 14:50:20
975
原创 QGIS3.40.6矩形要素工具 + 卫星底图添加 + img格式转换 + 中英文切换
DEM小白的学习之路！已经不再满足于基础建模的我(虽然基础建模都没有太搞明白)，开始研究如何使用DEM，也即高程信息(高度信息)来建立模型，尤其是山地等自然景观。学习这个肯定需要一个工具，选择QGIS，并准备学习一下工具的使用。
2025-05-09 11:15:41
805
原创 three.js中使用canvas生成动态纹理贴图
three.js小白的学习之路。今天分享一个使用canvas生成纹理，然后通过CanvasTexture类创建贴图的例子。
2025-04-29 14:14:45
609
原创 three.js场景导出JSON文件
在浏览和three.js有关的一个博客网站时，突然发现一个比较有意思的话题，就是将场景保存成JSON文件，然后导入到另外一个场景中。使用的方法是scene.toJSON()方法，将scene场景内的所有信息转成json字符串的形式保存，在浏览器下载成一个json文件，或者干脆保存到localStorage中。然后通过读取文件的方法，将json字符串在转换成对应的场景信息，覆盖当前的scene即可。
2025-04-25 09:30:06
584
原创 高德地图API + three.js + Vue3基础使用与使用 + 标记不显示避坑
three.js小白的学习之路。最近闲来无事，突然想起来之前好像项目有需求说是要将模型放在地图上。加上在浏览别的大佬写的博客时，也找到了一些大佬写的相关文章。基本上都是使用的。我也随之开启了自己的学习之路。先简单学习了一些在高德地图上加入点标记、图层叠加、样式修改的API，不得不佩服人家确实厉害，操作简单，灵活度高，而且API从1.x升级到2.0之后，对性能优化的非常明显。但是单纯的学习过程有些枯燥，就简单浏览了一遍，等用到的时候再来翻一遍。
2025-04-24 19:33:54
1719
原创 three.js中的instancedMesh类优化渲染多个同网格材质的模型
three.js的官网是这样介绍的：InstancedMesh实例化网格是特殊版本的Mesh(具有mesh的相关属性和方法)，可以用来渲染大量的具有相同几何体和材质、但具有不同世界变换的物体。InstancedMesh可以减少draw call的数量，从而提升程序整体的渲染性能。听起来就和我们想要的效果很搭。InstancedMesh类可以很好地优化那些具有大量的共享材质和网格，但是有不同平移旋转缩放的模型，就类似于blender中使用了Alt+D复制了很多份，然后每一个模型的位姿又有不同。
2025-04-21 19:35:41
1522
原创 Vue3中使用web worker实现canvas在three.js中的离屏渲染
在vue中，通过canvas的transferControlToOffscreen获取offscreenCanvas对象(有的浏览器可能不支持，Chrome是支持的)，通过postMessage(吐槽这里的M大写，onmessage没有，看着别扭)传递给web worker，传递的数据中type是自定义的，用于标识当前信息是干啥的，方便我们进行区分，canvas就是画布对象了。首先我们要分成两个文件去实现，一个是主入口的index.vue文件，一个是web worker工作所在的worker.js文件。
2025-04-17 14:52:32
777
原创 blender关联复制与Three.js网格和材质共享验证
还有一个问题没有得到解决，就是像这种，虽然是四个模型，但是几何体和材质都是共享的同一个，合并之后，显然模型的几何体会变得很复杂，但是模型的个数减少了。将导出的glb加载Three.js搭建的场景中，然后改变其中一个geometry的position的array，也就是顶点的位置，看是仅当前的mesh改变，还是所有的都改变。我去问了一下AI，AI说，你的担心是多余的，因为Three.js不支持共享，是为每一个网格都创建了一个实例，所以是不共享的。于是，我决定简单做个实验，来验证一下。小小AI，妄想骗我？
2025-04-16 19:42:44
996
2
原创 Three.js中的WebGLRenderTarget渲染目标
Three.js小白的学习之路。之前博客写过一篇使用WebGLRenderTarget离屏渲染实现。本篇则主要是介绍一下WebGLRenderTarget以及一些其他使用，本篇参考了Three.js的官方中有关的讲解。渲染目标大体上指的是可以被渲染的纹理。当它被渲染之后，你可以像使用其他纹理一样使用它。意思就是可以将渲染目标输出的纹理当做一张图片纹理去使用(浅薄理解)。
2025-04-16 11:25:41
1105
原创 Three.js中Mesh的LookAt方法
看介绍就知道，这个是用来旋转的，那么就不难想到有那么几个应用场景，比如说让某个模型绕某一个点一直旋转，就可以在模型位置更新的同时，更新lookAt，使其一直朝向某一个点；以前只知道camera的lookAt方法，用于控制摄像机的朝向位置，而Object3D，也有类似的方法。Mesh作为Object3D的子类，自然也继承了相关的使用。最近，Three.js的官网更新了，将原本放examples的地方改成了manual，里面是three.js的使用大合集，感兴趣的小伙伴可以刷一遍，会有很多收获！
2025-04-11 11:05:14
459
原创 [blender日常一点点]针对同一个网格的不同模型批量添加修改器
在使用blender建模的时候，经常遇到，在alt+D复制了一批模型之后，突然发现，要给其中的某一个网格添加一个修改器。可以看到，网格已经不再是共享了，这样会导致资源消耗增加。需要以下的三个操作即可。blender小白的学习日常。
2025-04-10 09:23:08
1102
原创 Three.js关键帧动画不连续正放、倒放出现的部分问题
一开始的想法是，在blender中为模型添加上相应的动画，然后再代码进行控制，正放就是timescale为1，倒放就是-1，每次动画只播放一次，动画结束后，让其停留在结束位置即可。因此可以猜测clampWhenFinished的原理就是在动画结束时的前一刻，使动画暂停，从而完成动画结束后停留在原位置的操作。经过控制台打印可以看到(全过程动画结束后的控制台打印)，设置clampWhenFinished为true是，动画的paused变成了true，也就是动画暂停了。当然，这样就不需要使用reset方法了。
2025-04-09 14:24:42
420
原创 [blender日常一点点]快捷键-同组/类型选择和同材质选择+材质替换以及清除无用材质/网格等
blender中想要选中所有的同类型模型(空物体、文字等)、子级、同级等，可以选中目标模型后按下shift+G，会出现下列的菜单：可以根据需要选择。还有一些是在编辑模式下才会出现的，如按面模式下的面积相近程度、材质等：线模式和点模式下也有不同的选项。
2025-03-28 17:40:21
2044
原创 [blender日常一点点] 管道生成
blender的仅有就是电脑爆炸！管道还是模型建立中比较常用的，无论是人物也好、建筑也好，基本都会用到。今天记录一下生成管道的几种方法。
2025-03-22 16:55:52
1125
原创 [blender日常一点点] 实现模型环绕效果
我的尽头是建模。学习数字孪生，总归是要和模型打交道，但是太难了啊！手残党画模型可太自闭了。因此从这篇博客开始会陆陆续续记录一些会用到的小技巧。今天记录的是快速实现模型环绕一圈的效果，介绍以下几种不同的方法(均为简单的方法，看别人还有其他的方法去实现，但是对我来说已经超标了！
2025-03-22 16:33:45
774
原创 Three.js+shader实现模型内外发光效果
核心内容是对shader中法线的运用。说实话，法线还是比较抽象的，不是很好理解，也不是很好想，主要不是主攻数学和图形学的，这些东西属实是有些超纲了。现在都是拿来主义，记录一下，以防以后要用的时候找不到了！主要表现为模型的内部和外部都有一些发光的效果。外部的发光像是一种描边，内部的发光像是在模型的内部安装了一个灯泡一样。最近在学习一些关于发光的后处理效果。shader小白的学习之路。
2025-03-22 15:39:50
469
原创 Three.js中实现描边效果的四种方法
介绍了以上四种实现描边效果的不同方法，大家有需自取。会其中一两种能实现我们想要的效果即可，效果最好的还是Three.js中自带的后处理库的描边效果，有多种效果可以自行调试，功能强大，还得是官方！PS：还会有其他实现描边的方法，欢迎大家为我扫盲，如果有错误，也请及时指出。
2025-03-08 11:09:55
1722
原创 Three.js实现爆炸图动画效果
爆炸图动画，不想用blender而是通过three.js来做，就是向量的一种运用场景。需要一定的数学基础和空间想象力，不过说实话，没有也没啥所谓。然后通过一个变量的连续变化使模型的位置发生变化，产生爆炸的效果，目标达成。如果说补货是用blender等建模软件或其他原因导致无法获得模型的相关坐标信息，则使用世界坐标转成局部坐标的方式完成。
2025-03-06 19:02:19
1919
6
原创 关于Three.js生成的第三方库@pmndrs/vanilla实现云朵
里面还有一些参数，如不想让云受光照影响，可以再Clouds里传入属性 {material: Three.MeshBasicMaterial}，这样生成云的材质就是基础材质，不受光照影响。有兴趣可以自己去npm上了解一下，我上面的链接是国内镜像，毕竟不科学上网，npm可能比较慢。这个库里面提供许多经过大佬封装过的材质，像反射材质，还有聚光灯、广告牌、精灵动画等，其中也包含了云的快速实现。这个云Clouds类继承自Three.js的Group，内部的Cloud类类比于Three.js中的Mesh。
2025-03-05 14:35:47
464
原创 Three.js解决ShaderMaterial中有关模型深度的问题
shader小白的学习之路。在之前的博客中，写过一个关于，后续再使用过程中发现了一个很难搞的现象。
2025-03-03 20:13:42
857
原创 Three.js实现星空 + 流星效果
大概就是一个在一定范围内生成一些点，然后放大，在添加上辉光效果，有那么一点一闪一闪的感觉。流星就是一天曲线中取点，然后控制点的透明度和点的大小，让其看起来是运动的，并且头宽脚窄。这两天准备学一下粒子系统，因此先做点简单的熟悉一下。粒子就是一个个的点构成的，所以这点和星空很像，于是就想弄个极简版本的。PS：代码如有雷同，不是巧合(滑稽)。shader小白的学习之路。
2025-02-26 20:55:00
594
原创 three.js中切换场景时添加过渡效果
setRenderTarget方法第一个参数是指定渲染结果存放的目标，null表示直接渲染到画布，在isGo为true的时候，将结果渲染到RenderTarget里面，后续获取到这个纹理，用于切换。render方法是动画进行的时候，用于不同的渲染，动画开始前，渲染的是默认的场景，开始时，渲染的是二者之间的过渡场景，结束后，渲染切换后的场景，并且重置一些设置。本篇就是基于大佬的博客代码写的，所以重复率会很高，主要是对其中的代码进行了全方位的注释解读，如有侵权，联系我删除这个博客(保命要紧)。
2025-02-25 16:18:28
708
原创 Three.js中使用bloom特效 + 常见的Pass总结
/ 构造函数renderer: 用于渲染场景的渲染器。: （可选）EffectComposer内部使用的预配置渲染目标。EffectComposer的基本工作流程如下：创建一个EffectComposer实例。添加渲染目标和一系列的Pass。在渲染循环中调用composer的render方法。colorSpace: Three.SRGBColorSpace, // 重新设定颜色空间// 后者可选// 创建一个渲染通道// 将渲染通道加到composer中。
2025-02-21 10:48:25
1743
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人