3

I am trying to scale a THREE.PlaneGeometry with slider events. In effect I am trying to implement a window blind. When I try to change the scale of the geometry with respect to handler, the blind scales uniformly on both sides. It should be fixed at the top and scale in one direction. I tried changing the coordinates of the origin of the Mesh and translating the Mesh by the difference. But it doesn't work. The scaling happens from the origin all the time and the Plane Geometry grows on either side.

Any idea of how I can make it scale on only one side?

user2101977
  • 113
  • 1
  • 9

1 Answers1

3

You need to translate your geometry so the top edge passes through the origin.

var geometry = new THREE.PlaneGeometry( 10, 10 );
geometry.applyMatrix( new THREE.Matrix4().makeTranslation( 0, - 10 / 2, 0 ) );

Now, when you scale your mesh, the top will remain fixed.

EDIT: There is now a built-in method you can use:

geometry.translate( 0, - 10 / 2, 0 );

three.js r.85

WestLangley
  • 102,557
  • 10
  • 276
  • 276
  • 1
    Can I do that without moving the geometry to the origin? – Hoang Huynh Jul 07 '15 at 06:58
  • @HoangHuynh You need to make a new post if you have a question. – WestLangley Jul 07 '15 at 17:14
  • If you are modifying the geometry of a mesh, remember you'll need to translate your mesh to be back at the original position. `mesh.geometry.applyMatrix( new THREE.Matrix4().makeTranslation( 0, - mesh.geometry.parameters.height / 2, 0 ) ); mesh.translateY(mesh.geometry.parameters.height / 2)` – Senica Gonzalez Apr 30 '17 at 23:51