Three.js几何体顶点颜色和材质颜色区别

在学习Three.js的过程中你可能会思考Threejs几何体顶点颜色和材质对象的颜色有什么区别？如果你产生了这个疑问，说明你可能没有原生WebGL基础或者说你对Three.js整个系统的原理不够理解。

如果整个网格模型 Mesh 的颜色是单一的颜色，不是彩色渐变，直接设置材质对象 Material 的颜色属性 .color 就可以。没有必要去设置几何体的顶点颜色，如果你希望你个几何体的表面产生渐变的彩色效果，在不使用贴图的情况下，可以通过设置几何体的顶点颜色实现，比如一个温度云图。

在Three.js中几何体对象 Geometry 和缓冲类型几何体对象 BufferGeometry 本质上就是对WebGL中各种顶点数据的封装，顶点颜色数据就是顶点数据中的一种，至于Three.js中的各种点材质、线材质、网格材质、精灵材质本质上都是对顶点着色器、片元着色器、uniform变量数据的封装。

材质对象 Material 颜色属性 .color 的属性值直接影响的是原生WebGL中的片元着色器进行计算后赋值给内置变量 gl_FragColor ,如果是几何体中的顶点颜色数据需要先在顶点着色器中进行插值计算，然后传递给片元着色器。

设置模型的几何体顶点颜色时候，对于 Geometry 几何体，如果是点 Points 或线 Line 模型，可以直接设置几何体对象的 .colors 属性，如果是网格模型 Mesh ，需要通过三角形属性 .faces 来设置顶点颜色, Face3.color 或 Face3.vertexColors 。对于 BufferGeometry 几何体而言，直接设置 attributes.color 属性就可以，一般加载的外部模型都是 BufferGeometry 几何体。

欢迎关注我的个人技术博客

Three.js几何体顶点颜色和材质颜色区别在学习Three.js的过程中你可能会思考Threejs几何体顶点颜色和材质对象的颜色有什么区别？如果你产生了这个疑问，说明你可能没有原生WebGL基础或者说你对Three.js整个系统的原理不够理解。如果整个网格模型Mesh的颜色是单一的颜色，不是彩色渐变，直接设置材质对象Material的颜色属性.color就可以。没有必要去设置几何体的顶点颜色... 直线模型对象两个顶点确定一条直线，构造函数 THREE .Vector3()可以用来创建一个顶点位置，下面代码中Vector3(10,0,0)表示三维笛卡尔坐标系中顶点坐标(10,0,0), vertices是 几何体 对象的顶点坐标属性，从Javascript语言的角度看vertices是数组对象，push()是Javascript语言支持的方法，用于给数组增加元素。

有时候在做特效的时候，我们想在原有着色器渲染之上来增加特效。不想使用ShaderMaterail 材质类，如果使用该类书写着色器逻辑，会改变原有的渲染效果。原理利用着色器是字符串的本质，将原有的main函数提取，替换掉，重新定义main函数，将替换掉的main函数在新的main函数中执行。 1、替换之前 2、替换之后（看末尾逻辑）一、主要代码封装 * @Author: gjw * @Date: 2020-07-30 16:09:32 * @LastEditTime: 2020-07-30.

我们以上面的代码为基础，加上以下代码渲染结果 几何体 Geometry的三角面属性和缓冲类型 几何体 BufferGeometry 顶点索引属性相同，用来组织网络模型三角形的绘制上面代码的展示效果如下

具体做法可以参考 three js 的reflector实现的拿到反射的部分 refactor实现的拿到折射的部分然后我搭配的dudvMap 再加一个普通的phong 看起来还是比较像水面的

搞了一段时间的 three js ，最近想慢慢学习 three js 中的shader用法，最然 three js 中有TextureLoader很简单的就可以进行贴图，不过为了学习shader嘛，就写写喽！，俺也是初学，写的烂还望包容哈 1、使用shader给plane进行贴图最终效果如下图所示：完整代码如下：<!DOCTYPE html PUBLIC

非均匀有理B样条，通常简称为NURBS(Non-Uniform Rational B-Splines),实际上已经成为利用计算机处理集合信息时用于形状的表示、设计和数据交换的工业标准。许多国内和国际标准，如IGES,STEP和PHIGS都把NURBS作为集合设计的一个强有力的工具。NURBS取得的巨大成功主要由于以下事实： NURB...

总序材质和 几何体 构成网格，决定 几何体 是否像金属，透明与否，已经是否显示成线框。 MeshBasicMaterial：对光照无感，给 几何体 一种简单的颜色或显示线框 MeshLambertMaterial：这种材质对光照有反应，用于创建暗淡的不发光的物体 MeshPhongMaterial：这种材质对光照也有反应，用于创建金属类明亮的物体材质的共有属性材质虽然可能有不同的分类，但是都是材质啊，还是有共

在 three . js 中创建粗线是非常简单的。所谓的粗线，就是在一个线条上添加一定的宽度，使其看起来像一个粗线条。首先，我们需要使用 three . js 的LineBasicMaterial来创建一个基础材质，然后使用 three . js 的Geometry对象创建一个线条 几何体 。接着，我们可以通过添加相应的顶点来定义 几何体 的形状。最后，我们使用 THREE .Line对象将基础材质和 几何体 对象合并在一起。为了创建一个粗线，我们需要将基础材质的linewidth属性设置为较大的值，例如10或20等等。同时，我们还可以在Geometry对象上设置一个参数，即linecap，来定义线条的末端形状。以下是一个简单的粗线创建示例： // 创建基础材质 var material = new THREE .LineBasicMaterial({ color: 0xffffff, linewidth: 10 // 设置线条的宽度 // 创建线条 几何体 var geometry = new THREE .Geometry(); geometry.vertices.push(new THREE .Vector3(-10, 0, 0)); // 添加线条顶点 geometry.vertices.push(new THREE .Vector3(0, 10, 0)); geometry.vertices.push(new THREE .Vector3(10, 0, 0)); // 设置线条 几何体 的末端形状 geometry.linecap = 'round'; // 创建线条对象 var line = new THREE .Line(geometry, material); // 将线条对象添加到场景中 scene.add(line); 通过上述示例，我们就可以轻松地使用 three . js 创建出粗线条。