共计 2149 个字符,预计需要花费 6 分钟才能阅读完成。
举荐:将 NSDT 场景编辑器退出你 3D 工具链
其余工具系列:NSDT 简石数字孪生
顶点地位数据解析渲染
如果你没有 WebGL 根底,能够先不必记忆每个的 threejs 具体内容,有一个大抵印象即可,学习本节课的重点是建设顶点的概念。如果你建设了顶点的概念,那么对于你深刻了解学习 hree.js 很有帮忙。如果你曾经有 WebGL 根底或者说图形学根底,阐明你必定有顶点的概念,本节课重点能够放在学习 threejs 的 API 应用细节,threejs 引擎是如何封装 webgl 的。
JavaScript 类型化数组
本节课会用到 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
点模型 Points
为了更好的了解几何体是由顶点形成的,能够把几何体 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
下面两个案例实用点模型和网格模型去渲染几何体的顶点数据,上面代码是把几何体作为线模型 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 建模学习工作室