鸢_-CSDN博客

原创【Webgl_glsl&Threejs】搬运分享shader_飘落心形

将shadertory上的代码转成了threejs可以直接用的代码，引入文件的material，并在创建mesh或已有物体上使用material即可，使用时请注意uv对齐。

2024-04-24 15:08:33 276

原创【Webgl_glsl&Threejs】搬运分享shader

这是一个基于圆弧缩放和分型的shader材质，可以作为墙体，天幕等特效使用。

2024-04-24 11:12:40 198

原创【JavaScript&&threejs】对于二维平面内的路径进行扩张或缩放

对指定路径沿着边缘向内或向外扩张，达到放大或缩小一定范围的效果，这里我们获取每个点（这里是Vector3(x,y,z)）,获取前后两个点和当前点的坐标，计算前后两点的向量，旋转90度向内或向外，然后获取单位向量。

2024-04-23 15:57:04 153 2

原创【JavaScript&&Threejs】判断路径在二维平面上投影的方向顺逆时针

可以将路径每个连续的两点向量叉乘相加，根据正负性判断路径顺逆时针性当我们计算两个向量的叉积时，结果是一个新的向量，其方向垂直于这两个向量所在的平面，并且其大小与这两个向量构成的平行四边形的面积成正比。这个新向量的方向由右手定则确定：如果你将右手的四指放在两个向量的方向上，让拇指指向叉积的方向，那么你的手指弯曲的方向就是两个向量的顺时针旋转方向。当我们应用这个概念到路径的情况时，我们可以将相邻的路径点表示为向量，然后计算它们之间的叉积。

2024-04-22 16:24:21 299 1

原创【threejs&&Javascript】实现事件注册派送

在初始化threejs场景的 class内使用。以事件管理器和点击事件为例。

2024-04-01 10:19:30 259

原创【webgpu】0 Javascript中使用wgsl代码高亮

wgsl本质上是rust代码，本博客文本高光来自rust标记。

2024-03-29 14:11:34 105

原创【threejs】较大物体或shape的贴图较小问题处理方法

有的场景内相对体型差距过大的物体（如山地海洋等····）由于尺寸问题，加载贴图过于小，同时shader也无法完全展示，如图。如果uv是乱的可以用xyz坐标最大最小值先排布uv再对uv进行缩放。我们可以获取物体的uv，进行缩放使得贴图可以完全展开。

2024-03-29 09:30:43 347

原创【javaScript】遍历树形结构

【代码】【javaScript】遍历树形结构。

2024-03-28 08:58:09 104

原创【threejs】计算矩阵、网格等总面积

将面分为无数个三角面，使用向量计算面积。

2024-03-26 19:29:17 190

原创【threejs】二维坐标内判断点与凹凸多边形位置关系

从点向 ± xy方向发射四条射线，从相交次数判断点与多边形关系，理论上只要有一条射线相交奇数次（n%2==1）即可判定点在多边形内，此方法可避免凹凸多边形造成的判断错误。

2024-03-26 19:24:35 145

原创【threejs】事件处理eventDispatch（点击，滑动等）

构建一个class，传入dom scene和camera等必要参数即可新建，使用射线判断物体是否触发事件，一个场景可以建立多个事件处理。

2024-03-21 11:24:33 159

原创【threejs】使用矩阵创建曲面

假设有一组离散的点，需要生成曲面，选择其中的主要轮廓，用相同段数的（顶点数相同）的几条线画出来后，组成一个3*3矩阵。threejs自带的曲面生成api，版本需要更新到2024年之后的版本，老版可以去github拷贝引入文件到项目中。矩阵需要是规整的，不能长短不一（可以通过线性插值补充不足的点），形成一个类似网格的数据就行了，然后使用下面的方法。

2024-03-20 14:30:02 200

原创【threejs】使用任意矩阵创建曲面

可以使用本方法创建平面，基本原理就是创建buffergeometry并通过index分配网格同时修正uv让整个曲面可以展示贴图。使用一个三维矩阵描述一个不规则的面时（类似geojson的多边形，模型单个面网格），

2024-03-20 14:12:21 152

原创【threejs】修正 threejs 后期效果合成EffectComposer 导致场景变暗淡修正

3 smaaPass解决后期render无法开启抗锯齿的问题（还有一种fxaa修正效果依实际情况选择）2 GammaCorrectionShader修正明暗色域。1 ShaderPass修正scene异常。

2024-03-20 14:03:22 229 1

原创【threejs】在Cesiumjs内使用threejs渲染场景

创建该类即可，具体细节备注有写。

2024-03-19 15:45:53 216 1

原创【threejs】创建沿轨迹流动的粒子效果

使用class管理整个粒子系统。

2024-02-22 16:35:02 400 1

原创【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 370

原创【weblg threejs shader】3.函数，图像与合成

本次内容将教你构建任意函数，并合成多层图形。

2024-02-08 17:15:25 810

原创【weblg threejs shader】2.色彩与线条还有简单的参数

glsl语言通常由通道组成，每一个色彩通道由r,g,b,a颜色和透明度通道组成，取值范围1到0，而着色位置由x,y和z三个坐标组成，这个取值比较随意。由于空间表示过于抽象，我先介绍色彩通道，然后再介绍空间坐标。首先请看上篇文章的色彩部分${${此时每个通道的颜色都是固定的颜色,我们并没有拿到什么特殊的参数去改变它的颜色，所以他的颜色就是他本来的样子：我们来尝试输入一些参数，让色彩变化起来，比如随着画布位置的改变调整它的颜色。

2024-02-08 15:58:55 873

原创【weblg threejs shader】1.初始化

着色器通常由两个部分组成：顶点着色器和片元（或像素）着色器。顶点着色器处理每个图形顶点的位置和属性，而片元着色器处理每个像素的颜色和其他特性。顶点着色器通过对输入顶点进行变换和计算，将其转换为屏幕上的2D坐标，同时可以计算每个顶点的属性，如颜色和纹理坐标等。片元着色器负责计算每个像素的最终颜色，可以通过对纹理采样、光照计算和其他技术进行复杂的计算。通过编写自定义的着色器代码，您可以实现各种各样的效果，如纹理映射、光照、阴影、透明度和变形等。

2024-02-05 14:39:00 367 1

原创【无标题】

Farm是一个使用Rust编写的前端工程构建工具，他有十分快速的构建速度并完全兼容vite插件。

2024-02-04 12:52:26 351 1

原创修复threejs中带有透明度的贴图显示错误等问题

在threejs中，透明贴图可能会因为多次渲染造成色差或透视，如图带有透明贴图的Sprite所示。

2024-01-23 16:34:40 438 1

原创原生 shader模板

logarithmicDepthBuffer 需要关闭,防止其显示不正确。其中 vUv代替r3f中的uv。

2023-12-07 15:18:03 356

原创原生JS使用类实现图片拖拽，缩放等功能

在需要展示图片的dom元素内生效。

2023-07-28 16:24:17 548 1

原创 Threejs换装效果实现

可以将各部分模型单独管理,定义部位，名称和风格等，下面的cover为封面url，旨在列表中展示模型的大致样子，这样可以很好的在页面对各部分进行分类。然后将不同模型组合可以组成完整的模型，这样可以组成预设的默认角色样式，通过id获取部件。同样的定义风格，性别以便分类。在将模型json写好，三维场景初始化后，我们可以将各个部位的id进行记录，通过id的变化修改肠镜中人物的外观。这样就完成了，由于留够了灵活度（封装，规范数据格式等），具体功能可根据需求再做修改。将人物模型拆成各部分，再在换装时更换模型即可。

2023-07-26 11:03:12 820 5

qq_61834461的博客