0

I'm doing a project using react-three-fiber to make 3d objects, I'm trying to make sorts of shapes and I'm having trouble with making a flat ellipse. Note: I know r3f and three.js are basically the same but in r3f I can use it in tags so it's easier. Thanks for the help.

TBA
  • 1,921
  • 4
  • 13
  • 26
Alon
  • 1

1 Answers1

0

That's how I did it in a React function component:

import React from 'react';
import PropTypes from 'prop-types';

import { EllipseCurve } from 'three';

import { Line2 } from 'three/examples/jsm/lines/Line2';
import { LineMaterial } from 'three/examples/jsm/lines/LineMaterial';
import { LineGeometry } from 'three/examples/jsm/lines/LineGeometry';

import { extend } from '@react-three/fiber';

extend({ Line2 });

function Ellipse(props) {

  // geometry
  const geometry = new LineGeometry();
  const material = new LineMaterial({ color: props.color, linewidth: props.lineWidth });

  const curve = new EllipseCurve(
    0, 0, // xCenter, yCenter
    props.rx, props.ry, // xRadius, yRadius
    0, 2 * Math.PI, // aStartAngle, aEndAngle
    false, // aClockwise
    0 // aRotation
  );

  const points = curve.getPoints( 50 );

  const positions = points.reduce((acc, p) => {
    acc.push(p.x);
    acc.push(p.y);
    acc.push(0);

    return acc;
  }, []);

  // to get a closed curve, add first point at the end again
  positions.push(points[0].x);
  positions.push(points[0].y);
  positions.push(0);

  geometry.setPositions( positions);
  material.resolution.set(window.innerWidth, window.innerHeight);

  const position = [props.position.x, props.position.y, props.position.z];
  const quaternion = [props.orientation.x, props.orientation.y, props.orientation.z, props.orientation.w];

  return (
    <mesh
      { ...props }
      position={ position }
      quaternion={ quaternion }
    >
      <line2 geometry={ geometry } material={ material } />
    </mesh>
  );
}
anstel
  • 1