javascript - 在 three.js 中更改 gridhelper 的宽度和高度？

Question

Gridhelper似乎只有使它成为正方形的尺寸。它不能是一个我可以定义宽度和高度的矩形，或者我可以在 three.js 中使用另一种方法来定义它吗？我认为它可能有“规模”，但这会使 split 扭曲。

var size = 50;
var divisions = 10;

var gridHelper = new THREE.GridHelper(size, divisions);
scene.add(gridHelper);

Answer 1

在 bocoup 找到解决方案:https://bocoup.com/blog/learning-three-js-with-real-world-challenges-that-have-already-been-solved

function createAGrid(opts) {
  var config = opts || {
    height: 500,
    width: 500,
    linesHeight: 10,
    linesWidth: 10,
    color: 0xDD006C
  };

  var material = new THREE.LineBasicMaterial({
    color: config.color,
    opacity: 0.2
  });

  var gridObject = new THREE.Object3D(),
    gridGeo = new THREE.Geometry(),
    stepw = 2 * config.width / config.linesWidth,
    steph = 2 * config.height / config.linesHeight;

  //width
  for (var i = -config.width; i <= config.width; i += stepw) {
    gridGeo.vertices.push(new THREE.Vector3(-config.height, i, 0));
    gridGeo.vertices.push(new THREE.Vector3(config.height, i, 0));

  }
  //height
  for (var i = -config.height; i <= config.height; i += steph) {
    gridGeo.vertices.push(new THREE.Vector3(i, -config.width, 0));
    gridGeo.vertices.push(new THREE.Vector3(i, config.width, 0));
  }

  var line = new THREE.Line(gridGeo, material, THREE.LinePieces);
  gridObject.add(line);

  return gridObject;
}

但不得不改变

var line = new THREE.Line(gridGeo, material, THREE.LinePieces);

(弃用)到

var line = new THREE.LineSegments(gridGeo, material);