Having just started experimenting with three.js, I'm not entirely sure if I've made an error in my approach.
You can view my demo here (use the left and right arrow keys to navigate):
The issue I'm facing is that the "inner edges" are not visible: https://i.sstatic.net/i01fE.png
My goal is to create a "blocky" aesthetic using solid shapes with highlighted borders.
- So far, the most effective method I've discovered is utilizing BoxGeometry with a basic material and applying the outline with EdgesHelper.
- The shape parameter simply consists of a series of coordinates.
- I am uncertain about merging the resulting meshes together as I've been doing (this allows for easy removal from the scene later on and hasn't caused any issues thus far).
Below is the code snippet:
function draw_shape(shape, offset, colour) {
var mesh = new THREE.Mesh();
for (var i = 0; i < shape.length; i++) {
var geometry = new THREE.BoxGeometry(BLOCKSIZE, BLOCKSIZE, BLOCKSIZE);
var material = new THREE.MeshBasicMaterial({ color: colour });
var tmp = new THREE.Mesh(geometry, material);
tmp.position.x = shape[i][0] * BLOCKSIZE - offset[0];
tmp.position.y = shape[i][1] * BLOCKSIZE - offset[1];
tmp.position.z = shape[i][2] * BLOCKSIZE - offset[2];
mesh.add(tmp)
var outline = new THREE.EdgesHelper(tmp, 0x000000);
outline.material.linewidth = 2;
mesh.add(outline);
}
return mesh;
}
Thank you in advance for any assistance!