我如何在反应三纤维中创建一个3D平面椭圆

Question

我正在进行一个使用React-three-Fiber制作3D对象的项目， 我正在尝试制作各种形状，并且在制作平坦的椭圆方面遇到了麻烦。 注意：我知道r3f和three.js基本上是相同的，但是在R3F中，我可以在标签中使用它，因此更容易。 感谢您的帮助。

Answer 1

这就是我在React函数组件中进行的方式：

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>
  );
}