- 博客(50)
- 收藏
- 关注
RSS订阅原创 【Threejs】添加鼠标事件到场景中的物体上，更完善的事件派发器
使用camera scene 和dom创建后，在模型上添加事件，也可以直接给事件派发器添加事件,其中transController是变换控制器，用于移动旋转拉伸物体，是threejs自带工具。上一个派发器逻辑混乱书写潦草，所以我重新写了一个。
2025-01-17 15:26:38
307
原创 【threejs】创建FPS相机
这里我用js代码演示，绑定的任然是flyControl// animateif () {// startstart() {loop()end() {// private1 : 0;break;break;break;break;break;break;break;break;
2024-12-09 17:52:30
626
原创 【Webgl_glsl&Threejs】制作流水效果/毛玻璃效果材质
不一定用这张，可以换点贴图试试，可能做出别的效果（走马灯，石棉，瓷砖等的都可以模拟）
2024-11-27 10:38:51
508
原创 【Threejs】CatmullRomCurve3 生成折线和曲线
CatmullRomCurve3 是 Three.js 中的一个类，用于创建基于 Catmull-Rom 插值的曲线。这个类允许你通过一组点来创建一条平滑的曲线。curveType 和 tension 是用来控制曲线形状的参数。curveType 是一个字符串，用于指定 Catmull-Rom 曲线的类型。它有以下三个可能的值：这种类型的曲线在计算插值时会考虑到点的分布，倾向于生成更平滑的曲线。曲线的弧度会较小，生成的效果更平滑。
2024-11-25 14:38:33
366
原创 【threejs】创建及管理场景内的后期处理效果（以bloom为例，开箱即用）
创建后期处理通道的类后期类内部的辉光通道类效果我在花朵和瓶子上分别用了1 和2 辉光效果,下图是无光效果对比
2024-11-08 14:20:54
248
原创 【Threejs】相机控制器动画
官方提供了一个基于目标点、刷新速度，在每次renderer中执行的动画，但实际开发中你可能会需要基于设定时间、目标点添加动画，并且有更多自定义成分的方式。
2024-11-08 11:30:07
447
原创 【Javascript】原生实现deep watch，使用proxy逐层建立数据监听
使用对象处理数据，添加监听，然后递归再次添加直到全部添加完毕。
2024-09-24 16:50:51
451
1
原创 【Threejs】场景编辑功能及内外侧通信
threejs官方提供了一个较为完善的threejs场景编辑的demo，并且支持导出导入，前进后退，场景缓存等功能，所以我们需要做的只有把他引入自己的页面。但是同时业务中可能涉及一些特殊的功能或者一些可配置的内容，我们需要在官方editor的沙盒中完成这些操作。所以最终方案就是通过iframe引入editor编辑器，然后通过contentMessage传送消息给沙盒，同时也可以反向监听沙盒里面的instance。
2024-05-14 11:33:48
570
2
原创 【Webgl_glsl&Threejs】搬运分享shader_飘落心形
将shadertory上的代码转成了threejs可以直接用的代码，引入文件的material，并在创建mesh或已有物体上使用material即可，使用时请注意uv对齐。
2024-04-24 15:08:33
816
原创 【JavaScript&&threejs】对于二维平面内的路径进行扩张或缩放
对指定路径沿着边缘向内或向外扩张，达到放大或缩小一定范围的效果，这里我们获取每个点（这里是Vector3(x,y,z)）,获取前后两个点和当前点的坐标，计算前后两点的向量，旋转90度向内或向外，然后获取单位向量。
2024-04-23 15:57:04
324
2
原创 【JavaScript&&Threejs】判断路径在二维平面上投影的方向顺逆时针
可以将路径每个连续的两点向量叉乘相加，根据正负性判断路径顺逆时针性当我们计算两个向量的叉积时，结果是一个新的向量，其方向垂直于这两个向量所在的平面，并且其大小与这两个向量构成的平行四边形的面积成正比。这个新向量的方向由右手定则确定：如果你将右手的四指放在两个向量的方向上，让拇指指向叉积的方向，那么你的手指弯曲的方向就是两个向量的顺时针旋转方向。当我们应用这个概念到路径的情况时，我们可以将相邻的路径点表示为向量，然后计算它们之间的叉积。
2024-04-22 16:24:21
544
1
原创 【threejs】较大物体或shape的贴图较小问题处理方法
有的场景内相对体型差距过大的物体（如山地 海洋等····）由于尺寸问题，加载贴图过于小，同时shader也无法完全展示，如图。如果uv是乱的 可以用xyz坐标最大最小值先排布uv再对uv进行缩放。我们可以获取物体的uv，进行缩放使得贴图可以完全展开。
2024-03-29 09:30:43
643
原创 【threejs】二维坐标内判断 点 与 凹凸多边形 位置关系
从点向 ± xy方向发射四条射线，从相交次数判断点与多边形关系，理论上只要有一条射线相交奇数次（n%2==1）即可判定点在多边形内，此方法可避免凹凸多边形造成的判断错误。
2024-03-26 19:24:35
293
原创 【threejs】事件处理eventDispatch（点击，滑动等）
构建一个class，传入dom scene和camera等必要参数即可新建，使用射线判断物体是否触发事件，一个场景可以建立多个事件处理。
2024-03-21 11:24:33
538
原创 【threejs】使用矩阵创建曲面
假设有一组离散的点，需要生成曲面，选择其中的主要轮廓，用相同段数的（顶点数相同）的几条线画出来后，组成一个3*3矩阵。threejs自带的曲面生成api，版本需要更新到2024年之后的版本，老版可以去github拷贝引入文件到项目中。矩阵需要是规整的，不能长短不一（可以通过线性插值补充不足的点），形成一个类似网格的数据就行了，然后使用下面的方法。
2024-03-20 14:30:02
642
8
原创 【threejs】使用任意矩阵创建曲面
可以使用本方法创建平面，基本原理就是创建buffergeometry并通过index分配网格 同时修正uv让整个曲面可以展示贴图。使用一个三维矩阵描述一个不规则的面时（类似geojson的多边形，模型单个面网格），
2024-03-20 14:12:21
550
原创 【threejs】修正 threejs 后期效果合成EffectComposer 导致场景变暗淡修正
3 smaaPass解决后期render无法开启抗锯齿的问题 （还有一种fxaa修正 效果依实际情况选择）2 GammaCorrectionShader修正明暗色域。1 ShaderPass修正scene异常。
2024-03-20 14:03:22
714
9
原创 【weblg threejs shader】4.关于函数的补充--引入自定义变量
这里我再次说明一下，threejs创建ShaderMaterial的时候可以创建一个uniforms的对象存储我们更新glsl视图的参数，比如这里的uFormula，他的意思就是公式。我们可以将片源着色器改成一个箭头函数返回glsl字符串，并且在上述位置获取window上的uFormula变量（前提你取消了注释）。// 片元着色器代码 const getFragment =() => {// 扩大坐标系 现在整个uv的 xy在0-10之间来变化来st*=10.;······y=x;
2024-02-08 18:02:12
438
原创 【weblg threejs shader】2.色彩与线条还有简单的参数
glsl语言通常由通道组成，每一个色彩通道由r,g,b,a颜色和透明度通道组成，取值范围1到0，而着色位置由x,y和z三个坐标组成，这个取值比较随意。由于空间表示过于抽象，我先介绍色彩通道，然后再介绍空间坐标。首先请看上篇文章的色彩部分${${此时每个通道的颜色都是固定的颜色,我们并没有拿到什么特殊的参数去改变它的颜色，所以他的颜色就是他本来的样子：我们来尝试输入一些参数，让色彩变化起来 ，比如随着画布位置的改变调整它的颜色。
2024-02-08 15:58:55
994
原创 【weblg threejs shader】1.初始化
着色器通常由两个部分组成：顶点着色器和片元（或像素）着色器。顶点着色器处理每个图形顶点的位置和属性，而片元着色器处理每个像素的颜色和其他特性。顶点着色器通过对输入顶点进行变换和计算，将其转换为屏幕上的2D坐标，同时可以计算每个顶点的属性，如颜色和纹理坐标等。片元着色器负责计算每个像素的最终颜色，可以通过对纹理采样、光照计算和其他技术进行复杂的计算。通过编写自定义的着色器代码，您可以实现各种各样的效果，如纹理映射、光照、阴影、透明度和变形等。
2024-02-05 14:39:00
427
1
原创 修复threejs中带有透明度的贴图显示错误等问题
在threejs中 ，透明贴图可能会因为多次渲染造成色差或透视，如图带有透明贴图的Sprite所示。
2024-01-23 16:34:40
820
1
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人