Three.js, unexpected position shift when scaling object

Questions
1

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 : https://jsfiddle.net/1ewatknv/

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.

2

/cc

3

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.

4

@local_dev
“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.

3 Likes
5

Hi prisoner849, thanks for your answer.

Just get it done, here is the working fiddle : http://jsfiddle.net/dc9f5v0m/

Thanks again.