Threejs创建正多边体
上一章节实现了球体的绘制，这节来绘制多面体，包括正多面体，平面中，每条边一样长组成的图形叫正多边形，这里每个面一样，叫正多面体。如上文一样，先要创建出基础的组件，包括场景，相机，灯光，渲染器。代码如下：
initScene() {
this.scene = new THREE.Scene();//创建一个Scene场景
},
initLight(){
const light = new THREE.DirectionalLight(0xffffff, 1);//创建一个灯光
this.scene.add(light)
},
initCamera(){
//创建一个透视相机，视角为45度，宽高比为window窗口的宽高比，0.1为近面，10000为远面
this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 10000);
this.camera.position.set(50,50,50);//设置相机位置
this.camera.lookAt(0,0,0);//设置相机位置
},
initRenderer(){//初始化渲染器
this.renderer = new THREE.WebGLRenderer({ antialias: true });
this.container = document.getElementById("container");//获取容器
this.renderer.setSize(this.container.clientWidth, this.container.clientHeight);//设置渲染器的大小
this.container.appendChild(this.renderer.domElement);//将渲染器添加到容器中
this.renderer.setClearColor('#FFFFFF', 1.0);//设置背景颜色
},
initOrbitControls(){ //创建鼠标控制工具
this.orbitControls = new OrbitControls(this.camera, this.renderer.domElement);//创建控制器
},
initAnimate() { //循环渲染
requestAnimationFrame(this.initAnimate);
this.renderer.render(this.scene, this.camera);
},首先绘制一个正四面体，正四面体可以想象得到就是一个三棱锥，只有每面是三角形才能四个面组成一个体。
TetrahedronGeometry的构造函数接受两个参数：
radius（半径）：这个参数定义了四面体的外接球半径，它决定了四面体的整体大小detail（细节级别）：这个可选参数用于细分四面体的面，以增加几何形状的细节。默认值为 0，表示不进行细分。
代码如下：
initTetrahedronGeometry(){ //四面缓冲几何体
const geometry = new THREE.TetrahedronGeometry( 1 );
const material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );
const dodecahedron = new THREE.Mesh( geometry, material );
this.scene.add( dodecahedron );
},效果如下：
OctahedronGeometry（八面体几何）是 Three.js 中用于创建八面体模型的几何类。八面体是一种具有八个面的多面体，每个面都是等边三角形，TetrahedronGeometry的构造函数接受两个参数：
radius（半径）：这个参数定义了四面体的外接球半径，它决定了四面体的整体大小detail（细节级别）：这个可选参数用于细分四面体的面，以增加几何形状的细节。默认值为 0，表示不进行细分。
代码如下：
initOctahedronGeometry(){ //八面缓冲几何体
const geometry = new THREE.OctahedronGeometry( 1 );
const material = new THREE.MeshBasicMaterial( {color: 0x00ff00,wireframe:true} );
const dodecahedron = new THREE.Mesh( geometry, material );
this.scene.add( dodecahedron );
},效果如下：
DodecahedronGeometry（十二面体几何）是 Three.js 中用于创建十二面体模型的几何类。十二面体是一种具有 12 个面的多面体，每个面都是正五边形。
radius（半径）：确定十二面体的外接球半径，从而决定十二面体的整体大小。detail（细分层级）：可选参数，默认值为 0。它控制几何体的细分程度，当detail值大于 0 时，十二面体的每个面会被细分成更多的小三角形，增加几何形状的细节和复杂度。数值越大，细分程度越高。
代码如下：
initDodecahedronGeometry(){ //十二面缓冲几何体
const geometry = new THREE.DodecahedronGeometry( 1 );
const material = new THREE.MeshBasicMaterial( {color: 0x00ff00,wireframe:true} );
const dodecahedron = new THREE.Mesh( geometry, material );
this.scene.add( dodecahedron );
},效果如下：
IcosahedronGeometry（二十面体几何）是 Three.js 中的一个几何类，用于构建二十面体的几何形状。二十面体是一种具有 20 个等边三角形面的多面体。
radius（半径）：这一参数定义了二十面体的外接球半径，它决定了二十面体的整体大小。detail（细节层级）：这是一个可选参数，默认值为 0。通过调整这个参数，可以对二十面体的每个面进行细分，以增加几何形状的细节。当detail为 1 时，每个面将被进一步细分成更小的三角形，从而使整个二十面体看起来更加复杂和精细。
代码如下：
initIcosahedronGeometry(){ //二十面缓冲几何体
const geometry = new THREE.IcosahedronGeometry( 1 );
const material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );
const dodecahedron = new THREE.Mesh( geometry, material );
this.scene.add( dodecahedron );
},效果如下:
