three.js transformControls falsche Position

Question

ich eine Box von jenem Code erstellen:

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

dann verwende ich THREE.transformControls, aber es hat nicht auf dem Netz erscheinen, und immer in der Mitte der Szene

wenn ich die Matrix der Box oder etwas setzen muss?

Answer 1

In diesem Fall ist es besser, Ihr Netz zu übersetzen, nicht seine Geometrie.

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

und dann übersetzen Sie nur das Netz

mesh.position.x = -105; 

UPD Wenn unmöglich ist Eckpunkte zu ändern zum Zeitpunkt der Erstellung koordiniert, dann können Sie den Schwerpunkt Ihrer Geometrie zu finden, verwenden dann .center() Verfahren und Übersetzen Sie dann Ihr Netz an die Position des zuvor gefundenen Schwerpunkts.

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

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

jsfiddle Beispiel R87