Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/373.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 在不更正网格位置的情况下,沿一个方向就地缩放三个.js几何体_Javascript_3d_Three.js - Fatal编程技术网

Javascript 在不更正网格位置的情况下,沿一个方向就地缩放三个.js几何体

Javascript 在不更正网格位置的情况下,沿一个方向就地缩放三个.js几何体,javascript,3d,three.js,Javascript,3d,Three.js,我们正在尝试构建“编辑手柄”,允许用户通过在8个位置(4个角+4个边)之一拖动来调整(投影)平面的大小。 这种大小调整应该只在拖动方向上缩放/拉伸曲面,因此默认的缩放机制three.js不会这样做,因为它会同时在两个相反的方向上缩放,如图所示 我已经阅读并尝试了很多,尤其是这两篇帖子: 跟着这些我就这样结束了 // preparing to resize into -x direction aka "left edge" // moving the geometry center to

我们正在尝试构建“编辑手柄”,允许用户通过在8个位置(4个角+4个边)之一拖动来调整(投影)平面的大小。 这种大小调整应该只在拖动方向上缩放/拉伸曲面,因此默认的缩放机制three.js不会这样做,因为它会同时在两个相反的方向上缩放,如图所示

我已经阅读并尝试了很多,尤其是这两篇帖子:

跟着这些我就这样结束了

// preparing to resize into -x direction aka "left edge"
// moving the geometry center to the right edge
mesh.geometry.translate(width/2, 0, 0);
mesh.geometry.scale(scaleX, 1, 1);
// moving the geometry center back to the middle 
// as more resizing might happen, into another direction, as per comment here: 
// https://stackoverflow.com/questions/26817717#comment74469004_26818522
mesh.geometry.translate(-(width/2 * scaleX), 0, 0);
结果不是我所期望的: 缩放再次发生在两个相反的方向上,因此平移相互抵消-因此,当中心/原点位于右边缘时,缩放不会发生,或者在我的一端存在误解

另一方面,这也很好

mesh.scale.set(scaleX, 1, 1);
mesh.position.x = (-width / 2);
但一次又一次地重置网格的位置确实让人感觉不舒服——而且我想我已经读到,缩放网格的性能较差,因为此变换会对每一帧重新应用(虽然可能会出错:),而底层几何体的变换会烘焙到数据中

我也看了一下四元数的来源,但由于它不能按我们想要的方式工作,而且我还没有完全掌握四元数的概念,所以我对它一无所知


所以我的问题是:有没有一种方法可以在不纠正网格位置的情况下进行就地单向调整大小?

正如您所发现的,有两种方法可以解决这个问题

  • 缩放
    几何图形
  • 缩放
    网格
    并调整其中心位置
  • 首先,让我们讨论一下选项1,我不推荐它,原因我稍后会解释清楚

    若要沿单个方向线性缩放几何体,仍需要沿缩放方向移动所有顶点。因此,对于每个顶点,你需要根据顶点接收的缩放量来计算它的新位置(最靠近缩放边的顶点移动最多,中间的顶点移动一半,并且缩放的另一边的顶点几乎不移动)。如果要进行实时缩放,可能需要进行大量计算

    现在考虑选项2:你改变整个网格的矩阵(这包括它的新位置)。就这样。矩阵被发送到GPU,由GPU处理其余部分。我相信你知道,GPU在数学(包括矩阵数学)方面非常出色,而JavaScript在这方面不太擅长,或者至少慢得多。执行矩阵操作对GPU来说没什么

    更不用说,变换矩阵就位后,始终可以获得顶点的世界位置:

    vertexCopy.set(myMesh.geometry.attributes.position.getX(index),
        myMesh.geometry.attributes.position.getY(index).
        myMesh.geometry.attributes.position.getZ(index));
    myMesh.localToWorld(vertexCopy);
    
    简介:

    如果有什么区别的话,操纵几何体比操纵变换矩阵更“粗糙”。这就像你在告诉系统如何画一个正方形的每个像素,而你可以简单地告诉它画一个正方形

  • 更新几何体在计算上非常昂贵。尽管顶点基本上是在之后“烘焙”的,但下一次操作将触发更多计算

  • 更新网格的矩阵很简单,并且将计算复杂性转移到GPU上,GPU处理这些信息不会有问题

  • 欢迎您选择适合您需求的方法,但根据您提供的信息,我非常推荐选项2

    第三个想法:


    你可能会使用变形目标来达到你想要的效果,但我对它们没有太多经验。你需要影响多个变形目标才能达到你想要的效果,但这仍然可能比操纵几何体要好,因为变形操纵将在GPU上完成。

    Ok,因此,为了避免混淆,是否有意让最后的选项与开始的选项顺序相反?写下后无法更改注释。。。首先,非常感谢您详细的回答。因此,为了避免混淆:是不是故意让最后的选项与开始的选项顺序相反。。。(请参见上文)接下来,您能给我举一个如何调整网格中心位置的示例吗?我不知道这也是可能的。除非你的意思是改变位置-使用
    .translate
    等。1)对不起,为了清晰起见,我已经调整了选项的顺序。责怪漫长的一天。:)2) 是的,我只是想平移网格以补偿新的比例。3) 我马上再做一次编辑。。。