Three.js concave shape from point cloud

I am currently struggling to create shapes in three.js dynamically from the point cloud. Hence I am using ConvexGeometry, it works perfectly fine for convex shapes and it is getting difficult when I need a concave shape.

I am drawing a line on the 2D plane (red line from screenshot) then I take all points from the line or curve, clone them, and rotate around the x axis. And now when I have a point cloud, I wish I could simply make a shape. Here are the results:
rendering shapes
As you can see 2nd and 3rd segments look good but for the first one mesh isn’t covering points as I need.
rendering concave shape
I need any suggestions or ideas on how to achieve the desired results.

Here is my component rendering a shape:

import { Vector3 } from "three";
import { ConvexGeometry } from "three/examples/jsm/Addons.js";

type PointsToGeometryProps = {
  pointsData: number[][];
};

export function PointsToGeometry({ pointsData }: PointsToGeometryProps) {
  const axis = new Vector3(1, 0, 0);
  const basePoints = pointsData.map((p) => new Vector3(p[0], p[1], p[2]));
  const rotations = 100;
  const points = [...basePoints];

  for (let i = 1; i <= rotations; i++) {
    const angle = (i * 2 * Math.PI) / rotations;
    const rotatedPoints = basePoints
      .map((p) => {
        if (!p.y) return;
        return p.clone().applyAxisAngle(axis, angle);
      })
      .filter((p) => p);

    points.push(...(rotatedPoints as Vector3[]));
  }

  const geometry = new ConvexGeometry(points);

  return (
      <mesh geometry={geometry}>
        <meshStandardMaterial />
      </mesh>
  );
}

Thanks in advance

  • 1

    Could you show your code so far?

    – 

  • Tbh relevant part to this question is just passing an array of Vector3 elements to the ConvexGeometry function and I am not sure what I can show to make it worth anything. Let me know what you need and in what form.

    – 

Leave a Comment