在Three.js中为GridHelper对象添加对角线？

Question

第一张图片就是我想要的。 （我甚至也想要相反的对角线，但我会相应地得出它。）第二张图像是正常的GridHelper。

这可以通过添加另一个网格助手但沿y轴旋转45度来实现吗？

我似乎无法在official docs中找到任何内容，所以我假设有另一种方法。关于如何做到这一点的任何指示？

GridHelper的代码：

grid = new THREE.GridHelper(80, 15, 0x000000, 0x000000);
grid.position.y = -0.2;
scene.add(grid);

我认为可能的解决方案可能在于EdgesGeometry。我仍然不确定如何继续这样做，因为：

EdgesGeometry( geometry, thresholdAngle )

geometry是任何几何对象。

GridHelper是否算作几何对象？以下是official docs。

编辑： 以下是我目前情况的一个直观示例：codepen example。

Answer 1

使用THREE.PlaneBufferGeometry()和wireframe: true的素材会为您提供所需的结果。

＆＃13;

＆＃13;

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 50, 25);
var renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0xffffff);
document.body.appendChild(renderer.domElement);

var controls = new THREE.OrbitControls(camera, renderer.domElement);

var gridGeometry = new THREE.PlaneBufferGeometry(80, 80, 15, 15);
gridGeometry.rotateY(Math.PI);
gridGeometry.rotateX(-Math.PI * .5);
var gridMaterial = new THREE.MeshBasicMaterial({
  color: "black",
  wireframe: true
});
var gridWithDiagonals = new THREE.Mesh(gridGeometry, gridMaterial);
scene.add(gridWithDiagonals);

render();

function render() {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}

＆＃13;

body {
  overflow: hidden;
  margin: 0;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/88/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

＆＃13;

＆＃13;

＆＃13;