- 博客(590)
- 资源 (1)
- 问答 (4)
- 收藏
- 关注
RSS订阅原创 three.js各向异性shader实现记录
将RE_Direct_Physical 方法 定义成 RE_Direct 使用。点光源，聚光灯，方向光 这三种 进行每个类型灯光遍历执行大致如下 点光源例。
2024-02-11 09:54:37
414
原创 Three.js蒙皮骨骼变化原理 | 逆推蒙皮网格的世界位置
每次更新更新boneMatrices数据，也就是boneTexture的数据，shader中通过这张纹理获取每个点的变化，然后应用到transformed上，也是因此 点的位置CPU获取不到无法获取box3模型以及射线检测等工作。不过使用本章的代码可以获取当前的世界位置，只不过应该会很卡顿，因为便利了模型的所有点，这也是为什么蒙皮骨骼要在GPU中工作。蒙皮骨骼的变化是在GPU中进行的 ， 所以像获取静态物体一样获取geometry.position是不行的。实现效果，右侧为生成的mesh。
2024-02-06 22:05:11
454
原创 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
692
原创 Three.js 镜面反射Reflector 为MeshStandardMaterial增加Reflector能力
根据源码进行修改为 MeshStandardMaterial实现反射。区别：官方的案例更像一个镜子 没有纹理等属性 也没有透明度修改。
2024-01-15 13:30:55
745
原创 typescript实现一个最简的装饰器依赖注入
返回值类型元数据：使用元数据键 “design:returntype”（用来获取返回值类型）参数类型元数据：使用元数据键 “design:paramtypes”（用来获取参数类型）类型元数据：使用元数据键 “design:type”（用来获取属性类型）这个案例只是验证构造函数自动注入能力 没有使用到。用来获取构造函数的参数类型 去查找注入。因此必须开启ts装饰器和ts元数据。用来实现 多次注入 只创建一个实例。装饰器依赖注入，元数据键是关键。全局入口倒入一次即可。
2024-01-05 14:25:05
391
原创 鸿蒙Watch 页面跳转
进入新的html页面 刷新 再退出 再进入入口html刷新就可以了。如果使用预览器没成功 应该是缓存问题 使用工具栏上方的刷新按钮。config.json 回自动注册。
2023-12-04 10:06:31
487
原创 云桌面 node_modules 切换艰辛历程记录 rebuild失败记录
不过好在发现了一个包 dtract-provider rebuild失败 回去install 但是云桌面没有网络权限。另一个 单独 rebuild npm rebuild typemoq。每个依赖单独执行 npm rebuild xxx。如果有 外面自己下载包 当作方法的方式把源码放进去。发现下面还有一个stable的还指向原来版本。依赖太多执行不过来 查看之前的错误信息。执行npm rebuild 重新构建。不成功 换个窗口又变回原来版本号了。报错 node版本不一致。两处 一处刚才的没用的包。
2023-11-20 22:42:34
547
原创 XMLHttpRequest拦截请求和响应
将对原本的请求转移到另一个将监听返回事件挂载到另一个世纪发送请求的xml上**使用get set 将客户端获取的responseText和response按照自己的意愿返回实现响应拦截
2023-10-27 10:24:56
1347
原创 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
228
原创 Three.js图案溶解shader
上面一排是根据现实的图案红色通道也就是r值进行溶解。可以通过简单更改呈现多种溶解图案。下面一排提供额外的溶解纹理。上图提供两种方式溶解显示。
2023-10-17 17:09:41
246
原创 Three.js柏林噪音 流动球体
代码：https://gitee.com/honbingitee/three-template-next.js/tree/shader/参考油管视频：https://www.youtube.com/watch?
2023-10-17 14:23:35
228
原创 Angular NG05105: Unexpected synthetic listener @dialogContainer.start found. Please make sure that:
使用Dialog组件出现动画相关报错。
2023-10-13 15:12:46
298
原创 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
205
原创 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
120
原创 Three.js后处理后物体表面出现条纹
初始化 WebGLRenderer 时简单启用 logarithmicDepthBuffer: true 解决了问题。后处理对于深度精度非常敏感。大视锥体很快就会使此类 AO 通道变得无法使用。根据文档，启用可能会导致性能下降，因此请根据您的性能预算考虑使用它。缩小相机的near和far。
2023-08-31 22:08:24
281
原创 解决Three.js辉光背景不透明
使用此pass canvas元素的background都能看到 不过相应的辉光颜色和背景颜色不相容的地方看起来颜色会怪一些。不过如果是纯色就没什么问题了。
2023-08-29 18:27:24
300
原创 ts使用装饰器 !!要注意⚠️
书写前就应当设计好函数和装饰器的分功，这并非是使用装饰器的代价，而是要求我们以一种更好的设计模式来书写代码，从这点考虑使用装饰器是有更深远的收益的。而非一个封装函数能替代的
2023-08-27 23:58:45
173
原创 Next.js使用装饰器decorator 解决[作为表达式调用时,无法解析类修饰器的签名。]
Next.js 会自动检测 `jsconfig.json `或 `tsconfig.json` 中的`experimentalDecorators`。
2023-08-06 16:59:45
1391
原创 THREE.JS镜头随鼠标晃动效果
在three中y轴 上面是1下面是-1 而我们窗口上面是-1 下面是1 所以取y轴剩余的高度让两者行为统一，也就是实现向着鼠标方向。那么当前鼠标所在相机的位置，应当是原始位置加上鼠标移动的增量。如此 我们获取了鼠标移动的增量，将这一向量加在camera的x和y轴即可，这里不能使用。接下来可以扩充一下功能， 加入鼠标按下时可以拖拽旋转，鼠标松开后回到原来的位置。首先要监听鼠标移动，并且将移动的值转换到 -1 和 1 之间 方便处理。ok 上述代码将支持轨道控制器 旋转回来能力。
2023-07-09 21:42:35
2049
原创 three.js&gsap滚动交互网页实现 2-创建文字并添加离开动画
在线条的入场动画完成后将其加入，以免两次设置z轴在进入页面时滚动条有高度的情况下z轴位置冲突。这样下滑一个屏幕高度聚光灯的角度会增加到0.7 ，并且上滑会降到0.3。使用scrollTrigger的onUpdate回调函数设置值。设置线条group的z轴到170 超出屏幕 不可见。让聚光灯的角度随着下滑增大，展示完整的场景。最后将这个group向左移动到适当的位置。将创建的两组文字opacity设置为0。接下来设置文字和背景线条的动画。在聚光灯扩大角度是时候显示文本。文字的创建可参考之前的博客。
2023-07-08 21:41:17
338
原创 three.js&gsap滚动交互网页实现 1-模糊背景线条
要实现圆形排列一周可以自己计算sin和cos实现，更简单的可以使用vector3的。将其添加到相机 然后将相机添加到scene中，这样相机更灵活随着视角移动。设置光影衰减属性默认为0不衰减 取值范围0-1 将其设置为1。模型只有其中的一根线条 加载完模型后 将其圆形排列一周。并在循环中使用clone方法创建实例 然后设置点的位置。该方法计算返回圆柱上的点，圆柱上的点由参数决定。调整缩放和一点点位置的偏移让其产生错乱的感觉。因为模型是横着的 所有将其旋转90度。设置聚光灯的角度，将其照射范围缩小。
2023-07-07 21:17:24
366
转载 gsap鼠标跟随不断修改终点值使用 gsap.quickTo()
如果您发现自己gsap.to()多次调用同一目标的同一数字属性，例如在“mousemove”事件中，您可以通过创建 quickTo() 函数来提高性能。可选地定义一个开始值默认情况下，它将从当前进度中tween内部的CURRENT值开始（它实际上不会检查当前值的目标……这里的想法是最大限度地提高性能）。由于它接受单个值，因此您可以在 a 的末尾添加一个 quickTo pipe()，在其他实用函数之后对您输入的数字执行有用的操作，例如夹紧或捕捉或以某种方式清理值。它返回（重用的）Tween 实例。
2023-06-19 22:03:01
190
原创 three.js 置换贴图 alpha贴图 的妙用 - 3D文字不引入字体文件
将文字绘制到canvascanvas生成置换贴图 alpha贴图将canvas转换成texture将texture贴到material修改shader将黑色背景区域去掉
2023-06-10 09:11:36
149
1
原创 Three.js纹理绘制-在模型上绘画，汽车喷绘，定制商品
threejs-汽车喷绘、自定义商品实现-纹理绘制演示视频。使用canvas替换material 按需更新方式。canvas重复在一个点绘制 颜色加深 颜色控制。canvas操作 - 绘画 画图 获取像素颜色。blender uv编辑 创建合适的uv。自定义置换贴图 为顶点添加高度。
2023-05-23 15:47:57
156
原创 three.js shadertoy使用手册 -使用带buffer shader
three.js渲染对象WebGLRenderTarget使用-为使用带buffer的shadertoy做铺垫。然后处理好buffer之间的调用关系传递对应的channnel并更新其他需要的uniform。每个buffer创建一个单独的scene渲染他并将结果保存在readBuffer上。three.js炫酷网站背景/使用带buffer的shadertoy。main着色器的readBuffer就是最终渲染的结果。需要我们渲染这段着色器代码 将结果保存在。上供其他buffer使用。
2023-04-21 13:17:58
450
原创 three.js shadertoy使用手册 - 使用音频Channel和图片Channel/将音频传入glsl shader
shadertoy音频channel使用 - three.js将音频数据传入shader。音频 需要解析音频数据生成DataTexture 传入shader。图片只需传递Textureloader解析的纹理即可。可使用的shader代码。
2023-04-21 13:05:31
337
javascript创建一个数组和创建一个对象哪个开销大
2022-09-17
mongodb如何在获取值的同时获取对应的类型
2021-11-16
博客文章的评论功能 数据库里应该怎么存
2021-09-02
html css怎么实现这种弧度效果
2021-08-19
TA创建的收藏夹 TA关注的收藏夹
TA关注的人