请求协助在React Three Fiber中创建符合要求的梯形3D模型

需求说明 #

我需要创建一个满足以下要求的3D模型：

• 顶部宽度=4
• 底部宽度=8
• 仅包含四条边
• 高度分段数为4，宽度分段数为4

能否有人协助我在React Three Fiber中实现该模型？

我的尝试代码 #

const shape = new THREE.Shape();

shape.moveTo(-2, -5);
shape.lineTo(stemBottom * 2, -5);
shape.lineTo(-1.6 - -0.5 * stemToeOffset + stemTop, stemHeight - 5);
shape.lineTo(-1.6 - -0.5 * stemToeOffset, stemHeight - 5);

shape.closePath();
const extrudeSettings = {
  steps: stemVerticalBars,
  depth: 3.3,
  bevelEnabled: false,
  bevelThickness: 1,
  bevelSize: 1,
  bevelOffset: 0,
  bevelSegments: 1,
};

const stemGeometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);

<group
  rotation={[-0.1, 0.5, 0]}
  scale={[0.6, 0.6, 0.6]}
  position={[2.8, 1, 0]}
>
  <mesh
    position={[
      1.233 * baseToeLength - 7.4,
      (baseThickness - 1) * 0.5,
      -0.5,
    ]}
    geometry={geometry}
    scale={[0.3, 0.3, 0.3]}
  >
    <meshBasicMaterial color="#D9D9D9" wireframe />
  </mesh>

解决方案 #

你需要的是四棱台（截头四棱锥），直接用Three.js的CylinderGeometry就能完美匹配需求，无需手动绘制2D形状拉伸，代码更简洁且参数完全对应你的要求：

import { Canvas } from '@react-three/fiber';
import { CylinderGeometry, MeshBasicMaterial, Mesh } from 'three';

export default function App() {
  // 构造四棱台几何体：顶部半径2(对应宽度4)、底部半径4(对应宽度8)、高度(自定义为5)、边数4、高度分段4、径向分段4
  const pyramidGeometry = new CylinderGeometry(2, 4, 5, 4, 4);

  return (
    <Canvas>
      <ambientLight intensity={0.5} />
      <pointLight position={[10, 10, 10]} />
      <Mesh geometry={pyramidGeometry}>
        <MeshBasicMaterial color="#D9D9D9" wireframe />
      </Mesh>
    </Canvas>
  );
}

参数对应说明 #

• radiusTop: 2：顶部宽度为4，CylinderGeometry的半径是中心到边缘的距离，所以取宽度的一半
• radiusBottom: 4：底部宽度为8，同理取一半
• height: 5：模型整体高度，可根据实际需求调整数值
• radialSegments: 4：对应你要求的宽度分段数4，同时保证模型只有4条边
• heightSegments: 4：对应你要求的高度分段数4

如果需要调整模型的位置、旋转或缩放，直接在<Mesh>标签上添加对应属性即可，示例：

<Mesh 
  geometry={pyramidGeometry}
  position={[2.8, 1, 0]}
  rotation={[-0.1, 0.5, 0]}
  scale={[0.6, 0.6, 0.6]}
>
  <MeshBasicMaterial color="#D9D9D9" wireframe />
</Mesh>

内容的提问来源于stack exchange，提问作者Eyasu Emana