5.Three.js坐标轴与绘制自定义几何体

Three.js坐标轴与绘制自定义几何体

Three.js的三维物体都是由三角面组成的，在之前的学习中，我们了解了Geometry对象，以及如何使用Geometry构建点、线、面，那么，如何构建一个自定义的几何体呢？了解使用Three.js自定义构建几何体对我们了解Three.js的其它几何体的实现原理有很意义。

目标，创建一个三维棱形：

在这里插入图片描述

使用Three.js构建自定义几何体可以分为以下步骤：

1.创建自定义几何体的geometry对象
	1.1：创建顶点，加入到geometry中
	1.2：使用顶点来创建几何体的各个三角面,加入到geometry中
	1.3：计算法向量

2.创建材质

3.创建网格模型对象

4.网格模型对象加入到场景中

Three.js坐标轴说明：

Three.js中的坐标轴是使用的右手坐标系，AxesHelper可以显示出坐标轴的辅助线，帮助我们更清晰的看出其空间关系，

坐标轴辅助线中x轴线为红色，y轴线绿色、z轴线为蓝色，下面是添加坐标轴辅助线的代码：

// AxesHelper：辅助观察的坐标系(红x、绿y、蓝z)
const axesHelper = new THREE.AxesHelper(1500);
scene.add(axesHelper);

1.创建自定义几何体

//1.1：创建顶点，加入到geometry中
let geometry = new THREE.Geometry();
let vertices = [
    new THREE.Vector3(0,200,0),
    new THREE.Vector3(-100,0,0),
    new THREE.Vector3(0,0,100),
    new THREE.Vector3(100,0,0),
    new THREE.Vector3(0,0,-100),
    new THREE.Vector3(0,-200,0)
];
geometry.vertices = vertices;

//1.2：使用顶点来创建几何体的各个三角面,加入到geometry中
let faces = [
    new THREE.Face3(0,1,2),
    new THREE.Face3(0,2,3),
    new THREE.Face3(0,3,4),
    new THREE.Face3(0,4,1),
    new THREE.Face3(5,2,1),
    new THREE.Face3(5,3,2),
    new THREE.Face3(5,4,3),
    new THREE.Face3(5,1,4),
];
geometry.faces = faces;

//	1.3：计算法向量
geometry.computeFaceNormals();//计算法向量 这决定了对光做出的反应

2.创建材质

let material = new THREE.MeshLambertMaterial({opacity: 0.8,color:0x44e144,transparent:true})

3.创建网格模型对象

let mesh = new THREE.Mesh(geometry, material);

4.网格模型对象加入到场景中

scene.add(mesh);

视频演示地址：https://www.bilibili.com/video/BV1hVy8YQEwv/