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()方法，然后将网格转换为先前找到的质心的位置。 / p>

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