three.js所transformControls错误的位置

Question

我那些代码创建盒：

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); 

然后我用THREE.transformControls，但它并没有在现场
中心出现在网格，并始终
如果我需要设置框的矩阵或什么的？

Answer 1

在这种情况下，最好翻译一下网格，而不是它的几何体。

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) 
]; 

，然后你只是翻译网

mesh.position.x = -105; 

UPD如果是不可能改变的顶点在创建时间坐标，那么你可以找到你的几何图形的重心，然后使用.center()方法然后将网格转换为先前找到的质心的位置。

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

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

jsfiddle例如R87