3、顶点概念，几何体结构

3.1 顶点位置数据解析渲染

自定义几何体

var geometry = new THREE.BufferGeometry(); //创建一个Buffer类型几何体对象
//类型数组创建顶点数据
var vertices = new Float32Array([0, 0, 0, //顶点1坐标50, 0, 0, //顶点2坐标0, 100, 0, //顶点3坐标0, 0, 10, //顶点4坐标0, 0, 100, //顶点5坐标50, 0, 10, //顶点6坐标
]);
// 创建属性缓冲区对象
var attribue = new THREE.BufferAttribute(vertices, 3); //3个为一组，表示一个顶点的xyz坐标
// 设置几何体attributes属性的位置属性
geometry.attributes.position = attribue;

点模型points

// 点渲染模式
var material = new THREE.PointsMaterial({color: 0xff0000,size: 10.0 //点对象像素尺寸
}); //材质对象
var points = new THREE.Points(geometry, material); //点模型对象
scene.add(points); //点对象添加到场景中

线模型Line

// 线条渲染模式
var material=new THREE.LineBasicMaterial({color:0xff0000 //线条颜色
});//材质对象
var line=new THREE.Line(geometry,material);//线条模型对象
scene.add(line);//线条对象添加到场景中

3.2 顶点颜色数据插值计算

顶点颜色数据插值计算

每个顶点设置一种颜色

var geometry = new THREE.BufferGeometry(); //声明一个缓冲几何体对象//类型数组创建顶点位置position数据
var vertices = new Float32Array([0, 0, 0, //顶点1坐标50, 0, 0, //顶点2坐标0, 100, 0, //顶点3坐标0, 0, 10, //顶点4坐标0, 0, 100, //顶点5坐标50, 0, 10, //顶点6坐标
]);
// 创建属性缓冲区对象
var attribue = new THREE.BufferAttribute(vertices, 3); //3个为一组，作为一个顶点的xyz坐标
// 设置几何体attributes属性的位置position属性
geometry.attributes.position = attribue;
//类型数组创建顶点颜色color数据
var colors = new Float32Array([1, 0, 0, //顶点1颜色0, 1, 0, //顶点2颜色0, 0, 1, //顶点3颜色1, 1, 0, //顶点4颜色0, 1, 1, //顶点5颜色1, 0, 1, //顶点6颜色
]);
// 设置几何体attributes属性的颜色color属性
geometry.attributes.color = new THREE.BufferAttribute(colors, 3); //3个为一组,表示一个顶点的颜色数据RGB
//材质对象
var material = new THREE.PointsMaterial({// 使用顶点颜色数据渲染模型，不需要再定义color属性// color: 0xff0000,vertexColors: THREE.VertexColors, //以顶点颜色为准size: 10.0 //点对象像素尺寸
});
// 点渲染模式  点模型对象Points
var points = new THREE.Points(geometry, material); //点模型对象
scene.add(points); //点对象添加到场景

材质属性.vertexColors

var material = new THREE.PointsMaterial({// 使用顶点颜色数据渲染模型，不需要再定义color属性// color: 0xff0000,vertexColors: THREE.VertexColors, //以顶点颜色为准size: 10.0 //点对象像素尺寸
});

关于材质的属性.vertexColors可以查看Material文档介绍，属性.vertexColors的默认值是THREE.NoColors，这也就是说模型的颜色渲染效果取决于材质属性.color，如果把材质属性.vertexColors的值设置为THREE.VertexColors,threejs渲染模型的时候就会使用几何体的顶点颜色数据geometry.attributes.color。

3.3 顶点法向量光照计算

没有法向量数据，点光源、平行光等带有方向性的光源不会起作用

var normals = new Float32Array([0, 0, 1, //顶点1法向量0, 0, 1, //顶点2法向量0, 0, 1, //顶点3法向量0, 1, 0, //顶点4法向量0, 1, 0, //顶点5法向量0, 1, 0, //顶点6法向量
]);
// 设置几何体attributes属性的位置normal属性
geometry.attributes.normal = new THREE.BufferAttribute(normals, 3); //3个为一组,表示一个顶点的法向量数据

3.4 顶点索引复用

var geometry = new THREE.BufferGeometry(); //声明一个空几何体对象
//类型数组创建顶点位置position数据
var vertices = new Float32Array([0, 0, 0, //顶点1坐标80, 0, 0, //顶点2坐标80, 80, 0, //顶点3坐标0, 80, 0, //顶点4坐标
]);
// 创建属性缓冲区对象
var attribue = new THREE.BufferAttribute(vertices, 3); //3个为一组
// 设置几何体attributes属性的位置position属性
geometry.attributes.position = attribue
var normals = new Float32Array([0, 0, 1, //顶点1法向量0, 0, 1, //顶点2法向量0, 0, 1, //顶点3法向量0, 0, 1, //顶点4法向量
]);
// 设置几何体attributes属性的位置normal属性
geometry.attributes.normal = new THREE.BufferAttribute(normals, 3); //3个为一组,表示一个顶点的xyz坐标// Uint16Array类型数组创建顶点索引数据
var indexes = new Uint16Array([// 0对应第1个顶点位置数据、第1个顶点法向量数据// 1对应第2个顶点位置数据、第2个顶点法向量数据// 索引值3个为一组，表示一个三角形的3个顶点0, 1, 2,0, 2, 3,
])
// 索引数据赋值给几何体的index属性
geometry.index = new THREE.BufferAttribute(indexes, 1); //1个为一组

总结：

3.5 设置Geometry顶点位置、顶点颜色

Vector3定义顶点位置坐标数据

var geometry = new THREE.Geometry(); //声明一个几何体对象Geometry
var p1 = new THREE.Vector3(50, 0, 0); //顶点1坐标
var p2 = new THREE.Vector3(0, 70, 0); //顶点2坐标
var p3 = new THREE.Vector3(80, 70, 0); //顶点3坐标
//顶点坐标添加到geometry对象
geometry.vertices.push(p1, p2, p3);

Color定义顶点颜色数据

// Color对象表示顶点颜色数据
var color1 = new THREE.Color(0x00ff00); //顶点1颜色——绿色
var color2 = new THREE.Color(0xff0000); //顶点2颜色——红色
var color3 = new THREE.Color(0x0000ff); //顶点3颜色——蓝色
//顶点颜色数据添加到geometry对象
geometry.colors.push(color1, color2, color3);

材质属性.vertexColors

//材质对象
var material = new THREE.MeshLambertMaterial({// color: 0xffff00,vertexColors: THREE.VertexColors, //以顶点颜色为准side: THREE.DoubleSide, //两面可见
});

2.6 Face3对象定义Geometry三角面

Face3定义三角形面

var geometry = new THREE.Geometry(); //声明一个几何体对象Geometryvar p1 = new THREE.Vector3(0, 0, 0); //顶点1坐标
var p2 = new THREE.Vector3(0, 100, 0); //顶点2坐标
var p3 = new THREE.Vector3(50, 0, 0); //顶点3坐标
var p4 = new THREE.Vector3(0, 0, 100); //顶点4坐标
//顶点坐标添加到geometry对象
geometry.vertices.push(p1, p2, p3,p4);// Face3构造函数创建一个三角面
var face1 = new THREE.Face3(0, 1, 2);
//三角面每个顶点的法向量
var n1 = new THREE.Vector3(0, 0, -1); //三角面Face1顶点1的法向量
var n2 = new THREE.Vector3(0, 0, -1); //三角面2Face2顶点2的法向量
var n3 = new THREE.Vector3(0, 0, -1); //三角面3Face3顶点3的法向量
// 设置三角面Face3三个顶点的法向量
face1.vertexNormals.push(n1,n2,n3);// 三角面2
var face2 = new THREE.Face3(0, 2, 3);
// 设置三角面法向量
face2.normal=new THREE.Vector3(0, -1, 0);//三角面face1、face2添加到几何体中
geometry.faces.push(face1,face2);

设置四个顶点

var p1 = new THREE.Vector3(0, 0, 0); //顶点1坐标
var p2 = new THREE.Vector3(0, 100, 0); //顶点2坐标
var p3 = new THREE.Vector3(50, 0, 0); //顶点3坐标
var p4 = new THREE.Vector3(0, 0, 100); //顶点4坐标
//顶点坐标添加到geometry对象
geometry.vertices.push(p1, p2, p3,p4);

构建三角形

// Face3构造函数创建一个三角面
var face1 = new THREE.Face3(0, 1, 2);
// 三角面2
var face2 = new THREE.Face3(0, 2, 3);

三角形法线设置

// 三角面2
var face2 = new THREE.Face3(0, 2, 3);
// 设置三角面法向量
face2.normal=new THREE.Vector3(0, -1, 0);

或者

// Face3构造函数创建一个三角面
var face1 = new THREE.Face3(0, 1, 2);
//三角面每个顶点的法向量
var n1 = new THREE.Vector3(0, 0, -1); //三角面Face1顶点1的法向量
var n2 = new THREE.Vector3(0, 0, -1); //三角面2Face2顶点2的法向量
var n3 = new THREE.Vector3(0, 0, -1); //三角面3Face3顶点3的法向量
// 设置三角面Face3三个顶点的法向量
face1.vertexNormals.push(n1,n2,n3);

颜色设置

// 三角形1颜色
face1.color = new THREE.Color(0xffff00);
// 设置三角面face1三个顶点的颜色
face1.color = new THREE.Color(0xff00ff);

face1.vertexColors = [new THREE.Color(0xffff00),new THREE.Color(0xff00ff),new THREE.Color(0x00ffff),
]

3.7 访问几何体对象数据

访问几何体对象数据

3.8 几何体旋转、平移、缩放

var geometry = new THREE.BoxGeometry(100, 100, 100); //创建一个立方体几何对象Geometry
// 几何体xyz三个方向都放大2倍
geometry.scale(2, 2, 2);
// 几何体沿着x轴平移50
geometry.translate(50, 0, 0);
// 几何体绕着x轴旋转45度
geometry.rotateX(Math.PI / 4);
// 居中：偏移的几何体居中
geometry.center();
console.log(geometry.vertices);

Three.js（三）—— 顶点概念，几何体结构相关推荐

1. 区分 JVM 内存结构、 Java 内存模型 以及 Java 对象模型 三个概念

   本文由 简悦 SimpRead 转码, 原文地址 https://www.toutiao.com/i6732361325244056072/ 作者:Hollis 来源:公众号Hollis Java 作 ...

2. Three.js中自定义控制几何体的点和面的属性

   场景 Three.js中引入dat.gui库实现界面组件控制动画速度变量: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/1193 ...

3. Sg.js框架核心概念

   Sg.js框架核心概念: 1)所有变量.方法.类对象全部都是从属于$g主树,由$g分支出很多$g.变量名.$g.方法.$g.对象id.$g.类: 2)获取控件内部属性必须使用公开的get方法获取,禁止 ...

4. 理解 angular2 基础概念和结构 ----angular2系列（二)

   前言: angular2官方将框架按以下结构划分: Module Component Template Metadata Data Binding Directive Service Dependen ...

5. VC++和VC++.NET中与图像处理有关的几个概念、结构和类

   VC++和VC++.NET中与图像处理有关的几个概念.结构和类 最近一直在看VC++有关图像处理方面的书,终于把以前一直混淆的几个概念.结构和类弄清楚了,特整理如下.如有错误,请大家批评指正,不胜感激 ...

6. 在进行了解JAVA CLASS文件解析时必须要明白的三个概念

   在讲Class文件的格式之前,要介绍三个概念: 1)数据类型:<JVM Spec>(2nded)中指出,Java Class文件的数据用自己定义的一个数据类型集来表示,即u1,u2,u4, ...

7. 数据结构——数和二叉树的概念和结构

   目录 一.数的概念及结构 1.1 树的概念 1.2 树的相关概念 1.3 树的表示 1.4 树的应用 二.二叉树概念及结构 2.1 概念 2.2 特殊的二叉树 2.3 二叉树的性质 2.4 二叉树的存 ...

8. 【数据结构之二叉树】——二叉树的概念及结构，特殊的二叉树和二叉树性质

   文章目录 一.二叉树的概念及结构 1.概念 2.现实中的二叉树 3. 特殊的二叉树: 3.二叉树的性质 二.二叉树练习题 总结 一.二叉树的概念及结构 1.概念 一棵二叉树是结点的一个有限集合,该集合 ...

9. aps软件诠释精益制造的三个概念

   如何改善生产制造操作,看似不言而喻,很简单,但实际上却相当复杂而且具有挑战性.在改善制造操作时,需要考虑多种因素:生产中哪些领域效率低下,如何改进这些方面,改进成本等等. aps软件诠释精益制造的三个 ...

最新文章

1. dnf跨一服务器修复,DNF跨区服务器炸裂：一阶段史诗回档，官方补偿何在
2. GNOME桌面的安装
3. JVM，JDK，JRE和OpenJDK有什么区别？
4. JavaWeb学习之Path总结、ServletContext、ServletResponse、ServletRequest（3）
5. mysql8.0其他机器访问_论文导读｜基于机器学习的高速缓存预取
6. 维权靠微博？用户京东金融账户被盗刷15万 处理未果怒发微博曝光
7. 2021计算机一级新增知识点,2021年计算机一级知识点.doc
8. 深入了解vue中slot和slot-scope
9. java中的回调函数
10. 用Python对全国火车站数量进行分析，发现东北三省竟然占了2成
11. c语言运行excel中vba程序,Excel 中如何运行 VBA 代码？
12. 智能电销机器人语音自动外呼效果好吗
13. 制作js原生瀑布流插件
14. 服务器为什么要域名解析,DNS解析的过程是什么 为什么需要DNS解析域名为IP地址？...
15. docx文档怎么排列图片_怎么把图片文字转换成word文档
16. Delphi XE10让android的界面设计摆脱繁杂
17. 业务层战略制定的思路和方法_如何确保公司年度战略目标落地—打造战略执行的方法论...
18. 如何在 HTML 中调整图像大小？
19. 自激多谐振荡电路实验总结，小白电路测试
20. 关于调用第三方sdk

热门文章

1. 单例模式——网站计数器实例
2. 代码注释中经常用到的 TODO
3. PTA - 二叉搜索树的结构 (30 分)——建树，输入处理
4. 无缝衔接的人会遭报应吗_因果报应：一个人将走背运时，往往会出现这三个征兆，别不信！...
5. 需求管理计划和范围管理计划的区别
6. 大话数据结构及JAVA数据结构阅读笔记
7. 【Linux】进程概念（上）
8. Day228229.上传查询医院接口、上传查询删除科室接口、上传查询删除排班接口 -尚医通
9. listView1.Items.Add()与 listView1.Items[i].SubItems.Add()区别
10. IBM朱近之：十大误区蒙蔽了云计算