如何在react-three-fiber中创建一个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>
);
}