Javascript 在不更正网格位置的情况下,沿一个方向就地缩放三个.js几何体
我们正在尝试构建“编辑手柄”,允许用户通过在8个位置(4个角+4个边)之一拖动来调整(投影)平面的大小。 这种大小调整应该只在拖动方向上缩放/拉伸曲面,因此默认的缩放机制three.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
// 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);
但一次又一次地重置网格的位置确实让人感觉不舒服——而且我想我已经读到,缩放网格的性能较差,因为此变换会对每一帧重新应用(虽然可能会出错:),而底层几何体的变换会烘焙到数据中
我也看了一下四元数的来源,但由于它不能按我们想要的方式工作,而且我还没有完全掌握四元数的概念,所以我对它一无所知
所以我的问题是:有没有一种方法可以在不纠正网格位置的情况下进行就地单向调整大小?正如您所发现的,有两种方法可以解决这个问题
几何图形
网格
并调整其中心位置vertexCopy.set(myMesh.geometry.attributes.position.getX(index),
myMesh.geometry.attributes.position.getY(index).
myMesh.geometry.attributes.position.getZ(index));
myMesh.localToWorld(vertexCopy);
简介:
如果有什么区别的话,操纵几何体比操纵变换矩阵更“粗糙”。这就像你在告诉系统如何画一个正方形的每个像素,而你可以简单地告诉它画一个正方形
你可能会使用变形目标来达到你想要的效果,但我对它们没有太多经验。你需要影响多个变形目标才能达到你想要的效果,但这仍然可能比操纵几何体要好,因为变形操纵将在GPU上完成。Ok,因此,为了避免混淆,是否有意让最后的选项与开始的选项顺序相反?写下后无法更改注释。。。首先,非常感谢您详细的回答。因此,为了避免混淆:是不是故意让最后的选项与开始的选项顺序相反。。。(请参见上文)接下来,您能给我举一个如何调整网格中心位置的示例吗?我不知道这也是可能的。除非你的意思是改变位置-使用
.translate
等。1)对不起,为了清晰起见,我已经调整了选项的顺序。责怪漫长的一天。:)2) 是的,我只是想平移网格以补偿新的比例。3) 我马上再做一次编辑。。。