自定义博客皮肤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

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

原创 three.js太阳火焰shader

threejs 代码。

2022-11-17 11:47:30 56

原创 粒子效果应用自定义着色器更灵活实现PointsMaterial材质

【代码】粒子效果应用自定义着色器更灵活实现PointsMaterial材质。

2022-11-10 00:20:10 10

原创 python播放视频使用opencv-python

【代码】python播放视频使用opencv-python。

2022-11-05 21:43:52 419 1

原创 Nextjs优雅连接数据库

多文件引用只会连接一次。

2022-11-03 16:09:33 85

原创 Nextjs使用socket.io创建连接

此情况只会在项目不部署后第一位访问的用户的客户端出现之后的用户访问socket已经创建完毕,想要避免可以在请求之前手动触发服务,例如发送一个请求。因为是服务端被动的创建socket连接所以第一次socket连接会失败这时服务端会创建socket连接,客户端经过短暂时间后下次轮询就会连接成功。如果使用typescript使用新的类型将socket添加。之后就不会在socket连接中失败(正常能够连接的情况下)在请求时创建socket连接。

2022-11-02 17:53:52 33

原创 浏览器控制台花式打印 typescript全局注入

typescript 控制台花式打印。

2022-10-30 18:11:25 35

原创 three.js 聚光灯阴影

three.js 阴影效果相关介绍

2022-10-28 21:26:29 1344

原创 Three.js获取物体交并集创建新的几何图形

使用OctreeCSG进行THREE.js的几何体交并集运算生成新的几何体

2022-10-21 18:20:53 67

原创 typescript全局注入THREE

定义 global.d.ts 将THREE注入global。

2022-10-21 10:35:36 103

原创 ts全局变量定义

全局定义可以获得全局ts支持

2022-10-21 09:16:51 206

原创 vue-cli todolist

【代码】vue-cli todolist。

2022-10-20 15:49:20 120

原创 three.js 图层显示控制 layers

默认物体的layer为0 并且只渲染layer为0的涂图层通过设置图层可以控制元素渲染

2022-10-20 13:32:29 46

原创 分析three.js OutlinePass 实现模式

浅析 OutlinePass的工作原理

2022-10-18 16:53:58 236

原创 webgl着色器学习 - 凹凸纹理 根据纹理颜色 决定高度

原理 悬赏令的字图颜色大致相同 将满足这种颜色的像素z轴位置移动 形成凸起部分 产生立体效果。如图 将一张娜美的悬赏令上的文字凸显出来。

2022-10-10 16:42:31 32

原创 webgl着色器学习 - 使用纹理

【代码】webgl着色器学习 - 使用纹理。

2022-10-10 10:43:44 13

原创 webgl着色器学习 -出乎意外的形状

在向一个目标前进时莫名其妙出现了其他有意思的形状记录于此。

2022-10-05 10:47:02 19

原创 webgl着色器学习 - 使用矩阵旋转图形

【代码】webgl着色器学习 - 使用矩阵旋转图形。

2022-10-04 21:01:36 11

原创 webgl着色器学习 - 多个镂空矩形

使用 fract函数获取小数部分 使0-1的uv有多次0-1 来实现多个矩形。确定矩形中心 大小 边框 范围。

2022-10-04 10:54:58 23

原创 webgl着色器学习 - 随机数

【代码】webgl着色器学习 - 随机数。

2022-10-04 10:38:04 31

原创 webgl着色器学习 - 绘制多个不同颜色圆形并且不断变换颜色位置

在three.js中每帧更新时间参数。uniform传递 fargmentShader 应用数据

2022-10-02 16:01:42 110

原创 webgl着色器学习 - 绘制圆形

使用length函数求两点的距离 如果这个距离小于你定义的圆形半径就绘制一个颜色 (可以可用勾股定理求两点直线距离)step函数两个参数 如果后面的比前面的小则返回0.0 否则返回1.0 一次来作为条件判断。如图 在矩形的每个面上绘制一个圆。片元着色器 可以这样写。

2022-10-02 09:42:26 90

原创 webgl着色器学习 - webpack 打包glsl文件

使用 webpack将文件转换成字符串 传递到 ShaderMaterial中。写着色器没有语法提示 在.glsl文件中可获得语法支持。

2022-10-01 20:03:07 245

原创 wengl着色器学习 - 颜色渐变着色器

使用 requestAnimationFrame 更改 uniform 改变着色器颜色

2022-10-01 09:35:08 68

原创 webgl着色器学习 -顶点着色器修改物体形状

一个矩形盒子通过修改顶点着色器可以产生如上图的不同形状。

2022-10-01 09:07:26 28

原创 wbegl着色器学习 - 矩形盒子两端渐变(矩形不同面特殊处理)

以正负几何体高度的一半为条件 修改传递到片元着色器中的变量 产生不同于一致渲染的颜色着色。普通着色器每一个面都相同导致两端颜色不能顺利延伸 如同。要两边颜色铺满 要对两端的点单独处理。

2022-09-30 12:03:56 18

原创 webgl着色器学习 - 渐变颜色(varying 在顶点着色器和片元着色器之间传递信息)

【代码】webgl着色器学习 - 渐变颜色(varying 在顶点着色器和片元着色器之间传递信息)

2022-09-29 23:30:00 18

原创 webgl着色器学习-fragmentShader使用three.js传入变量 (uniform使用)

uniforms与片元着色器交互 以u_开头 值必须具有value属性的一个对象。在fragmentShader中使用。使用uniform传递。

2022-09-29 16:55:21 12

原创 webgl着色器初学习-顶点着色器和片元着色器

我理解为这两个着色器,顶点着色器决定渲染位置 ,片元着色器决定颜色。供three使用 我们对其的修改就会作用在模型上。编写一个简单的着色器 暂不指定片元着色器 发现。不过最大值为1 1即是十六进制的255。每一个像素点都将执行这两个着色器。函数 如果不写main就会报错。函数内容为空 同样不会显示模型。顶点着色器需要一个内置变量。片元着色器需要 内置变量。四个参数对应rgba。

2022-09-29 13:23:01 53

原创 three.js blender导出模型开启平滑着色

blender导出文件时导出向量

2022-09-26 14:52:51 55

原创 JS THREE.js间隔执行函数

有的场景不需要逐帧渲染 可以定义一个可调节的函数触发器。

2022-09-22 15:01:33 19

原创 chrome v8引擎数组和对象的实现源码

阅读v8源码查看js是怎样被解析的

2022-09-19 12:22:56 56

原创 react全局消息弹出框组件

任何位置调用方法 弹出消息条 可传入组件或字符串 和显示时长。

2022-09-16 21:03:25 245

原创 NEXT.js环境变量使用

需要注意的是 next环境变量分为服务端和客户端。服务端使用的环境变量 名字随意 只要不是。客户端使用的环境变量 名字需要以。

2022-09-16 19:50:03 49

原创 vue 书店管理系统

适用大学前端专科课 的 vue2 书店管理系统。

2022-09-15 17:33:31 112

原创 在NEXT.js 中使用dat.gui

next在服务器中运行因此无法使用。因此需要在客户端做一个初始化工作。向window对象添加类型定义。

2022-09-12 08:57:18 13

原创 bootstrap网上书店

【代码】bootstrap网上书店。

2022-09-10 12:57:30 74

原创 在next.js中使用styled-component的几种方案

参考styled-components文档的实现方式和官方案例

2022-09-08 13:32:47 89

原创 web全栈框架next.js 更快一步加载字体

通过修改默认的文档结构 插入字体加载的样式 比起引入css文件要更快一步。

2022-09-08 12:55:43 88

原创 web全栈框架next.js 使用api功能发送文件及多级路由 & useSwr

在next中使用three.js 解析模型时 loader需要传入模型地址 但是next导入的模型文件直>接解析了 遂尝试 next的服务端功能 返回项目文件。

2022-09-05 20:50:52 81

原创 eslint 覆盖插件的某项规则

Invalid property 'fill' found on tag 'path', but it is only allowed on: svgeslintreact/no-unknown-property`react/no-unknown-property` 检测svg 的fill属性 但那时我需要的 使用 规则设置检查模式

2022-09-05 17:44:01 17

draco 文件 three.js 解析glb所用

draco 文件 three.js 解析glb所用

2022-01-20

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

TA关注的人

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