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

Question

First image is what I want. (I even want the opposite diagonal too, but I will derive that accordingly.) Second image is a normal GridHelper .

Would this be possible by adding another grid helper but rotated along the y-axis by 45 degrees?

I cannot seem to find anything in the official docs , so I am assuming that there is an alternate approach. Any pointers on how this could be done?

My code for the GridHelper :

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

I am thinking that a possible solution may lie in EdgesGeometry . I am still unsure about how to proceed with this, since:

EdgesGeometry( geometry, thresholdAngle )

Where geometry is any geometry object.

Does the GridHelper count as a geometry object? Here are the official docs .

EDIT: Here is a visual example of my current situation: codepen example .

Answer 1

Using of THREE.PlaneBufferGeometry() and a material with wireframe: true will give you the desired result.

 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); } 

 body { overflow: hidden; margin: 0; } 

 <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>