如何在 Three.js 中将 2d 路径转换为 3d 形状？答案

【问题标题】：how to convert a 2d path to a 3d shape in Three.js?如何在 Three.js 中将 2d 路径转换为 3d 形状？
【发布时间】：2013-03-02 06:54:52
【问题描述】：

我需要这个 3d：http://jsfiddle.net/dAdKm/
但是当我使用这段代码时：

var shape = new THREE.Shape();
shape.moveTo(20,20);
shape.bezierCurveTo(20, 100, 150, 100, 150, 20);
shape.moveTo(20,20);
shape.lineTo(20, 100);
shape.lineTo(150, 100);
shape.lineTo(150, 20);

var shape3d = shape.extrude(extrudeSettings);
var shapePoints = shape.createPointsGeometry();
var shapeSpacedPoints = shape.createSpacedPointsGeometry();
var material = new THREE.MeshBasicMaterial({ color: 0x0000ff });
var shapeMesh = new THREE.Mesh(shape3d, material);

结果与二维上下文结果不同，为什么？有什么问题？

【问题讨论】：

标签： javascript three.js webgl

【解决方案1】：

形状从 (20, 20) 开始，到 (150, 20)，然后“跳”回到 (20, 20)。

避免跳跃，试试这个形状定义：

var shape = new THREE.Shape();
shape.moveTo(20,20);
shape.bezierCurveTo(20, 100, 150, 100, 150, 20);
shape.lineTo(150, 100);
shape.lineTo(20, 100);
shape.moveTo(20,20);

【讨论】：