如何在 Three.js 中创建倾斜的圆柱体/圆锥体

Question

我正在努力弄清楚如何在 Three.js 中绘制倾斜的圆柱体。本质上，我想生成一个顶部半径为 r1 、底部半径为 r2 （即半径不同）的圆柱体，圆柱体的顶部和底部偏移特定因子，假设为 x。

我可能不想绘制 360 度的圆柱体，可能只想绘制其中的一部分（比如 90 度）。

我被已经存在的圆柱体函数所吸引，因为它勾选了我想要的大多数框，例如我可以给出开始和结束角度以及不同的顶部和底部半径。唯一的问题是试图实现顶部和底部之间的偏移。

我对 Three.js 相当陌生，所以可能有一些技术或方法可以实现这一点，但我尝试过搜索，但没有找到任何有帮助的东西。

Answer 1

您可以使用 CylinderGeometry 的自定义版本来实现此目的。

这里的代码大部分借自 CylinderGeometry ，但变化是不再定义开始和结束radius，您传入一个函数，该函数会为圆柱体的每个“层”调用，并且它需要返回一个 4 数字数组：[centerX、layerY、centerZ、radius]。

这允许具有不均匀高度和中心的圆柱体和圆锥体几何形状。

例如，在 CodeSandbox 的示例中，勾勒出这个，其功能是

const coordFunc = (i, t) => {
    const j = i / t; // 0 .. 1
    const x = Math.sin(j * 3) * 2;
    const y = Math.cos(j * 3) * 2;
    return [x, height / 2 - height * j, y, radius * (j * j) + 0.5];
};

，结果是一个时髦的螺旋花瓶：

对于倾斜的圆柱体，您需要更简单的东西：

return [j * 5, height * j, 0, radius];

产生

---

import {
  BufferGeometry,
  Float32BufferAttribute,
  Vector3,
  Vector2
} from "three";

export default class CustomCylinderGeometry extends BufferGeometry {
  constructor(
    heightSegmentFunction, // (i, t) => [x, y, z, radius]
    radialSegments = 8,
    heightSegments = 1,
    openEnded = false,
    thetaStart = 0,
    thetaLength = Math.PI * 2
  ) {
    super();
    this.type = "AdvancedCylinderGeometry";

    const scope = this;

    radialSegments = Math.floor(radialSegments);
    heightSegments = Math.floor(heightSegments);
    const [, , , radiusBottom] = heightSegmentFunction(0, heightSegments);
    const [, height, , radiusTop] = heightSegmentFunction(
      heightSegments,
      heightSegments
    );

    // buffers

    const indices = [];
    const vertices = [];
    const normals = [];
    const uvs = [];

    // helper variables

    let index = 0;
    const indexArray = [];
    let groupStart = 0;

    // generate geometry

    generateTorso();

    if (openEnded === false) {
      if (radiusTop > 0) generateCap(true);
      if (radiusBottom > 0) generateCap(false);
    }

    // build geometry

    this.setIndex(indices);
    this.setAttribute("position", new Float32BufferAttribute(vertices, 3));
    this.setAttribute("normal", new Float32BufferAttribute(normals, 3));
    this.setAttribute("uv", new Float32BufferAttribute(uvs, 2));

    function generateTorso() {
      const normal = new Vector3();
      const vertex = new Vector3();

      let groupCount = 0;

      // this will be used to calculate the normal
      const slope = (radiusBottom - radiusTop) / height;

      // generate vertices, normals and uvs

      for (let y = 0; y <= heightSegments; y++) {
        const [cx, cy, cz, radius] = heightSegmentFunction(y, heightSegments);
        const indexRow = [];

        const v = y / heightSegments;

        // calculate the radius of the current row

        //const radius = v * (radiusBottom - radiusTop) + radiusTop;

        for (let x = 0; x <= radialSegments; x++) {
          const u = x / radialSegments;
          const theta = u * thetaLength + thetaStart;
          const sinTheta = Math.sin(theta);
          const cosTheta = Math.cos(theta);
          vertex.x = cx + radius * sinTheta;
          vertex.y = cy;
          vertex.z = cz + radius * cosTheta;
          vertices.push(vertex.x, vertex.y, vertex.z);
          normal.set(sinTheta, slope, cosTheta).normalize();
          normals.push(normal.x, normal.y, normal.z); // TODO: probably not correct
          uvs.push(u, 1 - v);
          indexRow.push(index++);
        }
        indexArray.push(indexRow);
      }

      // generate indices

      for (let x = 0; x < radialSegments; x++) {
        for (let y = 0; y < heightSegments; y++) {
          // we use the index array to access the correct indices

          const a = indexArray[y][x];
          const b = indexArray[y + 1][x];
          const c = indexArray[y + 1][x + 1];
          const d = indexArray[y][x + 1];

          // faces

          indices.push(a, b, d);
          indices.push(b, c, d);

          // update group counter

          groupCount += 6;
        }
      }

      // add a group to the geometry. this will ensure multi material support

      scope.addGroup(groupStart, groupCount, 0);

      // calculate new start value for groups

      groupStart += groupCount;
    }

    function generateCap(top) {
      // save the index of the first center vertex
      const centerIndexStart = index;

      const uv = new Vector2();
      const vertex = new Vector3();

      let groupCount = 0;

      const sign = top === true ? 1 : -1;
      const [cx, cy, cz, radius] = heightSegmentFunction(
        top ? 0 : heightSegments,
        heightSegments
      );

      // first we generate the center vertex data of the cap.
      // because the geometry needs one set of uvs per face,
      // we must generate a center vertex per face/segment

      for (let x = 1; x <= radialSegments; x++) {
        vertices.push(cx, cy, cz);
        normals.push(0, sign, 0);
        uvs.push(0.5, 0.5);
        index++;
      }

      // save the index of the last center vertex
      const centerIndexEnd = index;

      // now we generate the surrounding vertices, normals and uvs

      for (let x = 0; x <= radialSegments; x++) {
        const u = x / radialSegments;
        const theta = u * thetaLength + thetaStart;

        const cosTheta = Math.cos(theta);
        const sinTheta = Math.sin(theta);
        vertex.x = cx + radius * sinTheta;
        vertex.y = cy;
        vertex.z = cz + radius * cosTheta;
        vertices.push(vertex.x, vertex.y, vertex.z);
        normals.push(0, sign, 0);
        uv.x = cosTheta * 0.5 + 0.5;
        uv.y = sinTheta * 0.5 * sign + 0.5;
        uvs.push(uv.x, uv.y);
        index++;
      }

      // generate indices

      for (let x = 0; x < radialSegments; x++) {
        const c = centerIndexStart + x;
        const i = centerIndexEnd + x;

        if (top === true) {
          indices.push(i, i + 1, c);
        } else {
          indices.push(i + 1, i, c);
        }

        groupCount += 3;
      }
      scope.addGroup(groupStart, groupCount, top === true ? 1 : 2);
      groupStart += groupCount;
    }
  }
}