自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

宏斌的博客

hongbin.xyz

  • 博客(592)
  • 资源 (1)
  • 问答 (3)
  • 收藏
  • 关注

原创 Threejs将场景生成全景图导出

创建全景相机CubeCamera(六个方位的透视相机)并渲染场景。即可按照常规的canvas导出图片了。读取六个面的纹理数据。填充进canvas中。

2024-07-07 15:23:02 142

原创 Three.js鼠标拖动设置骨骼姿态

拖拽鼠标设置骨骼旋转角度(使用TransformControl选中点击的骨骼 设置轴为XYZE 并隐藏控件 主动触发控件对应的方法 模拟拖拽控件的过程 )更改TransformControls源码 屏蔽原本行为 生成的Mesh需要使用新的类 这个类继承THREE.Mesh 覆盖其raycast方法 优化射线检测需要更新boundingBox和boundingSphere所需的开销 跳过boundingShere检测过程

2024-06-27 21:49:28 330

原创 three.js各向异性shader实现记录

将RE_Direct_Physical 方法 定义成 RE_Direct 使用。点光源,聚光灯,方向光 这三种 进行每个类型灯光遍历执行大致如下 点光源例。

2024-02-11 09:54:37 470

原创 Three.js蒙皮骨骼变化原理 | 逆推蒙皮网格的世界位置

每次更新更新boneMatrices数据,也就是boneTexture的数据,shader中通过这张纹理获取每个点的变化,然后应用到transformed上,也是因此 点的位置CPU获取不到无法获取box3模型以及射线检测等工作。不过使用本章的代码可以获取当前的世界位置,只不过应该会很卡顿,因为便利了模型的所有点,这也是为什么蒙皮骨骼要在GPU中工作。蒙皮骨骼的变化是在GPU中进行的 , 所以像获取静态物体一样获取geometry.position是不行的。实现效果,右侧为生成的mesh。

2024-02-06 22:05:11 527

原创 Three.js Tri-panner (三面贴图/世界UV贴图) 材质 两种实现方式

Tri-panner 在babylonjs中有支持 但是three.js目前的基础材质并不支持需要自己定义shader 或者使用目前还没有什么完善的文档的 NodeMaterial下面展示两种实现方式/*** @description: 替换三角面贴图 https://doc.babylonjs.com/toolsAndResources/assetLibraries/materialsLibrary/triPlanarMat*/

2024-01-17 14:53:15 808

原创 three.js制作简单的虚影

如图 利用光线折射做一个虚影。

2024-01-15 14:29:14 455

原创 Three.js 镜面反射Reflector 为MeshStandardMaterial增加Reflector能力

根据源码进行修改为 MeshStandardMaterial实现反射。区别:官方的案例更像一个镜子 没有纹理等属性 也没有透明度修改。

2024-01-15 13:30:55 1153

原创 typescript实现一个最简的装饰器依赖注入

返回值类型元数据:使用元数据键 “design:returntype”(用来获取返回值类型)参数类型元数据:使用元数据键 “design:paramtypes”(用来获取参数类型)类型元数据:使用元数据键 “design:type”(用来获取属性类型)这个案例只是验证构造函数自动注入能力 没有使用到。用来获取构造函数的参数类型 去查找注入。因此必须开启ts装饰器和ts元数据。用来实现 多次注入 只创建一个实例。装饰器依赖注入,元数据键是关键。全局入口倒入一次即可。

2024-01-05 14:25:05 494

原创 js “让对象可以遍历”(具有数组的特性)

class想提供类似数组的能力 可以自定义Symbol.iterator

2023-12-06 10:43:08 426

原创 鸿蒙Watch 页面跳转

进入新的html页面 刷新 再退出 再进入入口html刷新就可以了。如果使用预览器没成功 应该是缓存问题 使用工具栏上方的刷新按钮。config.json 回自动注册。

2023-12-04 10:06:31 509

原创 云桌面 node_modules 切换艰辛历程记录 rebuild失败记录

不过好在发现了一个包 dtract-provider rebuild失败 回去install 但是云桌面没有网络权限。另一个 单独 rebuild npm rebuild typemoq。每个依赖单独执行 npm rebuild xxx。如果有 外面自己下载包 当作方法的方式把源码放进去。发现下面还有一个stable的还指向原来版本。依赖太多执行不过来 查看之前的错误信息。执行npm rebuild 重新构建。不成功 换个窗口又变回原来版本号了。报错 node版本不一致。两处 一处刚才的没用的包。

2023-11-20 22:42:34 574

原创 XMLHttpRequest拦截请求和响应

将对原本的请求转移到另一个将监听返回事件挂载到另一个世纪发送请求的xml上**使用get set 将客户端获取的responseText和response按照自己的意愿返回实现响应拦截

2023-10-27 10:24:56 1647

原创 WebGPU-初识各名词概念Adapters与Device

对于 descriptor.requiredLimits 中的每个 (key, value) 对,设置 key对应的成员 在 device.[[limits]] 到 value 的 better 值 或 supported limits 中的默认值。每当用户代理需要撤销对设备的访问权限时,它都会在设备的 device timeline 上调用 lose the device(device, “unknown”),可能会提前 当前在该时间线上排队的其他操作。可用于在此适配器上创建设备的 best 限制。

2023-10-19 14:06:50 245

原创 Three.js图案溶解shader

上面一排是根据现实的图案红色通道也就是r值进行溶解。可以通过简单更改呈现多种溶解图案。下面一排提供额外的溶解纹理。上图提供两种方式溶解显示。

2023-10-17 17:09:41 290

原创 Three.js柏林噪音 流动球体

代码:https://gitee.com/honbingitee/three-template-next.js/tree/shader/参考油管视频:https://www.youtube.com/watch?

2023-10-17 14:23:35 285

原创 Angular NG05105: Unexpected synthetic listener @dialogContainer.start found. Please make sure that:

使用Dialog组件出现动画相关报错。

2023-10-13 15:12:46 437

原创 MongooseServerSelectionError: connect ECONNREFUSED ::1:27017

而 Mongoose 将无法连接,除非 mongodb 实例在启用了 ipv6 的情况下运行。这意味着,在许多计算机上,Node.js 将解析localhost为 IPv6 地址::1,因为 Node.js 18 及更高版本更喜欢 IPv6 地址,本地使用127.0.0.1而不是localhost。文档首页便表明了此处但我依旧犯了😓。可以看到后面的确实是。

2023-10-13 08:55:23 268

原创 three分裂格子shader可模拟骨骼动画粒子

Three.js-shader有趣的动画效果、模拟粒子骨骼动画。

2023-10-06 08:09:43 148

原创 uniapp: err = err.replace(this._UNI_INPUT_DIR_REG, ‘UNI_TypeError: err.replace is not a function

不用pnpm安装依赖 使用yarn。删除node_modules。破玩意 莫名其妙报错。

2023-09-28 11:13:17 163

原创 js动态拼接正则表达式

两侧不加`\``\`使用双斜杠`\\`

2023-09-27 17:15:24 207

原创 ts装饰器保存this指向

要使用 function 而不是 箭头函数。

2023-09-24 09:34:03 174

原创 vscode插件开发 悬浮,ctrl点击 自动补全提示

【代码】vscode插件开发 悬浮,ctrl点击 自动补全提示。

2023-09-18 20:00:52 569

原创 Three.js-矩形块shader

多种配置 绘制炫酷的矩形块

2023-09-12 11:26:48 202

原创 Three.js-绘制矩形shader

封装自定义shader。绘制图中的嵌套矩形框。

2023-09-12 11:13:20 421

原创 Three.js后处理后物体表面出现条纹

初始化 WebGLRenderer 时简单启用 logarithmicDepthBuffer: true 解决了问题。后处理对于深度精度非常敏感。大视锥体很快就会使此类 AO 通道变得无法使用。根据文档,启用可能会导致性能下降,因此请根据您的性能预算考虑使用它。缩小相机的near和far。

2023-08-31 22:08:24 356

原创 解决Three.js辉光背景不透明

使用此pass canvas元素的background都能看到 不过相应的辉光颜色和背景颜色不相容的地方看起来颜色会怪一些。不过如果是纯色就没什么问题了。

2023-08-29 18:27:24 402

原创 ts使用装饰器 !!要注意⚠️

书写前就应当设计好函数和装饰器的分功,这并非是使用装饰器的代价,而是要求我们以一种更好的设计模式来书写代码,从这点考虑使用装饰器是有更深远的收益的。而非一个封装函数能替代的

2023-08-27 23:58:45 213

原创 IDEA多行注释和mac快捷键冲突

关闭: 设置 键盘 快捷键 app快捷键 显示帮助菜单

2023-08-17 12:53:25 235

原创 Next.js使用装饰器decorator 解决[作为表达式调用时,无法解析类修饰器的签名。]

Next.js 会自动检测 `jsconfig.json `或 `tsconfig.json` 中的`experimentalDecorators`。

2023-08-06 16:59:45 1761

原创 Three.js加载drc文件

使用`FileLoader`和`DracoLoader`加载

2023-08-05 14:39:17 560

原创 THREE.JS镜头随鼠标晃动效果

在three中y轴 上面是1下面是-1 而我们窗口上面是-1 下面是1 所以取y轴剩余的高度让两者行为统一,也就是实现向着鼠标方向。那么当前鼠标所在相机的位置,应当是原始位置加上鼠标移动的增量。如此 我们获取了鼠标移动的增量,将这一向量加在camera的x和y轴即可,这里不能使用。接下来可以扩充一下功能, 加入鼠标按下时可以拖拽旋转,鼠标松开后回到原来的位置。首先要监听鼠标移动,并且将移动的值转换到 -1 和 1 之间 方便处理。ok 上述代码将支持轨道控制器 旋转回来能力。

2023-07-09 21:42:35 2150

原创 three.js&gsap滚动交互网页实现 2-创建文字并添加离开动画

在线条的入场动画完成后将其加入,以免两次设置z轴在进入页面时滚动条有高度的情况下z轴位置冲突。这样下滑一个屏幕高度聚光灯的角度会增加到0.7 ,并且上滑会降到0.3。使用scrollTrigger的onUpdate回调函数设置值。设置线条group的z轴到170 超出屏幕 不可见。让聚光灯的角度随着下滑增大,展示完整的场景。最后将这个group向左移动到适当的位置。将创建的两组文字opacity设置为0。接下来设置文字和背景线条的动画。在聚光灯扩大角度是时候显示文本。文字的创建可参考之前的博客。

2023-07-08 21:41:17 411

原创 three.js&gsap滚动交互网页实现 1-模糊背景线条

要实现圆形排列一周可以自己计算sin和cos实现,更简单的可以使用vector3的。将其添加到相机 然后将相机添加到scene中,这样相机更灵活随着视角移动。设置光影衰减属性默认为0不衰减 取值范围0-1 将其设置为1。模型只有其中的一根线条 加载完模型后 将其圆形排列一周。并在循环中使用clone方法创建实例 然后设置点的位置。该方法计算返回圆柱上的点,圆柱上的点由参数决定。调整缩放和一点点位置的偏移让其产生错乱的感觉。因为模型是横着的 所有将其旋转90度。设置聚光灯的角度,将其照射范围缩小。

2023-07-07 21:17:24 398

原创 three.js数据生成模型代码片段

使用ConvexGeometry填充。

2023-07-04 19:41:20 165

转载 gsap鼠标跟随不断修改终点值使用 gsap.quickTo()

如果您发现自己gsap.to()多次调用同一目标的同一数字属性,例如在“mousemove”事件中,您可以通过创建 quickTo() 函数来提高性能。可选地定义一个开始值默认情况下,它将从当前进度中tween内部的CURRENT值开始(它实际上不会检查当前值的目标……这里的想法是最大限度地提高性能)。由于它接受单个值,因此您可以在 a 的末尾添加一个 quickTo pipe(),在其他实用函数之后对您输入的数字执行有用的操作,例如夹紧或捕捉或以某种方式清理值。它返回(重用的)Tween 实例。

2023-06-19 22:03:01 235

原创 Three.js学习项目--3D抗美援朝数据可视化

【代码】Three.js学习项目--3D抗美援朝数据可视化。

2023-06-17 21:05:10 1645 1

原创 three.js 置换贴图 alpha贴图 的妙用 - 3D文字不引入字体文件

将文字绘制到canvascanvas生成置换贴图 alpha贴图将canvas转换成texture将texture贴到material修改shader将黑色背景区域去掉

2023-06-10 09:11:36 182 1

原创 Three.js纹理绘制-在模型上绘画,汽车喷绘,定制商品

threejs-汽车喷绘、自定义商品实现-纹理绘制演示视频。使用canvas替换material 按需更新方式。canvas重复在一个点绘制 颜色加深 颜色控制。canvas操作 - 绘画 画图 获取像素颜色。blender uv编辑 创建合适的uv。自定义置换贴图 为顶点添加高度。

2023-05-23 15:47:57 181

原创 three.js扫光-后期处理

获取世界位置核心代码。

2023-05-03 08:43:43 443 4

原创 shadertoy各个uniform对应three.js值

【代码】shadertoy各个uniform对应three.js值。

2023-04-21 13:57:56 360 1

draco 文件 three.js 解析glb所用

draco 文件 three.js 解析glb所用

2022-01-20

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

TA关注的人

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