- 博客(40)
- 收藏
- 关注
RSS订阅原创 three.js实现随机山脉波纹效果
three.js小白的学习之路。好久没有更新了，今天分享一个简单的小效果，可以放在网站首页顶部当个背景展示，大概效果如下所示：下面来分步介绍一下。
2025-08-01 15:29:38
392
原创 [假面骑士] 亚极陀浅谈
亚极陀设定上是继承了空我的世界观，发生在空我事件两年后。小日子过得不错的日本又又又出现了新的奇奇怪怪的“未确认生命体”，不过换了一种新的叫法——“unknown”。话说在远古时期，黑神和白神统治着地球，但二者由于理念等各种原因大打出手，最后白神不低黑神，将希望的种子洒满了大地，并告诉黑神未来会有人觉醒白神的力量，从而击败黑神。
2025-07-02 20:07:40
1033
原创 three.js粒子系统展示图片与动画切换
大佬的代码还是很有东西，这个思想是值得借鉴的。第一看的时候我也比较懵逼，比如id是干啥的？uv能这样计算吗？position好像没有用啊？这些函数是干啥用的？等等。静下心来仔细的品味，发现每一步都有他的道理。就学吧！PS：附上源码<template></div>80,0.01,500});// 允许渲染器渲染阴影// 设置设备像素比，避免渲染模糊问题// blendValue范围是 0 - 1// 缓动函数t < 0.5?// 图片加载路径。
2025-06-17 17:42:36
876
原创 shader实现发亮的粒子 + 透明度渲染可能出现的坑
shader小白的学习之路。3D可视化就是为了更好地展示效果，谁会拒绝一个闪闪发光的星空呢。说起发光，第一想到的肯定是three.js 自带的后处理的辉光效果，这个在我自己之前的博客中也有讲过。我没有剖析过相关源码，也没有那个能力，今天只是分享一个让粒子发光的另一种方法。
2025-06-13 15:02:55
401
原创 [假面骑士] 空我浅谈
假面骑士空我是一部划时代的作品，为假面骑士斩获了“星云赏”这等重量级奖项，其成功是毋庸置疑的。剧中人物刻画细腻，整体脉络清晰，剧情推动也合情合理。除了画质较为古早(企鹅上有高清的画质)之外，几乎没有什么缺点。是一部非常值得一看的特摄剧！
2025-06-13 11:10:38
371
原创 [假面骑士] 龙骑浅谈
结束战斗结局和继续战斗结局。这两集内容上是一样的，只不过最后真司的选择不一样。这两集是超脱于其他剧集之外的。开头的龙骑如果我没有记错应该是当时真司去采访的那家人，然后捡到了卡盒。在这儿变成了这个神原送给真司了龙骑卡盒。真司还是老样子，拿着名单开始一个个寻找其他骑士，需求帮助。不出意外，全部被拒绝。就一个那个坑了我令子姐姐的警察，假模假样的说，哎呀，我是警察，我也是组织战斗的，巴拉巴拉，然后反手背刺。警察这个职业算是被你玩明白了！最后还得是我们的莲站在了真司这一边。
2025-06-06 21:57:53
1155
原创 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
557
原创 QGIS3.40.X使用OSM获取数据
该插件会提供一些常用的地图瓦片工具，如谷歌、必应等，有的地图需要科学一下。有的朋友，刚安装这个插件的时候，不会有这么多，此时可以点击 setting -> More services -> Get contributed pack地理空间数据云可以选择不同的数据集，根据行政区块或是自己框选等方式，下载不同的信息，如DEM信息等。
2025-05-21 14:50:20
710
原创 QGIS3.40.6矩形要素工具 + 卫星底图添加 + img格式转换 + 中英文切换
DEM小白的学习之路！已经不再满足于基础建模的我(虽然基础建模都没有太搞明白)，开始研究如何使用DEM，也即高程信息(高度信息)来建立模型，尤其是山地等自然景观。学习这个肯定需要一个工具，选择QGIS，并准备学习一下工具的使用。
2025-05-09 11:15:41
583
原创 three.js中使用canvas生成动态纹理贴图
three.js小白的学习之路。今天分享一个使用canvas生成纹理，然后通过CanvasTexture类创建贴图的例子。
2025-04-29 14:14:45
469
原创 three.js场景导出JSON文件
在浏览和three.js有关的一个博客网站时，突然发现一个比较有意思的话题，就是将场景保存成JSON文件，然后导入到另外一个场景中。使用的方法是scene.toJSON()方法，将scene场景内的所有信息转成json字符串的形式保存，在浏览器下载成一个json文件，或者干脆保存到localStorage中。然后通过读取文件的方法，将json字符串在转换成对应的场景信息，覆盖当前的scene即可。
2025-04-25 09:30:06
478
原创 高德地图API + three.js + Vue3基础使用与使用 + 标记不显示避坑
three.js小白的学习之路。最近闲来无事，突然想起来之前好像项目有需求说是要将模型放在地图上。加上在浏览别的大佬写的博客时，也找到了一些大佬写的相关文章。基本上都是使用的。我也随之开启了自己的学习之路。先简单学习了一些在高德地图上加入点标记、图层叠加、样式修改的API，不得不佩服人家确实厉害，操作简单，灵活度高，而且API从1.x升级到2.0之后，对性能优化的非常明显。但是单纯的学习过程有些枯燥，就简单浏览了一遍，等用到的时候再来翻一遍。
2025-04-24 19:33:54
1330
原创 three.js中的instancedMesh类优化渲染多个同网格材质的模型
three.js的官网是这样介绍的：InstancedMesh实例化网格是特殊版本的Mesh(具有mesh的相关属性和方法)，可以用来渲染大量的具有相同几何体和材质、但具有不同世界变换的物体。InstancedMesh可以减少draw call的数量，从而提升程序整体的渲染性能。听起来就和我们想要的效果很搭。InstancedMesh类可以很好地优化那些具有大量的共享材质和网格，但是有不同平移旋转缩放的模型，就类似于blender中使用了Alt+D复制了很多份，然后每一个模型的位姿又有不同。
2025-04-21 19:35:41
1190
原创 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
622
原创 blender关联复制与Three.js网格和材质共享验证
还有一个问题没有得到解决，就是像这种，虽然是四个模型，但是几何体和材质都是共享的同一个，合并之后，显然模型的几何体会变得很复杂，但是模型的个数减少了。将导出的glb加载Three.js搭建的场景中，然后改变其中一个geometry的position的array，也就是顶点的位置，看是仅当前的mesh改变，还是所有的都改变。我去问了一下AI，AI说，你的担心是多余的，因为Three.js不支持共享，是为每一个网格都创建了一个实例，所以是不共享的。于是，我决定简单做个实验，来验证一下。小小AI，妄想骗我？
2025-04-16 19:42:44
842
2
原创 Three.js中的WebGLRenderTarget渲染目标
Three.js小白的学习之路。之前博客写过一篇使用WebGLRenderTarget离屏渲染实现。本篇则主要是介绍一下WebGLRenderTarget以及一些其他使用，本篇参考了Three.js的官方中有关的讲解。渲染目标大体上指的是可以被渲染的纹理。当它被渲染之后，你可以像使用其他纹理一样使用它。意思就是可以将渲染目标输出的纹理当做一张图片纹理去使用(浅薄理解)。
2025-04-16 11:25:41
966
原创 Three.js中Mesh的LookAt方法
看介绍就知道，这个是用来旋转的，那么就不难想到有那么几个应用场景，比如说让某个模型绕某一个点一直旋转，就可以在模型位置更新的同时，更新lookAt，使其一直朝向某一个点；以前只知道camera的lookAt方法，用于控制摄像机的朝向位置，而Object3D，也有类似的方法。Mesh作为Object3D的子类，自然也继承了相关的使用。最近，Three.js的官网更新了，将原本放examples的地方改成了manual，里面是three.js的使用大合集，感兴趣的小伙伴可以刷一遍，会有很多收获！
2025-04-11 11:05:14
380
原创 [blender日常一点点]针对同一个网格的不同模型批量添加修改器
在使用blender建模的时候，经常遇到，在alt+D复制了一批模型之后，突然发现，要给其中的某一个网格添加一个修改器。可以看到，网格已经不再是共享了，这样会导致资源消耗增加。需要以下的三个操作即可。blender小白的学习日常。
2025-04-10 09:23:08
671
原创 Three.js关键帧动画不连续正放、倒放出现的部分问题
一开始的想法是，在blender中为模型添加上相应的动画，然后再代码进行控制，正放就是timescale为1，倒放就是-1，每次动画只播放一次，动画结束后，让其停留在结束位置即可。因此可以猜测clampWhenFinished的原理就是在动画结束时的前一刻，使动画暂停，从而完成动画结束后停留在原位置的操作。经过控制台打印可以看到(全过程动画结束后的控制台打印)，设置clampWhenFinished为true是，动画的paused变成了true，也就是动画暂停了。当然，这样就不需要使用reset方法了。
2025-04-09 14:24:42
323
原创 [blender日常一点点]快捷键-同组/类型选择和同材质选择+材质替换以及清除无用材质/网格等
blender中想要选中所有的同类型模型(空物体、文字等)、子级、同级等，可以选中目标模型后按下shift+G，会出现下列的菜单：可以根据需要选择。还有一些是在编辑模式下才会出现的，如按面模式下的面积相近程度、材质等：线模式和点模式下也有不同的选项。
2025-03-28 17:40:21
1057
原创 [blender日常一点点] 管道生成
blender的仅有就是电脑爆炸！管道还是模型建立中比较常用的，无论是人物也好、建筑也好，基本都会用到。今天记录一下生成管道的几种方法。
2025-03-22 16:55:52
669
原创 [blender日常一点点] 实现模型环绕效果
我的尽头是建模。学习数字孪生，总归是要和模型打交道，但是太难了啊！手残党画模型可太自闭了。因此从这篇博客开始会陆陆续续记录一些会用到的小技巧。今天记录的是快速实现模型环绕一圈的效果，介绍以下几种不同的方法(均为简单的方法，看别人还有其他的方法去实现，但是对我来说已经超标了！
2025-03-22 16:33:45
458
原创 Three.js+shader实现模型内外发光效果
核心内容是对shader中法线的运用。说实话，法线还是比较抽象的，不是很好理解，也不是很好想，主要不是主攻数学和图形学的，这些东西属实是有些超纲了。现在都是拿来主义，记录一下，以防以后要用的时候找不到了！主要表现为模型的内部和外部都有一些发光的效果。外部的发光像是一种描边，内部的发光像是在模型的内部安装了一个灯泡一样。最近在学习一些关于发光的后处理效果。shader小白的学习之路。
2025-03-22 15:39:50
298
原创 Three.js中实现描边效果的四种方法
介绍了以上四种实现描边效果的不同方法，大家有需自取。会其中一两种能实现我们想要的效果即可，效果最好的还是Three.js中自带的后处理库的描边效果，有多种效果可以自行调试，功能强大，还得是官方！PS：还会有其他实现描边的方法，欢迎大家为我扫盲，如果有错误，也请及时指出。
2025-03-08 11:09:55
1250
原创 Three.js实现爆炸图动画效果
爆炸图动画，不想用blender而是通过three.js来做，就是向量的一种运用场景。需要一定的数学基础和空间想象力，不过说实话，没有也没啥所谓。然后通过一个变量的连续变化使模型的位置发生变化，产生爆炸的效果，目标达成。如果说补货是用blender等建模软件或其他原因导致无法获得模型的相关坐标信息，则使用世界坐标转成局部坐标的方式完成。
2025-03-06 19:02:19
1492
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
362
原创 Three.js解决ShaderMaterial中有关模型深度的问题
shader小白的学习之路。在之前的博客中，写过一个关于，后续再使用过程中发现了一个很难搞的现象。
2025-03-03 20:13:42
642
原创 Three.js实现星空 + 流星效果
大概就是一个在一定范围内生成一些点，然后放大，在添加上辉光效果，有那么一点一闪一闪的感觉。流星就是一天曲线中取点，然后控制点的透明度和点的大小，让其看起来是运动的，并且头宽脚窄。这两天准备学一下粒子系统，因此先做点简单的熟悉一下。粒子就是一个个的点构成的，所以这点和星空很像，于是就想弄个极简版本的。PS：代码如有雷同，不是巧合(滑稽)。shader小白的学习之路。
2025-02-26 20:55:00
380
原创 three.js中切换场景时添加过渡效果
setRenderTarget方法第一个参数是指定渲染结果存放的目标，null表示直接渲染到画布，在isGo为true的时候，将结果渲染到RenderTarget里面，后续获取到这个纹理，用于切换。render方法是动画进行的时候，用于不同的渲染，动画开始前，渲染的是默认的场景，开始时，渲染的是二者之间的过渡场景，结束后，渲染切换后的场景，并且重置一些设置。本篇就是基于大佬的博客代码写的，所以重复率会很高，主要是对其中的代码进行了全方位的注释解读，如有侵权，联系我删除这个博客(保命要紧)。
2025-02-25 16:18:28
523
原创 Three.js中使用bloom特效 + 常见的Pass总结
/ 构造函数renderer: 用于渲染场景的渲染器。: （可选）EffectComposer内部使用的预配置渲染目标。EffectComposer的基本工作流程如下：创建一个EffectComposer实例。添加渲染目标和一系列的Pass。在渲染循环中调用composer的render方法。colorSpace: Three.SRGBColorSpace, // 重新设定颜色空间// 后者可选// 创建一个渲染通道// 将渲染通道加到composer中。
2025-02-21 10:48:25
1325
原创 Three.js+GLSL ES实现不同物体间同步运动的光线
这个其实并没有什么难点在，而且效果实现的也不好。因为是通过UV来做的，所以基本只适合规则模型，因为不规则模型的UV展开也是不规则的，这点可以将模型在blender中打开，通过UV编辑器查看。随手记录一个demo。如何将这些内容集成到打的三维场景中才是关键所在！(PS: 针对不规则模型，有木有好的实现方式，让其看起来就好像是反射的天空上的流光一样？路漫漫！
2025-02-20 16:05:05
325
原创 three.js设置scene的background，导致camera切换layer层后renderer无法同时渲染两个层的模型
three.js和后处理学习过程中遇到的问题。
2025-02-20 11:46:06
314
原创 Three.js+GLSL ES实现扩散波纹(圆环)
shader小白的学习记录。前阵子在项目中需要用到一个扩散的波纹图(也有叫地震波的)，大体效果如图所示：圆环或者说波纹可以随着时间的流动而逐渐向外扩散，扩散到最边边的时候，消失不见。一个大体的实现步骤为：1.准备一个平面，在平面上先把不动的圆环显示出来。2.修改时间信息，让圆环扩散，动起来。下面分步骤说明。
2025-02-17 16:15:40
1080
原创 Three.js结合Shader实现模型渐变成网格
shader小白的学习之路。今天想做一个看起来很酷炫的网格材质渐变，效果就是在Three.js的场景中，会慢慢出现一片网格，然后网格经过的模型也会变成网格材质，等这个网格过去后，又恢复成原本的材质。我的整体思路大概如下：1.先构建出来一个网格材质的立方体，模拟场景网格化；2.将模型的网格化根据模型的geometry构建出来，并加载到场景中；3.保证立方体网格与模型的原点位置相同(或我们想要的方向上位置相同)，这是保障二者同步的关键因素；
2025-02-14 11:23:00
415
原创 Three.js多模型多材质/一个模型多材质实现同步扫光效果
在学习中，参考了很多其他人做的方法，但大部分都是一个模型只有一个材质，好处在于在在写shader代码的时候简单很多。uniforms定义的变量是给shader中进行传值的，分别为扫光的位置以及光带的宽度。其中width的值范围要根据blender中模型的大小来定，由于使用的是局部坐标，因此不用考虑在Three.js中进行的平移缩放。这也算是比较简单的情况，因为在blender中这三个mesh的原点是同一个，因此在写shader代码时，position是同步的，不会产生什么变数。(两个扫光的光柱不重合)
2025-02-13 16:58:33
404
原创 Tween使用requestAnimationFrame的取消不生效问题
根据打印结果可以看出，tween提供的几个on函数都是异步的，并且在onComplete方法调用的cancelAnimationFrame也没有成功取消掉，loop循环还是会继续执行。通过isComplete的判断，让loop循环停止，此时timer就不再增加，自然可以取消掉。所以，为什么没有取消呢？就是因为异步导致timer已经不是最新的了！点击《点击》按钮，相机的位置会移动到图中的原点位置。1.添加一个标志位isComplete。2.添加一个setTimeout。小白学习Tween.js。
2024-11-01 17:04:34
320
原创 TypeScript报错：Type类型不兼容。不能将string类型分配给“primary“ | “danger“ | XXX 类型
分析原因：由于没有给test变量增加任何约束，所以里面的btn在进行类型推断的时候，会根据 "primary"推断成string类型。string类型和自己定义的 Type 类型肯定不兼容，string包含的要多得多。除非自己写代码时对Type的类型都做了严格的处理，否则不建议这种写法。但是经过类型断言后，btn的类型就从string变成了 "primary"，primary类型时Type类型的子集，二者匹配成功。明明primary和和btn的类型是兼容的，但是报错二者不匹配。或者断言成 Type类型。
2024-10-08 14:50:23
568
1
原创 Linux命令ifconfig找不到ip地址
ps：我的自动启动服务，即使启动了，电脑关机重启后，依然还是无法自动启动，包括MySQL数据库的使用等，没找到啥有效的解决方案，不过也不算费事，只要想到了就可以了。具体操作：先按下O（大写）键，在文本末尾进行插入，将ONBOOT选项改成yes，按下esc键，退出编辑。按下 :wq 键进行保存。全部启动后，输入命令ifconfig 就可以查看到Linux的IP地址了。如果以上两步进行完还不行，建议重装虚拟机（乐！同时虚拟机的联网、USB设备等配置，也需要启动这四个服务。
2023-07-26 16:50:15
752
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人