ThreeJs创建圆环

ThreeJs除了创建基本的长方体，球形，圆柱等几何体，也可以创建一些特殊的几何体，比如圆环，多边体，这节就来讲怎么用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 提供了 TorusGeometry 类来创建圆环。其原理是通过数学公式来定义圆环的形状。

圆环可以看作是由一个大圆（半径为 R）沿着一个小圆（半径为 r）旋转一周所形成的立体图形。

在 TorusGeometry 中，我们可以通过指定大圆半径、小圆半径、大圆的分段数（segments）和小圆的分段数（rings）来控制圆环的形状。

radius - 圆环的半径，从圆环的中心到管的中心。默认为1。

tube --- 管的半径。默认为0.4。

radiusSegments --- 默认为12

tubeSegments --- 默认为48。

arc --- 中心角。默认为 Math.PI * 2。

代码如下：

复制代码

 //创建圆环
    initTorusGeometry(){
      // 创建环形几何体,圆环的半径为10，环的半径为3,
      const geometry = new THREE.TorusGeometry( 10, 3, 16, 100 );
      const material = new THREE.MeshBasicMaterial( { color: 0xffff00 } ); //材质为黄色
      const torus = new THREE.Mesh( geometry, material ); //通过几何体和材质创建网格模型
      this.scene.add( torus );
    },

最终效果如下

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

复制代码

const material = new THREE.MeshBasicMaterial( { color: 0xffff00 ,wireframe:true} ); //材质为黄色

以上一个圆环就绘制完成了。