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

在 Three.js 中，SphereGeometry用于创建球体几何形状。球体是一种在三维场景中非常常见的基本形状，可用于表示天体、球体模型等各种对象。使用SphereGeometry可以方便地创建不同大小和精度的球体。

• radius：球体的半径，默认为 1。决定了球体的大小。
• widthSegments：球体横向的分段数，默认为 32。增加这个值可以使球体表面更加光滑。
• heightSegments：球体纵向的分段数，默认为 16。同样，增加这个值可以提高球体的表面精度。
• phiStart：水平方向起始角度，以弧度表示，默认为 0。用于控制球体表面的起始位置。
• phiLength：水平方向的角度范围，以弧度表示，默认为 2π。决定了球体表面在水平方向上展开的角度范围。
• thetaStart：垂直方向起始角度，以弧度表示，默认为 0。
• thetaLength：垂直方向的角度范围，以弧度表示，默认为 π。通常保持默认值可以创建完整的球体，如果调整这个值，可以创建部分球体。

代码如下：

initSphereGeometry(){ //创建球体
      const geometry = new THREE.SphereGeometry( 1, 32, 32);
      const material = new THREE.MeshBasicMaterial( {color: '#CCCCCC'} );//创建材质，颜色为白色#CCCCCC
      const sphere = new THREE.Mesh( geometry, material );//通过geometry和材质创建网格模型
      this.scene.add( sphere ); //将网格模型添加到场景中
    },

但是因为颜色会纯色，看不出立体效果，我们将材质修改为只显示框架，只需要将材质修改为：

const material = new THREE.MeshBasicMaterial( {color: '#CCCCCC',wireframe:true} ); //创建材质，颜色为白色#CCCCCC