在three.js中将带孔的SVG路径转换为挤压形状

Posted 2023-02-23

【中文标题】在three.js中将带孔的SVG路径转换为挤压形状

【英文标题】：Converting SVG paths with holes to extruded shapes in three.js

【发布时间】：2013-04-13 15:40:05

【问题描述】：

我有一个由 4 个多边形组成的形状：2 个非孔和 2 个孔。这只是一个例子。实际上，可以有一个由 50 个多边形组成的形状，其中 20 个是非孔，30 个是孔。在 SVG 路径中，这种多边形可以通过结合 moveto:s 和 lineto:s 轻松表示。路径字符串中的每个子多边形（孔或非孔）以 moveto-command 开头并以 z（end）命令结束，非孔具有 CW 缠绕顺序和孔 CCW。非常简单直观。

SVG 中的形状是这样表示的 (http://jsbin.com/osoxev/1/edit)：

当我尝试在 three.js 中遵循相同的逻辑时，我遇到了问题。下图是这样的：

three.js 似乎不明白 moveto 是什么意思。它应该使“笔起来”并且在前一点和 moveto 命令点之间不画任何东西。但是“笔不上去”，形状就断了。

代码部分是这样的（不要混淆变量名，它们来自其他示例）：

// 创建字形形状（抱歉名称混淆）： var starPoints2 = new THREE.Shape(); // 添加第一个多边形 starPoints2.moveTo(307.94,275.49); starPoints2.lineTo(296.26,275.23); // ..... starPoints2.lineTo(286.64,272.99); starPoints2.lineTo(307.94,275.49); // 添加第二个多边形 starPoints2.moveTo(245.79,125.33); starPoints2.lineTo(232.93,124.53); // ..... starPoints2.lineTo(257.68,123.93); starPoints2.lineTo(245.79,125.33); // 为孔创建路径 var smileyEye1Path = new THREE.Path(); // 第一个洞 笑脸1Path.moveTo(221.69,258.13); 笑脸1Path.lineTo(215.2,255.08); // ..... 笑脸1Path.lineTo(230.57,259.43); 笑脸1Path.lineTo(221.69,258.13); //第二个洞 笑脸1Path.moveTo(238.44,116.65); 笑脸1Path.lineTo(231.99,114.29); // ..... 笑脸1Path.lineTo(246.81,116.94); 笑脸1Path.lineTo(238.44,116.65); // 为形状添加孔 var starShape = starPoints2; starShape.holes.push(smileyEye1Path); // 之后拉伸。在此处查看完整代码： // http://jsfiddle.net/pHn2B/33/

function() http://jsfiddle.net/pHn2B/33/

我在我的代码中做错了什么还是在 three.js 中有错误？

【参考方案1】：

您不能在形状定义的中间使用moveTo。你必须有两个不同的形状。你可以这样做：

var object = new THREE.Object3D();

var shape1 = new THREE.Shape();
var shape2 = new THREE.Shape();

var hole1 = new THREE.Path();
var hole2 = new THREE.Path();

shape1.holes.push( hole1 );
shape2.holes.push( hole2 );

. . .

object.add( mesh1 );
object.add( mesh2 );

scene.add( object );

小提琴：http://jsfiddle.net/pHn2B/34/

three.js r.58

附：友情提示：在未来，让人们更容易地帮助您将是一个好主意——编辑您的变量名称并从您的示例中删除不相关的代码。

【讨论】：

感谢您的回答。它工作得很好！因为我是 three.js 的新手，所以我很难处理带有多个孔的多个多边形并使用一个纹理将它们作为一个整体进行纹理化：***.com/questions/16124691/…。感谢您对此提供的任何帮助，并且我认为答案也可以帮助其他有类似问题的人。