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