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?

1 Answer 1

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

Sign up to request clarification or add additional context in comments.

3 Comments

Can I do that without moving the geometry to the origin?
@HoangHuynh You need to make a new post if you have a question.
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)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.