Threejs入门之九:认识缓冲几何体BufferGeometry（二）

前面一节我们初步了解了BufferGeometry，它可以自定义任何几何形状，它的数据存储在BufferAttribute中。我们也使用BufferGeometry创建了一个自定义的mesh物体，但是，如果你跟着步骤创建了这个物体，用鼠标反转你会发现，这个物体只有一个面可以看到，反转后是看不到任何物体的，这是因为在Threejs中，空间中一个三角形是有正反两面的，在Three.js中规则你的眼睛(相机)对着三角形的一个面，如果三个顶点的顺序是逆时针方向，该面视为正面，如果三个顶点的顺序是顺时针方向，该面视为反面。
我们可以在创建材质的时候配置side属性来设置物体的正反面是否可见。
1. 三角面的正反面
Three.js的材质默认正面可见，反面不可见。

const material = new THREE.MeshBasicMaterial({
    color: 0x0000ff, 
    side: THREE.FrontSide, //默认只有正面可见
})

设置两面均可见

const material = new THREE.MeshBasicMaterial({
    side: THREE.DoubleSide, //两面可见
})

设置背面可见

const material = new THREE.MeshBasicMaterial({
    side: THREE.BackSide, //设置只有背面可见
})

2.点模型对象
Points是用于显示点的模型对象，它和我们前面用过的网格模型Mesh一样，都是threejs提供的一种模型对象。其构造函数如下

Points( geometry : BufferGeometry, material : Material )
geometry —— （可选）是一个BufferGeometry的实例，默认值是一个新的BufferGeometry。
material —— （可选） 是一个对象，默认值是一个PointsMaterial。

前面我们使用网格模型Mesh的时候使用的材质是MeshBasicMaterial，同样，点模型Points也有自己对应的点材质PointsMaterial
这里我们依然使用上节定义的类型数组作为各个顶点的数据

//创建顶点数据
const vertices = new Float32Array([
  0, 0, 0, //顶点1坐标
  100, 0, 0, //顶点2坐标
  0, 100, 0, //顶点3坐标
  0, 0, 30, //顶点4坐标
  0, 0, 100, //顶点5坐标
  60, 0, 20, //顶点6坐标
])

创建缓冲区对象BufferAttribute (opens new window)表示threejs几何体顶点数据。

const attribute = new THREE.BufferAttribute(vertices, 3)

设置几何体attributes属性的位置属性

geometry.attributes.position = attribute

创建点模型的材质

// 点模型材质
const material = new THREE.PointsMaterial({
    color: 0xffff00,
    size: 10.0 //点对象像素尺寸
})

创建点模型，并将几何体和材质作为参数传递给points

const points = new THREE.Points(geometry, material);

刷新浏览器，发现原来的面已经变成了几个点

3.线模型对象
我们使用BufferGeometry同样可以创建线物体，Threejs给我们提供了多种线模型对象，连续先模型Line、闭合线条LineLoop、非连续的线条LineSegments等；同样，线模型对应的也有响应的线材质LineBasicMaterial
创建线材质

// 线材质
const material = new THREE.LineBasicMaterial({
    color: 0xff0000
})

创建Line对象

// 创建线模型对象
const line = new THREE.Line(geometry, material)

刷新浏览器查看效果

创建LineLoop对象

// 闭合线条
const line = new THREE.LineLoop(geometry, material)

刷新浏览器看效果

创建LineSegments对象

//非连续的线条
const line = new THREE.LineSegments(geometry, material)

效果如下

由此可以看出三者的区别：Line是连续的首位不闭合的线；LineLoop是连续的闭合线；LineSegments是非连续的两两相连的线
今天先写到这里吧，下次我们继续深入理解BufferGeometry的更多特性