ThreeJS几何体详解----(8)

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第9天，点击查看活动详情 >

Threejs中的几何体基本上是三维空间中的点集(也被称为顶点)和将这些点连成的面(三角面片),图一展示了threejs库中可用的标准几何体;

图一

图一来自于《Three.js开发指南》中第二章第五节源码效果截图；

无敌推荐这本书，在微信读书中就可以找到！！作者【乔斯·德克森】

BoxGeometry

new THREE.BoxGeometry(a, b, c,1,1,1) 参数解读 前三个参数可以理解为BoxGeometry的长宽高,分别在x,y,z轴上的高度 后面三个参数时他的三角面片,正如之前提到的,所有的Threejs中的几何体中的面都为三角面片,当我有更多的三角面片时,我的Mesh的更细节;但对于立方体而已,即使我们设置了不同的数量可能也看不出来区别,所以我们可以添wireframe可以看出他的结构变化

// 使用
let basicMaterial = new THREE.MeshBasicMaterial({ color:'pink' ,wireframe:true})
const mesh = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), basicMaterial));
// new THREE.BoxGeometry(1, 1, 1)
mesh.position.copy(new THREE.Vector3(0,0,0))
scene.add(mesh)

效果如图二

图二(图片被压的好糊,凑合看吧)

BufferGeometry

因为我们的几何是有点线面构成,所以我们也可以通过Geometry自定义顶点和面片,绘制出属于我们独一无二的图形; 现在在网上/教材中依然可以看到好多new THree.Geometry(),new THree.Face3()的写法,照搬代码过来却没有效果,因为threeFace3已经在R125之后移除THREE的核心类,Geometry也被移除并替换为BufferGeometry;

// 创建自定义的几何体
const geometry = new THREE.BufferGeometry()
// geometry.vertices = vertices;
// geometry.faces.log
//类型数组创建顶点数据  数组中包含6个顶点的xyz坐标数据
var verArr = new Float32Array([
    -1, -1, 0,
    1, -1, 0,
    1, 1, 0,
    1, 1, 0,
    2,2,0,
    2,2,2,
]);
//三个为一组，表示一个顶点坐标
var BufferAttribute = new THREE.BufferAttribute(verArr, 3);
// 设置几何体的顶点位置数据
geometry.attributes.position = BufferAttribute;
// geometry.faces=faces;
const mesh = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({
    color: colors[arr.length],
    wireframe: true
}));
mesh.position.copy(new THREE.Vector3(0, 0, 0))
console.log(geometry);
scene.add(mesh)

指定了图形的顶点,并用面片承载,我的参数出现的效果如图三

图三

今天就到这吧,准备下班了。
如果有哪里描述不准确或者有问题,欢迎大佬指正!
(≖ᴗ≖)✧