Threejs如何在自定义形状中添加和输出曲线？答案

【问题标题】：Threejs How to Add in and Out curves in a custom shape?Threejs如何在自定义形状中添加和输出曲线？
【发布时间】：2020-03-16 15:53:54
【问题描述】：

我有一个用 3js 制作的简单形状，有 8 个点。形状没有曲线。我对 Threejs 中的 absarc 或曲线不太擅长。我试图在网上搜索，但我没有得到确切的例子。

我的形状输出：

虽然我需要这样的输出：

【问题讨论】：

标签： three.js

【解决方案1】：

只是一个选项，使用.absarc():

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 1, 100);
camera.position.set(0, 0, 6);
var renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);

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

var grid = new THREE.GridHelper(10, 10);
grid.rotation.x = -Math.PI * 0.5;
grid.position.set(0, 0, -0.01);
scene.add(grid);

var s = new THREE.Shape();
s.absarc(0, 0, 0.5, Math.PI * 0.5, -Math.PI * 0.5, true);
s.lineTo(0, -2);
s.absarc(-1, 0, Math.sqrt(2) * 2, -Math.PI * 0.25, Math.PI * 0.25, false);
s.lineTo(0, 2);

var sGeom = new THREE.ShapeBufferGeometry(s);
var sMat = new THREE.MeshBasicMaterial({
  color: "teal"
});
var shape = new THREE.Mesh(sGeom, sMat);
scene.add(shape);

var lineGeom = new THREE.BufferGeometry().setFromPoints(s.getPoints());
var lineMat = new THREE.LineBasicMaterial({
  color: "orange"
});
var outline = new THREE.LineLoop(lineGeom, lineMat);
scene.add(outline);

renderer.setAnimationLoop(() => {
  renderer.render(scene, camera);
});

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

【讨论】：

形状正是我所需要的。你能解释一下absarc函数吗？我无法得到它的详细信息。只有 Threejs 有它的定义，但我有很多问题。假设我的观点是（1,1）和（1,6）。我想要相同的曲线，我怎么知道半径、起始角度和结束角度的值？我想要每个参数的详细信息。我肯定会欣赏你的解释。
@USMANHEART 我回答了你的几个问题，并且在 cmets 中得到了更苛刻的问题，并且没有声誉积分。因此，我可以提供帮助的唯一方法就是指向互联网上的其他 SO 答案和论文。阅读：stackoverflow.com/q/22791951/4045502
你所有的答案我已经知道了。在问这里之前，我已经尝试过演示或示例。我需要其他没有在互联网上解释的东西。顺便说一句，我已经解决了。但是你提到的这个方法我已经试过了，对我来说没用
考虑使用CSG技术是最好的方法。