three.js transformControls wrong position

Question

I create a box by those code:

let v = [
            new THREE.Vector3(-100,30,10),
            new THREE.Vector3(-100,30,-10),
            new THREE.Vector3(-100,-10,10),
            new THREE.Vector3(-100,-10,-10),
            new THREE.Vector3(-110,30,-10),
            new THREE.Vector3(-110,30,10),
            new THREE.Vector3(-110,-10,-10),
            new THREE.Vector3(-110,-10,10)
        ];
        let f = [
            new THREE.Face3(0,2,1),
            new THREE.Face3(2,3,1),
            new THREE.Face3(4,6,5),
            new THREE.Face3(6,7,5),
            new THREE.Face3(4,5,1),
            new THREE.Face3(5,0,1),
            new THREE.Face3(7,6,2),
            new THREE.Face3(6,3,2),
            new THREE.Face3(5,7,0),
            new THREE.Face3(7,2,0),
            new THREE.Face3(1,3,4),
            new THREE.Face3(3,6,4)
        ];
        let g = new THREE.Geometry();
        g.mergeVertices();
        g.vertices = v;g.faces = f;
        let m = new THREE.MeshBasicMaterial({color:0xff0000,side:THREE.DoubleSide});
        let mesh = new THREE.Mesh(g,m);
        scene.add(mesh);

then i use THREE.transformControls,but it didn't appear on the mesh,and always at the center of the scene
wrong position
if i need to set the box's matrix or something?

prisoner849 · Accepted Answer · 2017-09-13 09:03:05Z

1

In this case, it's better to translate your mesh, not its geometry.

let v = [
  new THREE.Vector3(5, 30, 10),
  new THREE.Vector3(5, 30, -10),
  new THREE.Vector3(5, -10, 10),
  new THREE.Vector3(5, -10, -10),
  new THREE.Vector3(-5, 30, -10),
  new THREE.Vector3(-5, 30, 10),
  new THREE.Vector3(-5, -10, -10),
  new THREE.Vector3(-5, -10, 10)
];

and then you just translate the mesh

mesh.position.x = -105;

UPD If is impossible to change vertices coordinates at the time of creation, then you can find the centroid of your geometry, then use .center() method and then translate your mesh to the position of the previously found centroid.

g.computeBoundingBox();
var centroid = new THREE.Vector3();
centroid.addVectors(g.boundingBox.min, g.boundingBox.max).divideScalar(2);
g.center();

...
mesh.position.copy(centroid);

jsfiddle example r87

edited Sep 13, 2017 at 9:03

answered Sep 13, 2017 at 8:31

prisoner849

17.7k4 gold badges40 silver badges74 bronze badges

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

3 Comments

wrsjhhe Over a year ago

thanks for your answer,I have tried your code,and transformControls helper is in the box.but the same problem,box's position has changed,it moved to the center of scene but that isn't what i want

wrsjhhe Over a year ago

i think problem is that,when i create a mesh,whatever it's vertices it's position is (0,0,0),and transformControls will appear at the mesh's position.but as we noticed the vertices,mesh's right position isn't(0,0,0),so the we'll see that the mesh isn't at "transformControls position(0,0,0)".

prisoner849 Over a year ago

Yes, correct. But it seems, that you mix up position of a mesh and coordinates of vertices in its geometry. The first one relates to coordinate system of its parent (a scene or another object), the second one relates to the local coordinate system of the mesh itself.

Collectives™ on Stack Overflow

three.js transformControls wrong position

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related