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