My goal is to make objects stand out by changing their color when the mouse hovers over them, specifically a sphere. The issue I'm facing is that the highlighting works for the sphere, but then it seems stuck with it. When I hover over other objects, the color doesn't update as expected; it still reflects the original sphere's color.
To guide my implementation, I looked at the original Three.js example provided here: https://threejs.org/examples/#webgl_interactive_cubes
Naturally, I've removed most of the unnecessary code :)
export default {
name: 'ThreeTest',
data() {
return {
mouse: new THREE.Vector2(),
rayCaster: new THREE.Raycaster(),
spheres: [],
intersectHighlighted: null,
highlighted: null
};
},
methods: {
init() {
//Map Creation:
let map = document.getElementById('map');
this.mapDimensions = map.getBoundingClientRect();
this.mapWidth = this.mapDimensions.width;
this.mapHeight = this.mapDimensions.height;
this.scene = new THREE.Scene();
this.scene.background = new THREE.Color( 0xf0f0f0 );
//Camera:
this.camera = new THREE.PerspectiveCamera(
60,
this.mapWidth/this.mapHeight,
0.1,
1000,
);
this.camera.position.z = 3;
// renderer and canvas creation:
this.renderer = new THREE.WebGLRenderer();
this.renderer.setSize(this.mapWidth, this.mapHeight);
map.appendChild(this.renderer.domElement);
// EVENT LISTENERS:
map.addEventListener('mouseover', this.highlightPoi, false);
map.addEventListener('mouseover', this.mouseOverScene, false);
},
// HELPER FUNCTIONS:
mouseOverScene (event) {
event.preventDefault();
let rect = event.target.getBoundingClientRect();
let x = event.clientX - rect.left;
let y = event.clientY - rect.top;
this.mouse.x = ( x / this.mapWidth) * 2 - 1;
this.mouse.y = - ( y / this.mapHeight ) * 2 + 1;
this.rayCaster.setFromCamera(this.mouse, this.camera);
},
animate() {
requestAnimationFrame(this.animate);
this.render();
},
render() {
// find intersections
let highlighted = this.highlighted;
let renderedRaycaster = this.rayCaster;
renderedRaycaster.setFromCamera(this.mouse, this.camera);
let intersectHighlighted = this.intersectHighlighted;
intersectHighlighted = renderedRaycaster.intersectObjects(this.spheres);
if (intersectHighlighted.length > 0) {
console.log("I'm in if 1");
if (highlighted !== intersectHighlighted[0].object) {
if ( highlighted ) highlighted.material.color.setHex( highlighted.currentHex );
console.log("I'm in if 3");
highlighted = intersectHighlighted[0].object;
highlighted.currentHex = highlighted.material.color.getHex();
highlighted.material.emissive.setHex( 0xff0000 );
console.log(intersectHighlighted.length);
}
} else if (intersectHighlighted !== this.spheres.object) {
console.log("I'm in else");
if ( highlighted ) highlighted.material.color.setHex( highlighted.currentHex );
highlighted = null;
console.log(highlighted);
console.log(intersectHighlighted);
console.log(intersectHighlighted.length);
}
this.renderer.render(this.scene, this.camera);
},
},
EXPECTED RESULT: When hovering over the sphere with the mouse, it should change color to highlight and revert to its original color when not hovered over.
ACTUAL: It only highlights one sphere and does not return to the original color upon unhovering.