three.jsmousehover

How to appear/disappear Text on the boxgeometry using mouse hover in Threejs


I've created text on all the sides of the boxgeometry using below lines of code:-

  var canvas = document.createElement('canvas');
  var ctx = canvas.getContext('2d');
  ctx.filltext ("Alok", 0, 9);

but I want text should only be visible when we take the cursor on boxgeometry and disable the text when we remove the cursor. If anyone has any advice, any help would be greatly appreciated!


Solution

  • It finally worked , I've used raycaster in which i'm calling the function for text and using "mousemove"

         document.addEventListener ("mousemove",( event ) => {
         var vector = new THREE.Vector3(); 
         pointer.x = ( event.clientX / window.innerWidth ) * 2 - 1;
         pointer.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
         raycaster.set( camera.position, vector.sub( camera.position 
         ).normalize() );
    
         this.textfunction();
         }