threejs
文章平均质量分 77
threejs原理
Young soul2
这个作者很懒,什么都没留下…
展开
-
threejs之贴图原理
对于index的设置如果你按照逆时针的顺序定义顶点索引,渲染引擎会认为这是一个正面的三角形,会正确计算法线和光照效果。如果你按照顺时针的顺序定义顶点索引,渲染引擎会认为这是一个背面的三角形,可能会导致不正确的光照效果。uv的取值范围是从0到1的,uv的设置和position的设置顺序有关。在上述例子中position的设置是逆时针设置的,所以uv的设置也要逆时针设置才能正确取样。,如果我们设置index的值为一半顺时针,一半逆时针那么就会出现正面有一半反面有一半,我们始终只能看到一半。z轴朝向我们是正面。原创 2024-03-19 20:03:28 · 476 阅读 · 0 评论 -
WebGL之灯光使用解析
在使用灯光之前,首先我们需要了解,与定义更广泛的 OpenGL 不同,WebGL 并没有继承 OpenGL 中灯光的支持。所以你只能由自己完全得控制灯光。幸运得是,这也并不是很难,本文接下来就会介绍完成灯光的基础。原创 2024-03-07 17:00:35 · 951 阅读 · 0 评论 -
WebGL之使用纹理
现在我们已经创建好了一个可以旋转的 3D 的立方体,接下来是时候使用贴图来代替每个面的单一的颜色了。原创 2024-03-07 16:13:39 · 1157 阅读 · 0 评论 -
WebGL之创建 3D 对象
首先,更新函数中代码来创建立方体的顶点位置缓存区。现在的代码看起来和渲染正方形时的代码很相似,只是比之前的代码更长因为现在有了 24 个顶点(每个面使用 4 个顶点)。在“init-buffers.js”文件由于我们给顶点添加了 Z 分量,因此我们需要将属性的更新为 3。然后我们还要为每个顶点定义颜色。下面的代码首先为每个面定义颜色,然后用一个循环语句为每个顶点定义颜色信息。在“init-buffers.js”文件函数中,用下面代码替换colors++j) {原创 2024-03-07 14:48:02 · 1051 阅读 · 0 评论 -
WebGL之让目标动起来
在此示例中,我们实际上将旋转正方形平面。原创 2024-03-07 13:43:14 · 374 阅读 · 0 评论 -
WebGL 之创建 2D 内容
它的职责是确定像素的颜色,通过指定应用到像素的纹理元素(也就是图形纹理中的像素),获取纹理元素的颜色,然后将适当的光照应用于颜色。在观察者视图空间中,观察者(通常是摄像机)位于坐标系的原点,观察方向是坐标系的负Z轴方向,摄像机的朝向和位置决定了观察者视图空间的坐标系。:在顶点着色器中,顶点数据经过模型变换、视图变换和投影变换后,得到的坐标被称为裁剪空间坐标。这个范围内的坐标表示的是相对于视锥体(View Frustum)的位置,超出这个范围的坐标将被裁剪掉,不会显示在最终的图像中。原创 2024-03-07 10:24:21 · 814 阅读 · 0 评论 -
WebGL之使用着色器将颜色应用于 WebGL
在之前的展示中我们已经创建好了一个正方形,接下来我们要做的就是给它添加一抹色彩。添加颜色可以通过修改着色器来实现。原创 2024-03-07 11:44:30 · 1419 阅读 · 0 评论 -
threejs之使用shader实现雷达扫描
总结,这段代码通过动态旋转的方式,结合时间变化,创建了一个中心透明度变化的圆形效果,其中圆形的颜色和旋转速度可以通过调整。在图形和游戏开发中,这种类型的矩阵变换非常有用,尤其是在处理物体的旋转和定位时。通过这个矩阵,可以对二维空间中的点或向量进行旋转,使其绕原点旋转。函数来旋转一个二维向量。这行代码使用了自定义的。,并且旋转的角度随时间。原创 2024-02-16 15:30:34 · 1097 阅读 · 0 评论 -
threejs之使用顶点着色器和片着色器生成飞线原理分析
如果点的大小小于等于0,则直接将颜色设置为固定值,否则根据点的颜色和距离中心的距离计算点的颜色强度。:当后面的不可见的时候vSize会小于0,此时让它加上最初的值,变成最开始的长度,让不可见的重新可见。这段代码是一个顶点着色器程序,它对顶点进行处理,主要包括对顶点位置的变换和点的大小调整。根据顶点的深度进行调整,确保点在屏幕上的大小与其在视觉上的大小相符合。此时把为小于0的部分加上总size的长度,使得小于0的时候变为时间为0的长度。:这是一个变量,从顶点着色器传递过来的,用于表示点的大小。原创 2024-02-16 11:54:17 · 1070 阅读 · 0 评论 -
threejs之updateWorldMatrix的实现原理
首先我们需要定义几个额外的概念,包括表示位置、旋转、和缩放的类,以及一个用于表示4x4矩阵并执行矩阵运算的类。这个函数的目的是更新一个物体在世界空间中的位置,考虑到它的局部变换(位置、旋转、缩放)以及它的父对象的世界矩阵(如果有的话)。方法如何根据对象的局部变换(位置、旋转、缩放)以及父对象的世界矩阵来更新对象的世界矩阵。这个方法首先更新自身的局部矩阵,然后如果有父对象,它会和父对象相乘。首先,让我们定义一些基础的数学工具类,包括。这个实现提供了一个基础框架,从中可以看出。(用于表示旋转), 和。原创 2024-02-02 10:49:46 · 743 阅读 · 0 评论 -
threejs之常用贴图
在三维图形和游戏开发中,高光贴图、凹凸贴图、法线贴图和环境光遮蔽贴图是常用的技术,用于增加虚拟物体表面的细节和真实感,而无需增加更多的几何体。这些技术可以帮助开发者和艺术家创造出既详细又性能高效的场景。原创 2024-02-02 17:22:24 · 899 阅读 · 0 评论