Three.js如何将Object3D中心平移至其实际几何中心

你遇到的旋转偏移问题本质是对象局部坐标原点和几何中心不重合：

• 你生成10*10网格时，立方体的x坐标范围是-0.5 ~ 9.5、z坐标范围是-0.5 ~ 9.5（尺寸为1的立方体默认中心对齐自身坐标点，边缘会向外延伸0.5单位），整个网格的实际几何中心在(4.5, 0, 4.5)的位置
• 你创建的field这个Object3D默认局部原点在(0,0,0)，刚好落在网格的边角位置
• OrbitControls默认绕场景原点(0,0,0)旋转，自然不会对准网格中心

你可以选任意一种适合自己需求的方法：

方法1：生成网格时直接对齐中心（推荐） #

修改createGrid函数，在给立方体赋值坐标时做偏移，让整个网格的几何中心刚好落在field对象的局部原点上，后续不管怎么移动、旋转这个网格对象，操作都会以自身几何中心为基准，不会出现偏移问题：

function createGrid(x, y) {
    const field = new THREE.Object3D()
    // 计算居中需要的偏移量
    const offsetX = (x - 1) / 2
    const offsetZ = (y - 1) / 2

    for(let col = 0; col < x; col++){
        for (let row = 0; row < y; row++) {
            let cube = createCube()
            cube.position.x = col - offsetX
            cube.position.z = row - offsetZ
            // 如果你需要立方体底部对齐y=0平面（比如放在地面上），就打开下面这行注释
            // cube.position.y = 0.5

            field.add(cube)
        }
    }

    return field
}

用这个方法生成的网格，直接加到场景默认位置，OrbitControls就会自动绕网格中心旋转，不需要额外修改控制器配置。

方法2：直接修改控制器旋转目标 #

如果你不想调整现有立方体的坐标，可以在网格添加到场景后，通过包围盒计算出网格的实际中心，把OrbitControls的旋转目标对准这个中心即可：

// 初始化网格并添加到场景
const grid = createGrid(10, 10)
scene.add(grid)

// 计算网格的包围盒，拿到几何中心
const gridBox = new THREE.Box3().setFromObject(grid)
const gridCenter = new THREE.Vector3()
gridBox.getCenter(gridCenter)

// 修改控制器的旋转目标
controls.target.copy(gridCenter)
// 注意：修改控制器参数后必须调用update才会生效
controls.update()

• Three.js中所有3D对象的旋转、缩放默认都是绕自身局部原点(0,0,0)进行的，做对象组合时优先让几何中心和局部原点对齐，后续操作会少很多偏移问题
• Box3包围盒是计算对象几何范围的通用工具，不管是简单几何体还是多层级的复杂模型，都可以用setFromObject方法快速拿到准确的边界和中心坐标
• 每次修改OrbitControls的target、相机位置属性后，必须调用controls.update()，否则改动不会同步到视图

内容的提问来源于stack exchange，提问作者Beru