CODEWITHSUNDEEP
three.js
Arnaud Coutant
Arnaud Coutant

Reputation: 11

ThreeJS, position always at 0

I am currently looking to move a group of meshes (SVG Generated) to the center of another group.

My idea was to get the center of each group using THREE.Box3().setFromObject(object) then targetGroup.getCenter(new THREE.Vector3()). With these value I was expecting to translate the group1 from his position to target group position.

While debugging, I noticed my getCenterPosition return strange value (close to 0).

On the image below, group to move is on the top left, the target in red on the bottom. I set set a Box3Helper.

Group to move (boundingbox) CenterPosition: Vector3 {x: -0.004398348423150218, y: 0.00022432082242505923, z: 0.0027393759509619607}

Target group (boundingbox) CenterPosition: Vector3 {x: 5.587946771967722e-12, y: 0.0006499991202629932, z: -0.0027500010742406884}

Group to move, group position: position > Vector3 {x: 8.881784197001252e-16, y: 0, z: 0}

Target group, mesh position; position > Vector3 {x: 8.881784197001252e-16, y: 0, z: 0}

Mesh and group to move position has same value (close to 0), like all other meshes or groups in my scene.

Expected translate value should be around: x:5, y:5.5, z, 0.5 I am currently far of this value, even with a scaling factor I would have forgotten.

Is there something to do get correct bounding box position ? Scene has been uploaded from glb.

box

When I scale at 0.5 this group of meshes; From: enter image description here

To: enter image description here

Scaling does not occur around the axis center. That can explain my issue but how I solve it ?

Solution I found was to update all position for each children of my SVG meshes:

// Get group's size const box = new THREE.Box3().setFromObject(svgGroup); const size = new THREE.Vector3(); box.getSize(size);

const yOffset = size.y / -2; const xOffset = size.x / -2;

// Offset all of group's elements, to center them svgGroup.children.forEach(item => {   item.position.x = xOffset;   item.position.y = yOffset; });

Upvotes: 0

Views: 231

Answers (1)

Arnaud Coutant
Arnaud Coutant

Reputation: 11

I found the solution. I followed this blog to have a clean SVG loaded group: https://muffinman.io/blog/three-js-extrude-svg-path/.

And now all reference are well calculate.

Upvotes: 0

Related Questions