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/