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 );
    },

效果如下:

相关推荐
gis分享者1 天前
学习threejs,使用MeshBasicMaterial基本网格材质
threejs·basicmaterial·基本网格材质
gis分享者5 天前
学习threejs,使用PointLight点光源
threejs·点光源·pointlight
gis分享者9 天前
学习threejs,使用HemisphereLight半球光
threejs·hemispherelight·半球光
mirrornan13 天前
web3D交互展示是什么?应用场景有哪些?
3d·web3·3d模型·web3d·3d展示
gis分享者14 天前
学习threejs,使用Lensflare模拟镜头眩光
threejs·lensflare·眩光
gis分享者16 天前
学习threejs,tga格式图片文件贴图
threejs·贴图·tga·tgaloader
gis分享者17 天前
学习threejs,pvr格式图片文件贴图
threejs·贴图·pvr
mirrornan1 个月前
3D可视化定制:开启个性化购物新时代,所见即所得
3d·3d模型·web3d
mirrornan1 个月前
产品Web3D交互展示有什么优势?
3d·3d模型·web3d·3d展示
gis分享者1 个月前
学习threejs,使用OrbitControls相机控制器
threejs·相机·相机控制器·orbitcontrols