如何将 THREE.CatmullRomCurve3 转换为网格？答案

【问题标题】：How Can I Convert a THREE.CatmullRomCurve3 to a Mesh?如何将 THREE.CatmullRomCurve3 转换为网格？
【发布时间】：2018-09-03 11:26:35
【问题描述】：

我使用 THREE.js 和 CatmullRomCurve3 类创建了一个 3D 折线图，该类负责处理我想要的曲线和平滑。

不幸的是，现在我想把那条曲线变成一个网格，也许还可以挤出那个网格，看来我做不到。当我尝试这样的事情时：

    var geometry = new THREE.ShapeGeometry( curve );
    var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
    var mesh = new THREE.Mesh( geometry, material ) ;

我得到的错误证明曲线不是几何构造函数想要的：

 three.js:27731 Uncaught TypeError: shape.extractPoints is not a function
    at ExtrudeBufferGeometry.addShape (three.js:27731)
    at ExtrudeBufferGeometry.addShapeList (three.js:27656)
    at new ExtrudeBufferGeometry (three.js:27612)
    at new ChartTest (ChartTest.js:33)
    at createSceneSubjects (SceneManager.js:89)
    at new SceneManager (SceneManager.js:27)
    at main.js:16

我见过将曲线作为 extrudePath 参数传递的示例，例如：

var extrudeSettings = {
    steps           : 100,
    bevelEnabled    : false,
    extrudePath     : curve
};

但这需要将形状与 extrudeSettings 一起传递给 ExtrudeGeometry，但是当曲线已经定义了我想要的形状时，必须有一种比尝试创建单独的形状更直接的方法挤出。（这似乎也突出了路径，而不是它所描述的形状。）

任何帮助将不胜感激！

【问题讨论】：

有点不清楚你的问题是什么。您是在尝试创建丝带，还是实际的实体？听起来您有解决方案，但您不喜欢它的处理方式？
此外，您还可以添加图片，说明您拥有什么以及想要实现什么。

标签： javascript three.js geometry catmull-rom-curve

【解决方案1】：

ShapeGeometry 需要 THREE.Shape 类型的实例作为参数，而不是 THREE.Curve 类型的对象。此外，THREE.CatmullRomCurve3 是 3D 曲线，而 THREE.Shape 是 2D 实体。这意味着您的形状将始终是扁平的。您可以执行以下操作以使事情正常进行：

先对曲线进行采样，然后创建THREE.Shape 的实例。请记住，给定点的 z 坐标将被忽略。

const points = curve.getPoints( 64 );
const shape = new THREE.Shape( points );
const geometry = new THREE.ShapeGeometry( shape );

https://jsfiddle.net/f2Lommf5/3775/

three.js R91

【讨论】：

嗨，这似乎不适用于较新的版本（0.106.2）。请问你知道新版本是怎么做的吗？
“不工作”是什么意思？小提琴仍然使用最新版本R106。
很抱歉，我在代码中与 THREE.Geometry 混淆了。

【解决方案2】：

在这种情况下，如果你想要一种丝带，这里有一个粗略的概念来说明你如何做到这一点：

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(-0.5, 4, 5);
var renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

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

var curve = new THREE.CatmullRomCurve3(
  [
    new THREE.Vector3(-2, 2, 0),
    new THREE.Vector3(-1, 0.5, 0),
    new THREE.Vector3(0, 1, 0),
    new THREE.Vector3(1, 3, 0),
    new THREE.Vector3(2, 1, 0)
  ]
);

var pointsCount = 50;
var pointsCount1 = pointsCount + 1;
var points = curve.getPoints(pointsCount);

var pts = curve.getPoints(pointsCount);
var width = 2;
var widthSteps = 1;
let pts2 = curve.getPoints(pointsCount);
pts2.forEach(p => {
  p.z += width;
});
pts = pts.concat(pts2);

var ribbonGeom = new THREE.BufferGeometry().setFromPoints(pts);

var indices = [];
for (iy = 0; iy < widthSteps; iy++) { // the idea taken from PlaneBufferGeometry
  for (ix = 0; ix < pointsCount; ix++) {
    var a = ix + pointsCount1 * iy;
    var b = ix + pointsCount1 * (iy + 1);
    var c = (ix + 1) + pointsCount1 * (iy + 1);
    var d = (ix + 1) + pointsCount1 * iy;
    // faces
    indices.push(a, b, d);
    indices.push(b, c, d);
  }
}
ribbonGeom.setIndex(indices);
ribbonGeom.computeVertexNormals();

var ribbon = new THREE.Mesh(ribbonGeom, new THREE.MeshNormalMaterial({
  side: THREE.DoubleSide
}));
scene.add(ribbon);

var line = new THREE.Line(new THREE.BufferGeometry().setFromPoints(points), new THREE.LineBasicMaterial({
  color: "red",
  depthTest: false
}));
scene.add(line);

render();

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

body {
  overflow: hidden;
  margin: 0;
}

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

【讨论】：