three.js(七)：内置的二维几何体

PlaneGeometry 矩形平面

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

import React, { useRef, useEffect } from "react";
import {
  BoxGeometry,
  BufferGeometry,
  CircleGeometry,
  ConeGeometry,
  CylinderGeometry,
  DirectionalLight,
  DodecahedronGeometry,
  EdgesGeometry,
  IcosahedronGeometry,
  Mesh,
  MeshBasicMaterial,
  MeshNormalMaterial,
  MeshPhongMaterial,
  OctahedronGeometry,
  PerspectiveCamera,
  PlaneGeometry,
  PolyhedronGeometry,
  RingGeometry,
  Scene,
  Shape,
  ShapeGeometry,
  WebGLRenderer,
} from "three";
import Stage from "../component/Stage";
import "./fullScreen.css";

const stage = new Stage(0, 0, 4);
const { scene, renderer } = stage;
// 替换这里的几何体即可
const geometry = new PlaneGeometry(0.5, 2, 2, 4);
{
  const material = new MeshNormalMaterial({
    polygonOffset: true,
    polygonOffsetFactor: 1,
    polygonOffsetUnits: 1,
  });
  const mesh = new Mesh(geometry, material);
  scene.add(mesh);
}
{
  const material = new MeshBasicMaterial({
    wireframe: true,
  });
  const mesh = new Mesh(geometry, material);
  scene.add(mesh);
}

const Geo2D: React.FC = (): JSX.Element => {
  const divRef = useRef<HTMLDivElement>(null);
  useEffect(() => {
    const { current } = divRef;
    if (current) {
      current.innerHTML = "";
      current.append(renderer.domElement);
      stage.animate();
    }
  }, []);
  return <div ref={divRef} className="canvasWrapper"></div>;
};

export default Geo2D;

CircleGeometry 圆形平面

• CircleGeometry(radius : Float, segments : Integer, thetaStart : Float, thetaLength : Float)
  • radius — 圆形的半径，默认值为1
  • segments — 分段（三角面）的数量，最小值为3，默认值为8。
  • thetaStart — 第一个分段的起始角度，默认为0。（three o’clock position）
  • thetaLength — 圆形扇区的中心角，通常被称为“θ”（西塔）。默认值是2*Pi，这使其成为一个完整的圆。

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

RingGeometry 圆环平面

• RingGeometry(innerRadius : Float, outerRadius : Float, thetaSegments : Integer, phiSegments : Integer, thetaStart : Float, thetaLength : Float)
  • innerRadius — 内部半径，默认值为0.5。
  • outerRadius — 外部半径，默认值为1。
  • thetaSegments — 圆环的分段数。这个值越大，圆环就越圆。最小值为3，默认值为8。
  • phiSegments — 最小值为1，默认值为8。
  • thetaStart — 起始角度，默认值为0。
  • thetaLength — 圆心角，默认值为Math.PI * 2。

const geometry = new RingGeometry(0.3, 0.6, 12, 2, Math.PI / 6, (Math.PI * 2) / 3);

## ShapeGeometry 二维图形

• ShapeGeometry(shapes : Array, curveSegments : Integer)
  • shapes — 一个单独的shape，或者一个包含形状的Array。
  • curveSegments - Integer - 每一个形状的分段数，默认值为12。

const shape = new Shape();
shape.moveTo(0, 0);
shape.bezierCurveTo(1, 1, -1, 1, 0, 0);
const geometry = new ShapeGeometry(shape);