在Three.js中创建一个CubeGrid

Posted 2021-05-02

在Three.js中有一个GridHelper，可以让你轻松创建一个平面网格，就像这样：

var grid = new THREE.GridHelper(size, divisions, colorCenterLine, colorGrid);

你可以看到一个结果示例here。

我想要做的是创建一个盒子/立方体网格，如下所示：

我需要一个立方体，因为稍后我会想知道，例如，一个对象是否在多维数据集内（动态）。

我无法找到一个帮助我做我需要的东西，所以我的想法是采取GridHelper source code并使用BoxBufferGeometry而不是BufferGeometry，但我甚至不知道这是否可能。我想补充一点，我对3D图形领域的知识不多，我刚刚开始。

我很想听听你的想法：我正朝着正确的方向前进？你会如何解决这个问题？

答案

我终于使用了@WestLangley提出的方法：

var createBoxGrid = function (base, height, translateY, divisions, color) {
    boxGrid = new THREE.Group();
    boxGrid.name = "BoxGrid";
    var box3 = new THREE.Box3(new THREE.Vector3(-base / 2, 0, -base / 2), new THREE.Vector3(base / 2, height, base / 2));
    var box3Helper = new THREE.Box3Helper(box3, color);
    var gridHelper = new THREE.GridHelper(base, divisions, color, color);
    boxGrid.add(box3Helper);
    boxGrid.add(gridHelper);
    boxGrid.translateY(translateY);
    return boxGrid;
};