Looking to create a rectangular "support" grid that allows users to hover over and place objects on specific tiles. For example, hovering over (x:0 y:15) and clicking will result in an object being placed at (x:0 y:15).
https://i.sstatic.net/X0Rnu.png
This grid was initially created with a PlaneGeometry and displayed as a wireframe in version r58.
new THREE.PlaneGeometry(x, y, 16, 9);
var mat = new THREE.MeshBasicMaterial({
color: 0x004488,
wireframe: true
});
mat.color.r = r;
mat.color.g = g;
mat.color.b = b;
However, upon updating the code base to r94, triangles started appearing instead of quads for each tile of the plane.
I have attempted:
Drawing lines: I tried creating a rectangular version based on GridHelper's source code. The appearance is great, but the hit detection of a tile seems off. It appears that with lines, detection only occurs if the mouse is directly over a line. With PlaneGeometry, the entire tile area was properly detected.
Drawing a PlaneGeometry with a Texture: Another approach was using a PlaneGeometry with a custom texture like this:
let canvas = document.createElement('canvas');
let context = canvas.getContext('2d');
canvas.height = 32;
canvas.width = 32;
context.beginPath();
context.rect(0, 0, 32, 32);
context.lineWidth = 2;
context.strokeStyle = color.getStyle();
context.stroke();
// Using canvas contents for texture
let texture = new THREE.Texture(canvas);
texture.needsUpdate = true;
let material = new THREE.MeshBasicMaterial();
material.map = texture;
material.flatShading = true;
material.fog = false;
material.lights = false;
material.side = THREE.DoubleSide;
material.transparent = true;
return material;
While hit detection now works well, similar to r54, the appearance is not ideal when viewed from a flat angle:
https://i.sstatic.net/oxGE4.png
Seeking suggestions on creating a visually appealing grid that functions like a PlaneGeometry in terms of hit detection while ensuring only squares are drawn instead of triangles.
TL;DR; Need a grid that mimics PlaneGeometry (including hit detection) but displays squares instead of triangles.