Hi there,
I’ve searched the forum for clues about the problems I’m facing but couldn’t find any.
I’m new to threejs .
I’m trying to achieve an interactive scene where svgs are imported, drawn and extruded.
The svg part is working, the one where you scroll to navigate the camera on a path through the svgs is also working and so is the one where you can mouseover the svgs and it changes their color.
Each svg is added to a group which is then added to the scene (a transparent background is also added to the group so that the mouseover fires on the svg even if there is a void in it).
I then wanted to add a description above the svg (font is loaded through fontLoader and each text is added in each svg group) and have it appear on mouseover and that’s where I’m facing a problem :
the mouseover event is set on each group and works well regarding the svg color change however all the descriptions are revealed instead of just the one above the svg being hovered.
I’m using the gsap library this way :
group.addEventListener('mouseover', (event) => {gsap.to(event.target.children[1].material, {opacity:0, duration:0.5} );});
I’am also facing an issue with the camera Field Of View. Outside the FOV, the svg are not visible but my scene has a ground mirror (reflector) and the logo reflections are visible out of the FOV. Is there a way to remedy that ?
Also my old macbook pro fans are kinda screaming playing with this, should I add a condition for the animation loop to fire only when mouse is moving/scrolling for example ? I tried to fire it only on mouse scroll but animation was laggy (and interaction on mouseover/out was not working hence the idea to add a mousemove trigger)… Again I’m new to threejs so I might be doing this the wrong way.
Any help would be greatly appreciated, thanks for reading this long messy message.