在Three.js中动态更改对象尺寸

Question

我正在使用dat.gui中的three.js库，以使用户与对象进行交互并修改其网格的尺寸。 当要更改网格尺寸时，大多数在线示例都使用scale ：

mesh.onChange(function(value){mesh.scale.x = value;});

该解决方案的问题在于，它不是非常用户友好的，并且在更改值object.position需要调整object.position 。 除此以外，还有其他可能性吗？ 如果您可以发布一个可行的替代方案并附上一个可行的例子？ 预先感谢您的回答。

Answer 1

解决问题的一个线索是了解对象的原点在哪里：对象的几何中心或某个角。 它也取决于规模操作的执行。

暂时忽略three.js，如果手动完成缩放操作，可以认为是三个不同的操作：

1 - translate the object center to the origin of your world coordinates
2 - multiply its vertex position matrix by your scale factor
3 - translate object back to original world location

因此，需要解决两个假设：

- is the ~center~ of your object at its geographic center or 
  at one of its corners

- do you want to scale (stretch) your object by expanding outwards from 
  its origin in all dimensions or simply extend outwards by retaining
  its current origin and ballooning its shape outwards

您需要表达什么行为？

....根据您的答案需要object.position