04.顶点概念、几何体结构

最新推荐文章于 2024-06-21 17:40:53 发布

碵蝎

最新推荐文章于 2024-06-21 17:40:53 发布

阅读量2.6k

点赞数

分类专栏： three.js

本文链接：https://blog.csdn.net/QQ408896436/article/details/105271343

版权

three.js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

绝大部分的三维模型，都是由无数个顶点组成三角面，无数个三角面来组成我们所看到的三维模型。

顶点位置数据解析渲染

下面通过一个例子，创建一个正方形

分析

一个正方形由2个三角形组成，一个三角形有3个顶点，所以创建一个正方形需要6个顶点数据

主要代码

//1、定义顶点数据，三个为一组（x、y、z）
var vertices = new Float32Array([
    //第1个三角形顶点数据
    0,0,0,
    0,5,0,
    5,0,0,
    
    //第2个三角形顶点数据
    5,5,0,
    0,5,0,
    5,0,0,
]);

//2、创建BufferAttribute，参数为顶点数组，3代表3个数值组成一个顶点
var attribue = new THREE.BufferAttribute(vertices, 3);

//3、创建缓冲几何体BufferGeometry
var geometry = new THREE.BufferGeometry();

//4、赋值顶点数据
geometry.attributes.position = attribue;

例子

自定义几何体正方形

为了更好的理解几何体是由顶点构成的，可以把几何体geometry作为点模型Points而不是网格模型Mesh的参数，你会发现上面的六个点坐标会渲染为六个方形的点区域

点模型正方形

也可以用线模型

线模型正方形

查看下面一段代码

var geometry = new THREE.BoxGeometry(100, 100, 100); //创建一个立方体几何对象Geometry
var material = new THREE.MeshLambertMaterial({
  color: 0x0000ff
}); //材质对象Material
var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh

你可以看出来立方体网格模型Mesh是由立方体几何体geometry和材质material两部分构成，立方体几何体BoxGeometry本质上就是一系列的顶点构成，只是Threejs的APIBoxGeometry把顶点的生成细节封装了，用户可以直接使用。比如一个立方体网格模型，有6个面，每个面至少两个三角形拼成一个矩形平面，每个三角形三个顶点构成，对于球体网格模型而言，同样是通过三角形拼出来一个球面，三角形数量越多，网格模型表面越接近于球形。