You have to provide vertex colors instead of the material color. Like this -
var lineMaterial = new THREE.LineBasicMaterial({ vertexColors: THREE.VertexColors});
And for each vertex, push the corresponding color. Like this -
geometry.colors.push(new THREE.Color("rgb(0, 0, 255)"), new THREE.Color("rgb(0, 0, 255)"));
And in the mouse hover handler, you need to get the index of the currently intersected line and change the color of that vertex. Like this -
intersects[0].object.geometry.colors[intersects[0].index].setHex(0xff0000);
let nextIndex = intersects[0].index + (intersects[0].index % 2 == 0 ? 1 : -1 );
intersects[0].object.geometry.colors[nextIndex].setHex(0xff0000);
intersects[0].object.geometry.colorsNeedUpdate = true;
Here is the simplified code based on your second version -
var container, scene, camera, renderer;
var mouse = new THREE.Vector2();
var intersected;
init();
animate();
function guid() {
function s4() {
return Math.floor((1 + Math.random()) * 0x10000)
.toString(16)
.substring(1);
}
return s4() + s4() + '-' + s4() + '-' + s4() + '-' +
s4() + '-' + s4() + s4() + s4();
}
function init() {
container = document.getElementById("myDiv");
scene = new THREE.Scene();
scene.background = new THREE.Color(0xf7f7f7);
var WIDTH = container.clientWidth,
HEIGHT = container.clientHeight;
renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
renderer.setSize(WIDTH, HEIGHT);
container.appendChild(renderer.domElement);
camera = new THREE.PerspectiveCamera(45, WIDTH / HEIGHT, 0.1, 20000);
camera.up.set(0, 0, 1);
camera.lookAt(scene.position);
camera.position.set(0, 0, 100);
var nsize = 1, nspace = 5, nrange;
nrange = nsize * nspace;
var i, j, x, y, z = 0;
var lineMaterial = new THREE.LineBasicMaterial({ vertexColors: THREE.VertexColors});
var geometry = new THREE.Geometry();
for (i = 0; i <= nsize; i++) {
for (j = 0, x = 0, y = 0; j <= nsize; j++) {
geometry.vertices.push(new THREE.Vector3(x, y, z), new THREE.Vector3(x, y + nspace, z));
geometry.colors.push(new THREE.Color("rgb(0, 0, 255)"), new THREE.Color("rgb(0, 0, 255)"));
x += nspace;
}
for (j = 0, x = 0, y = 0; j <= nsize; j++) {
geometry.vertices.push(new THREE.Vector3(x, y, z), new THREE.Vector3(x + nspace, y, z));
geometry.colors.push(new THREE.Color("rgb(0, 0, 255)"), new THREE.Color("rgb(0, 0, 255)"));
y += nspace;
}
z += nspace;
}
y = -10;
for (i = 0; i <= nsize; i++) {
for (j = 0, x = 0, z = 0; j <= nsize; j++) {
geometry.vertices.push(new THREE.Vector3(x, y, z), new THREE.Vector3(x, y, z + nspace));
geometry.colors.push(new THREE.Color("rgb(0, 0, 255)"), new THREE.Color("rgb(0, 0, 255)"));
x += nspace;
}
for (j = 0, x = 0, z = 0; j <= nsize; j++) {
geometry.vertices.push(new THREE.Vector3(x, y, z), new THREE.Vector3(x + nspace, y, z));
geometry.colors.push(new THREE.Color("rgb(0, 0, 255)"), new THREE.Color("rgb(0, 0, 255)"));
z += nspace;
}
y += nspace;
}
var lineMesh = new THREE.LineSegments(geometry, lineMaterial);
lineMesh.name = guid();
lineMesh.position.x = -(nsize * nspace) / 2;
lineMesh.position.y = -(nsize * nspace) / 2;
lineMesh.position.z = -(nsize * nspace) / 2;
scene.add(lineMesh);
}
function animate() {
requestAnimationFrame(animate);
// Render the scene.
render();
}
function onMouseMove(event) {
event.preventDefault();
// calculate mouse position in normalized device coordinates
// (-1 to +1) for both components
mouse.x = (event.clientX / container.clientWidth) * 2 - 1;
mouse.y = - (event.clientY / container.clientHeight) * 2 + 1;
if (mouse !== null && camera !== null) {
var ray = new THREE.Raycaster();
ray.setFromCamera(mouse, camera);
var intersects = ray.intersectObjects(scene.children);
if (intersects.length > 0) {
intersects[0].object.geometry.colors[intersects[0].index].setHex(0xff0000);
let nextIndex = intersects[0].index + (intersects[0].index % 2 == 0 ? 1 : -1 );
intersects[0].object.geometry.colors[nextIndex].setHex(0xff0000);
intersects[0].object.geometry.colorsNeedUpdate = true;
}
}
}
function render() {
renderer.render(scene, camera);
}
container.addEventListener('mousemove', onMouseMove, false);
Alternative of the raycaster, you can use GPU picking to identify the intersected line.