Three.js, unexpected position shift when scaling object

I’m trying to create a zoom box, so far I managed to translate the cursor positions from locale to world coordinates and create a box object around the cursor with the right uvs.

Here is my attempt :

Without scaling, the box is perfectly centered around the cursor, but if you toggle the scaling checkbox to set the scale zoomMesh.scale.set(1.5, 1.5, 1) , the box position shift the further you move the cursor from the scene center.

Am I messing any CSS like “transform origin” for three.js to center the scale around the object, or is there a better approach the get this kind of zoom effect ?

Thanks for your help.


Hi @Mugen87, thanks for pointing this out, I first posted this on “stackoverflow” didn’t get any feedback, so I’m reposting it here, a forum with a “three.js” centric community,
Hope I’m not violating any forum policy.

“Carbon copy” is just to let other users on the forum not to do useless job, answering questions that were already answered/solved on other resources :slight_smile:
By the way, you’ve got an answer on SO.


Hi prisoner849, thanks for your answer.

Just get it done, here is the working fiddle :

Thanks again.