three - 4 - threejs提供的内置几何体

认识three.js 提供的内置几何体

three.js 的内置几何体大致可分成以下几类：

• 二维几何体
  • PlaneGeometry 矩形平面
  • CircleGeometry 圆形平面
  • RingGeometry 圆环平面
  • ShapeGeometry 二维图形
• 三维几何体
  • BoxGeometry 立方体
  • TetrahedronGeometry 四面体
  • OctahedronGeometry 八面体
  • DodecahedronGeometry 十二面体
  • IcosahedronGeometry 二十面体
  • PolyhedronGeometry 多面体
  • SphereGeometry 球体
  • ConeGeometry 圆锥
  • CylinderGeometry 圆柱
  • TorusGeometry 三维圆环
  • TorusKnotGeometry 扭结
• 路径合成几何体
  • TubeGeometry 管道
  • LatheGeometry 车削
  • ExtrudeGeometry 挤压
• 线性几何体
  • WireframeGeometry 网格几何体
  • EdgesGeometry 边缘几何体

二维几何体

PlaneGeometry 矩形平面

如图：

PlaneGeometry(width : Float, height : Float, widthSegments : Integer, heightSegments : Integer)

• width — 平面沿着X轴的宽度。默认值是1。
• height — 平面沿着Y轴的高度。默认值是1。
• widthSegments — （可选）平面的宽度分段数，默认值是1。
• heightSegments — （可选）平面的高度分段数，默认值是1。

代码：

1. 建立一个Stage对象，把渲染器、场景、相机、轨道控制器和响应式布局都封装进去。这样在写例子的时候会比较方便、整洁。

• src/component/Stage.ts

import { PerspectiveCamera, Scene, WebGLRenderer } from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";

export default class Stage {
  // 渲染器
  renderer: WebGLRenderer;
  // 场景
  scene: Scene;
  // 相机
  camera: PerspectiveCamera;
  // 轨道控制器
  controls: OrbitControls;
  // 渲染之前
  beforeRender = (time: number = 0) => {};

  // 初始化场景
  constructor(x: number = 0, y: number = 0, z: number = 12) {
    this.scene = new Scene();
   
    // antialias：抗锯齿，渲染出来的图像没有小锯齿，但是同时渲染效率变低了。默认为false
    this.renderer = new WebGLRenderer({ antialias: true });
   
    // 设置canvas画布的像素尺寸，同时还做了自适应尺寸。
    const { clientWidth, clientHeight } = this.renderer.domElement;
    this.renderer.setSize(clientWidth * window.devicePixelRatio, window.clientHeight * devicePixelRatio, false);
    
    // 设置相机视口的宽高比
    this.camera = new PerspectiveCamera(45, clientWidth / clientHeight, 0.1, 1000);
    
    // 设置相机的位置
    this.camera.position.set(x, y, z);
    // 相机看向0, 0, 0点位置
    this.camera.lookAt(0, 0, 0);
	
	// 设置轨道控制器
    this.controls = new OrbitControls(this.camera, this.renderer.domElement);
  }

  // 响应式布局
  responsive() {
    const { renderer, camera } = this;
    if (this.resizeRendererToDisplaySize(renderer)) {
      const { clientWidth, clientHeight } = renderer.domElement;
      camera.aspect = clientWidth / clientHeight;
      // 更新投影矩阵
      camera.updateProjectionMatrix();
    }
  }

  // 重置渲染尺寸
  resizeRendererToDisplaySize(renderer: WebGLRenderer): boolean {
    const { width, height, clientWidth, clientHeight } = renderer.domElement;
    const [w, h] = [clientWidth * devicePixelRatio, clientHeight * devicePixelRatio];
    const needResize = width !== w || height !== h;
    if (needResize) {
      renderer.setSize(w, h, false);
    }
    return needResize;
  }

  // 连续渲染
  animate(time = 0) {
    this.responsive();
    this.beforeRender(time);
    this.renderer.render(this.scene, this.camera);
    requestAnimationFrame((time) => {
      this.animate(time);
    });
  }
}

绘制矩形平面：
src/component/Plane.ts

import React, {
   
    useRef, useEffect } from "react";
import {
   
   
  Mesh,
  MeshBasicMaterial,
  MeshNormalMaterial,
  PlaneGeometry,
} from "three";
import Stage from "../component/Stage";
import "./fullScreen.css";

// 实例化Stage对象
const stage = new Stage();
const {
   
    scene, renderer } = stage;

// PlaneGeometry：矩形平面
// 第一个参数：矩行面的画宽度，
// 第二个参数：矩形面的高度
// 第三个参数：宽方向的分段数量
// 第四个参数：高方向的分段数量
const geometry = new PlaneGeometry(0.5, 2, 2, 4);

// 圆形平面
const geometry = new CircleGeometry(0.5, 16, Math.PI / 2, Math.PI / 3);

// 圆环平面
const geometry = new Ring