- 博客(38)
- 收藏
- 关注
RSS订阅原创 Threejs 材质贴图、光照和投影详解
1. 材质和贴图材质（Material）定义了物体表面的外观，包括颜色、光泽度、透明度等。贴图（Textures）是应用于材质的图像，它们可以增加物体表面的细节和真实感。1.1材质类型不受光照影响的基础材质。考虑漫反射的材质，适合简单的光照场景。考虑镜面高光的材质，适合光滑表面的物体。基于物理的材质，支持金属度和粗糙度贴图，适用于现代渲染管线。类似MeshStandardMaterial，但提供更高级的基于物理的渲染特性。1.2 贴图的作用：定义物体的基本颜色。
2024-11-13 16:44:07
737
原创 设置Three.js响应式画布
为了使Three.js创建的画布响应式，需要在窗口大小变化时更新相机的宽高比和渲染器的大小。这通常涉及到添加一个事件监听器来监听resize事件，并在事件触发时执行相应的更新函数。
2024-11-06 16:20:20
315
原创 ThreeJs父子元素与物体的位移、旋转或缩放
在Three.js中，可以使用Object3D类的实例来控制3D物体的位移、旋转和缩放。这些变换可以通过直接设置对象的属性来实现，也可以通过应用变换矩阵来动态改变物体的状态。
2024-11-05 15:15:07
508
原创 3d 添加辅助坐标器和轨道控制器
类来添加坐标轴辅助器，辅助器简单模拟3个坐标轴的对象。红色代表X轴，绿色代表Y轴，蓝色代表Z轴。类来添加控制器，为了方便旋转、缩放和平移相机视角。
2024-11-01 14:33:06
605
原创 ThreeJS创建一个3D物体的基本流程
使用document.body.appendChild(renderer.domElement)将渲染器的DOM元素添加到HTML页面中。创建一个相机对象，通常是THREE.PerspectiveCamera，用于定义观察场景的视角和位置。创建一个THREE.Material实例来定义物体的外观，包括颜色、纹理等。创建一个THREE.Scene实例，它将作为所有3D对象的容器。将几何体和材质结合起来创建一个实例，这是一个实际的3D物体。使用scene.add(cube)将创建的网格添加到场景中。
2024-11-01 13:45:42
613
原创 如何在本地搭建一个three.js的开发环境
创建src文件夹，并且创建一个main.js文件来编写three.js代码，可以创建场景、相机、渲染器以及添加3D模型和动画等。通过在浏览器中打开index.html文件，可以看到three.js应用运行的效果。安装 Node 和 npm，并创建一个ThreeJs的项目文件。在项目文件夹中打开命令行界面，并运行以下命令来初始化项目。通过npm run dev启动服务。通过npm安装three.js库。
2024-10-31 15:10:12
637
原创 WebGL 基础知识点
是从顶点着色器传递到片元着色器的纹理坐标。来指定取样器应该引用哪个纹理单元。关键字来声明变量的默认精度。纹理取样器变量通常声明为。在着色器中，纹理采样函数。用于从纹理中获取颜色值。在WebGL中，可以通过。在片源着色器中，可以通过。
2024-10-24 14:54:46
1066
原创 WebGL 添加背景图
ST纹理坐标（也称为UV坐标）是一种二维坐标系统，用于在三维模型的表面上精确地定位二维纹理图像。这种坐标系统通常将纹理的左下角映射到(0,0)，而右上角映射到(1,1)。S坐标（U坐标）：通常对应纹理图像的水平方向，即纹理的宽度。T坐标（V坐标）：通常对应纹理图像的垂直方向，即纹理的高度。
2024-10-23 16:37:37
884
原创 VSCode中WebGL编程的代码提示方法
由于在VSCode中编写WebGL代码时没有提示，需要手敲，很容易出错，所以可以通过JSDoc注释的方法来获得代码提示。
2024-10-23 09:41:55
196
原创 WebGl 旋转矩阵
旋转矩阵是一个正交矩阵，用于在二维或三维空间中描述一个坐标系绕原点的旋转。在三维空间中，旋转矩阵通常用于沿x轴、y轴或z轴进行旋转，或者沿任意给定轴线进行旋转。旋转矩阵具有一些重要性质，例如它们是正交的，即它们的共轭转置等于其逆矩阵，而且它们保持向量的长度和夹角不变。
2024-10-22 16:26:38
396
原创 WebGl 缩放矩阵
缩放矩阵是线性代数中的一种矩阵，用于描述图形在空间中沿着各个坐标轴进行均匀缩放的变换。在3D图形编程中，缩放矩阵通常用于调整物体的大小，而不改变其形状。其中，(x, y, z)是缩放向量，表示沿着x、y、z轴的缩放比例。如果x、y、z都等于1，则矩阵表示不进行缩放；如果小于1，则表示缩小；如果大于1，则表示放大。
2024-10-22 15:49:43
508
原创 WebGl 使用平行矩阵实现图像平移
用于设置着色器程序中的统一矩阵（uniform matrix）变量。这个函数允许开发者将一个4x4的浮点矩阵传递给顶点着色器或片段着色器中的矩阵属性。这个矩阵可以用于多种变换，包括平移、旋转和缩放。平行矩阵，也称为平移矩阵，是一种在二维或三维空间中应用平移变换的矩阵。平移矩阵的作用是将空间中的每个点沿着一定的方向移动固定的距离，而不改变点之间的相对位置和距离。在顶点着色器中，我们定义了一个uniform变量mat，用来接收平移矩阵。在三维空间中，平移矩阵的形式为。
2024-10-22 14:57:47
584
原创 WebGl 实现图片平移、缩放和旋转
在WebGL中实现图片平移，可以通过修改顶点着色器中的顶点位置来实现。在顶点着色器中，可以通过添加或减去一个统一的偏移量（uniform variable）来实现这一点。图片的旋转可以通过在顶点着色器中应用旋转矩阵来实现。在二维空间中，通常围绕原点旋转，可以使用欧拉公式来计算旋转后的顶点位置。实现图片缩放，可以通过在顶点着色器中对顶点位置进行缩放来完成。在JavaScript中，可以通过设置u_Translation的值来控制平移的距离和方向。在JavaScript中，可以通过设置。的值来控制旋转的角度。
2024-10-22 10:32:49
461
原创 WebGl 实现多种图形的绘制
gl.drawArrays函数是WebGL中用于绘制图形的核心函数之一。它根据指定的模式（mode）从当前激活的顶点缓冲区（VBO）中提取顶点数据，并将它们绘制成图形。
2024-10-21 15:45:57
298
原创 WebGl 使用缓冲区对象绘制多个点
缓冲区对象是WebGL系统中为一块内存区域，可以一次性地向缓冲区对象中填充大量的顶点数据，然后将这些数据保存在其中，供顶点着色器使用。
2024-10-17 14:52:16
1556
原创 WebGl 使用uniform变量动态修改点的颜色
在WebGL中，uniform变量用于在顶点着色器和片元着色器之间传递全局状态信息，这些信息在渲染过程中不会随着顶点的变化而变化。uniform变量可以用来设置变换矩阵、光照参数、材料属性等。由于它们在整个渲染过程中共享，因此可以被所有使用该着色器程序的顶点和片元访问。
2024-10-14 16:26:29
518
原创 WebGl 如何给页面绑定点击事件
在WebGL中给页面绑定点击事件，可以通过为WebGL的绘图上下文所在的元素添加事件监听器来实现点击事件的处理。
2024-10-14 14:26:08
432
原创 WebGl学习使用attribute变量绘制一个水平移动的点
在WebGL编程中，attribute变量是一种特殊类型的变量，用于从客户端传递数据到顶点着色器。这些数据通常包括顶点的位置、颜色、纹理坐标等，它们是与每个顶点直接相关的信息。attribute变量在顶点着色器中声明，并且对于每个顶点来说都是独立的。
2024-10-12 16:21:09
710
原创 了解WebGL三维坐标系
在WebGL中，三维坐标系是构建和渲染三维场景的基础。默认情况下，WebGL使用右手坐标系，其中X轴向右，Y轴向上，Z轴指向观察者，原点位于画布的中心。
2024-10-12 15:10:32
420
原创 JavaScript 递归函数实例详解
递归函数是一种在函数体内部直接或间接调用自身的函数。在JavaScript中，递归函数可以用来解决可以分解为相似子问题的问题，如阶乘计算、斐波那契数列等。递归函数通常包含两个基本要素：递归调用和基本情况（终止条件）。
2024-10-09 16:18:50
431
原创 JavaScript 构造函数及内置构造函数的详解
构造函数通常以大写字母开头，以便与普通函数区分。它们可以包含属性和方法，这些属性和方法通过this关键字添加到新创建的对象上。调用构造函数时，需要使用new关键字，这样可以确保this正确地指向新创建的对象实例。构造函数内部无需写return，返回值即为新创建的对象。
2024-09-30 14:45:46
1097
原创 ES6 解构赋值详解
解构赋值是JavaScript ES6中引入的一种语法，它允许你从数组或对象中提取数据，并将这些数据赋值给一系列变量。这种语法可以使代码更加简洁和易于管理。
2024-09-25 10:34:36
442
原创 JavaScript 内置对象Math
内置对象是指在JavaScript运行环境中预先定义的对象，Math对象是JavaScript提供的一个“数学”对象，他提供了一系列做数学运算的方法。
2024-09-23 16:41:38
382
原创 JavaScript 对象的基本操作及相关知识点详解
在JavaScript中，对象是一种基本的数据结构，以键值对形式保存数据且数据没有顺序，它可以包含多种数据类型的属性和方法。
2024-09-23 16:12:58
673
原创 函数及其所有相关知识点详解及实例
在JavaScript中，函数是一等公民，这意味着函数可以像其他数据类型一样被传递和操作。剩余参数语法允许函数接收不定数量的参数，这些参数会被收集到一个数组中。剩余参数必须是参数列表中的最后一个参数。程序在执行代码的时候，先从当前的作用域中找变量，如果当前作用域中没有变量，则要去全局作用域中找变量，找到就执行，否则报错。回调函数是作为参数传递给另一个函数的函数，通常用于处理异步操作的结果。在ES6之前，如果函数的某个参数没有被传递，该参数将是。，并且必须放置在参数列表的最后。
2024-09-19 15:16:19
1071
原创 return、continue和break 的区别及应用场景
break 语句用于立即终止循环或 switch 语句的执行，并跳出整个语句块。一旦执行到 break，循环或 switch 语句将结束，控制权转移到语句块之后的下一行代码。continue 语句用于跳过当前循环的剩余部分，并立即开始下一次循环迭代。它通常用于在循环中排除某些特定的情况，而不终止整个循环过程。
2024-09-19 09:47:12
329
原创 array数组对象以及常用方法
/ 通过字面量方式定义数组: let 数组名 = [值, 值, 值];// 通过构造函数定义数组: let 数组名 = new Array(值, 值, 值);（new Array() 是固定写法）
2024-09-09 16:30:33
907
原创 JavaScript 循环语句
重复测试和执行：再次检查条件表达式，如果条件仍为真，重复步骤3和4。一旦条件变为假，循环终止。循环的结构使其非常适合处理已知大小的集合，如数组或列表，以及需要精确控制迭代次数的场景。再次检查条件：执行完循环体中的代码后，再修改变量的值，然后将修改后的值再带入到条件中。迭代后表达式：执行完循环体后，执行迭代后表达式，通常用于更新循环控制变量。条件检查：在执行任何循环体内的代码之前，判断条件是否成立。执行循环体：如果条件成立，则立即执行循环体中的代码。执行循环体：如果条件为真，执行循环体内的代码。
2024-09-06 16:15:43
1201
原创 JavaScript 条件分支语句if、switch和三元表达式
如果变量的值是某些固定的值, 推荐使用switch（例如：一年四季：春、夏、秋、冬，一周七天：周一 周二 .... 周日等）。如果不相等，则按照顺序分别和后面的值比较是否相等，如果相等则执行对应的代码，其他代码不执行。1. 不管是单条件分支语句，还是多条件分支语句，else 都可以省略(else中没代码)" 相当于单分支语句中的 if ，":" 相当于单条件分支语句中的 else。判断条件是真还是假，如果是真，则执行代码1，如果是假，则执行代码2。标签的第一个值进行比较，如果相等则执行相应的代码块。
2024-09-02 14:31:20
743
原创 JavaScript运算符
在JavaScript中，运算符是用于执行各种操作的符号，它们可以分为不同的类别，包括赋值运算符、算术运算符、一元运算符、比较运算符、逻辑运算符等。
2024-08-30 15:55:13
409
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人