Three.js-生成带有弧形的形状

Question

我正在尝试在Three.js中重新创建一个螺丝元素，类似于下图：

我使用由一些点组成的形状和一个ExtrudeGeometry进行扭曲，以拉伸到正确的长度，然后扭曲网格，如本fiddle所示。

但是，我对生成正确形状的最佳方法感到困惑。从下面可以看出，形状应该由不同半径的圆弧组成，这些圆弧从一个点到另一个点延伸一定的角度：

这些弧的中心和半径定义得很好（图中未显示），但是我似乎只能使用带有Shape的Bezier曲线，这对于圆弧来说似乎过于复杂。我可以将ellipse与Path一起使用，但是似乎无法将Path转换为Shape，或者不被记录。

如何使用带有圆弧的Path / Shape / ShapePath生成形状，在该形状中可以指定中心，半径和延伸角度，然后在扭曲形状时将其拉伸？

Answer 1

只需选择如何使用THREE.Shape()即可：

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 0, 5);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var controls = new THREE.OrbitControls(camera, renderer.domElement);

var shape = new THREE.Shape();
shape.absarc(0, -4, 5, THREE.Math.degToRad(60), THREE.Math.degToRad(120));
shape.absarc(0, 4, 5, THREE.Math.degToRad(240), THREE.Math.degToRad(300));

var extrudeGeom = new THREE.ExtrudeGeometry(shape, {
  steps: 180,
  depth: 4,
  bevelEnabled: false
});

var axis = new THREE.Vector3(0, 0, 1);
extrudeGeom.vertices.forEach(v => {
  v.applyAxisAngle(axis, v.z * Math.PI);
});

extrudeGeom.computeFaceNormals();
extrudeGeom.computeVertexNormals();

var mesh = new THREE.Mesh(extrudeGeom, new THREE.MeshBasicMaterial({
  color: "red",
  wireframe: true
}));
mesh.rotation.y = Math.PI;

scene.add(mesh);

var profile = new THREE.LineLoop(new THREE.BufferGeometry().setFromPoints(shape.getPoints()), new THREE.LineBasicMaterial({
  color: "yellow",
  depthTest: false
}));
mesh.add(profile);


render();

function render() {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/95/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>