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/

猜你喜欢

转载自blog.csdn.net/qq_44849312/article/details/143094476