关于three.js:Threejs教程顶点位置数据解析渲染

10次阅读

共计 2149 个字符，预计需要花费 6 分钟才能阅读完成。

举荐：将 NSDT 场景编辑器退出你 3D 工具链
其余工具系列：NSDT 简石数字孪生

如果你没有 WebGL 根底，能够先不必记忆每个的 threejs 具体内容，有一个大抵印象即可，学习本节课的重点是建设顶点的概念。如果你建设了顶点的概念，那么对于你深刻了解学习 hree.js 很有帮忙。如果你曾经有 WebGL 根底或者说图形学根底，阐明你必定有顶点的概念，本节课重点能够放在学习 threejs 的 API 应用细节，threejs 引擎是如何封装 webgl 的。

本节课会用到 javascript 的类型化数组，你如果不理解，可查看 MDN 对于 javascript 类型化数组的介绍, 也能够查看文章类型化数组。

你能够间接调用 BoxGeometry 间接创立一个立方体几何体，调用 SphereGeometry 创立一个球体几何体。不过为了大家更好的建设顶点概念，通过上面的代码自定义了一个几何体，通过网格模型能够渲染进去两个三角形成果。

上面代码通过 Threejs 引擎的 BufferGeometry 和 BufferAttribute 两个 API 自定义了一个具备六个顶点数据的几何体。
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;

通过自定义的几何体创立一个网格模型。对于网格模型而言，几何体所有顶点每三个顶点为一组能够确定一个三角形，几何体是六个顶点，也就是说能够绘制两个三角形，当然了你能够本人再减少三个顶点地位坐标数据，测试下渲染成果。

// 三角面 (网格) 渲染模式
var material = new THREE.MeshBasicMaterial({
  color: 0x0000ff, // 三角面色彩
  side: THREE.DoubleSide // 两面可见
}); // 材质对象
var mesh = new THREE.Mesh(geometry, material); // 网格模型对象 Mesh

为了更好的了解几何体是由顶点形成的，能够把几何体 geometry 作为点模型 Points 而不是网格模型 Mesh 的参数，你会发现下面的六个点坐标会渲染为六个方形的点区域，能够用上面代码代替下面的网格模型局部代码测试成果。对于网格模型 Mesh 而言，几何体 geometry 三个顶点为一组渲染进去一个三角形，对于点模型 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);// 线条对象增加到场景中

查看上面一段代码，你能够看进去立方体网格模型 Mesh 是由立方体几何体 geometry 和材质 material 两局部形成，立方体几何体 BoxGeometry 实质上就是一系列的顶点形成，只是 Threejs 的 APIBoxGeometry 把顶点的生成细节封装了，用户能够间接应用。比方一个立方体网格模型，有 6 个面，每个面至多两个三角形拼成一个矩形立体，每个三角形三个顶点形成，对于球体网格模型而言，同样是通过三角形拼出来一个球面，三角形数量越多，网格模型外表越靠近于球形。

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

3D 建模学习工作室

正文完