SimoonJia - 博客园

2025年5月12日

摘要： 1. 顶点着色器内置变量 1.1 gl_VertexID 类型：int 说明：返回当前顶点的索引（从 0 开始）。在使用顶点数组时，每个顶点都会有一个唯一的索引。 1.2 gl_InstanceID 类型：int 说明：返回当前实例化渲染的实例索引。当进行实例化渲染时（即渲染多个相同的物体），该变量阅读全文

posted @ 2025-05-12 19:03 SimoonJia 阅读(24) 评论(0) 推荐(0)

glsl函数

摘要： 1. 数学函数绝对值函数 abs(x)：返回 x 的绝对值。取整函数 ceil(x)：返回大于或等于 x 的最小整数。 floor(x)：返回小于或等于 x 的最大整数。 round(x)：四舍五入返回最接近 x 的整数。 trunc(x)：返回去掉小数部分的 x（向零取整）。幂运算 pow( 阅读全文

posted @ 2025-05-12 19:01 SimoonJia 阅读(34) 评论(0) 推荐(0)

three使用ParametricGeometry创建/更新曲线尾迹

摘要：参数化缓冲几何体（ParametricGeometry）生成由参数表示其表面的几何体。 ParametricGeometry 是一个附加组件，必须显式导入。 See Installation / Addons. import { ParametricGeometry } from 'three/a 阅读全文

posted @ 2025-05-12 11:10 SimoonJia 阅读(8) 评论(0) 推荐(0)

2025年5月11日

three实现双面材质shaderMaterial

摘要： const vertexShader = ` void main() { gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); } `; // 片段着色器 //gl_FrontFacing 内建变量，它会根据面阅读全文

posted @ 2025-05-11 23:59 SimoonJia 阅读(6) 评论(0) 推荐(0)

使用CurvePath和CubicBezierCurve3创建一条曲线

摘要： 1.曲线路径（CurvePath）一个扩展了Curve的抽象基类。CurvePath仅仅是一个已连接的曲线的数组，但保留了曲线的API。 path.getPoints ( divisions : Integer ) : divisions -- 曲线分段数量。默认值为12。 2.三维三次贝塞尔曲线阅读全文

posted @ 2025-05-11 23:00 SimoonJia 阅读(7) 评论(0) 推荐(0)

2025年5月10日

WebGL渲染器render常量-面剔除模式、阴影类型、色调映射

摘要：面剔除模式 THREE.CullFaceNone THREE.CullFaceBack THREE.CullFaceFront THREE.CullFaceFrontBack CullFaceNone 禁用面剔除。CullFaceBack 为默认值，剔除背面。CullFaceFront 剔除正面。C 阅读全文

posted @ 2025-05-10 11:34 SimoonJia 阅读(28) 评论(0) 推荐(0)

2025年5月9日

纹理常量-贴图的映射模式

摘要：映射模式 1. THREE.UVMapping 通俗解释：就是最常见的纹理贴图方式。每个 3D 模型的表面都有一套叫做 "UV 坐标" 的东西，这些坐标就像是贴纹理用的 "地图"。UVMapping 就是用这张地图，把纹理图片精确地贴到模型的表面上。适用场景：用于任何常规模型，比如角色、道具、建筑阅读全文

posted @ 2025-05-09 20:16 SimoonJia 阅读(22) 评论(0) 推荐(0)

缓冲区属性使用常量BufferAttributeUsage设置 BufferAttribute 的使用模式（usage mode）

摘要：有三种提示可供用户指定数据。它们都基于用户将如何使用缓冲区。也就是说，用户是直接读取还是写入缓冲区的数据。 DRAW：用户将把数据写入缓冲区，但不会读取数据。 READ：用户不会写入数据，但用户将读回数据。 COPY：用户将不会写入或读取数据。有三个提示可以说明用户更改缓冲区数据的频率。 STAT 阅读全文

posted @ 2025-05-09 19:17 SimoonJia 阅读(11) 评论(0) 推荐(0)

2025年5月8日

代码实现tween补间

摘要：使用： this.flatTween = new TweenAnimation({ start, end, duration: this.scannerDuration * 1000, // 动画持续时间：3 秒 onUpdate: (points) => setPoints(points), re 阅读全文

posted @ 2025-05-08 14:04 SimoonJia 阅读(9) 评论(0) 推荐(0)

2025年5月7日

深度缓冲区depthWrite、depthTest

摘要： depthTest 和 depthWrite 是控制 WebGL 深度缓冲区的两个关键属性，它们直接影响 3D 场景中物体的渲染顺序和遮挡关系。 1. depthTest 的作用 depthTest 决定了一个片段在绘制时，是否需要与深度缓冲区的值进行比较。默认值：true启用深度测试，片段会根据阅读全文

posted @ 2025-05-07 10:12 SimoonJia 阅读(37) 评论(0) 推荐(0)

Simoon

公告