On mouseover tooltip message should display as ashown in below image.
root.position.x = 2;
const imageCanvas = document.createElement('canvas');
const imageContext = imageCanvas.getContext('2d');
let url = 'https://devum-client-public-bucket.s3.amazonaws.com/winterdev/images/images/Arrow'
const image = new Image();
image.crossOrigin = "*";
image.src = url;
image.onload = function () {
imageCanvas.width = image.width;
imageCanvas.height = image.height;
imageContext.drawImage(image, 0, 0, imageCanvas.width, imageCanvas.height);
const imageTexture = new THREE.CanvasTexture(imageCanvas);
const imageSpriteMaterial = new THREE.SpriteMaterial({
map: imageTexture,
alphaTest: 0.8,
color: 'rgb(165, 42, 42)'
});
const imageSprite = new THREE.Sprite(imageSpriteMaterial);
const imageSize = 2;
imageSprite.scale.set(imageSize, imageSize, 0);
root.add(imageSprite);
// Create a canvas and set up the context
const labelCanvas = document.createElement('canvas');
const labelContext = labelCanvas.getContext('2d');
// Measure text height to position correctly
const text = 'Hello World';
const textWidth = labelContext.measureText(text).width;
// Set canvas size
labelCanvas.width = textWidth + 500; // Adjust size as needed
labelCanvas.height = 256;
// Set the font properties
labelContext.font = '40px Arial';
labelContext.fillStyle = 'black';
labelContext.textAlign = 'center';
// Set textBaseline to 'top' to prevent cutting off at the top
labelContext.textBaseline = 'top';
labelContext.fillText(text, 25, 24); // Draw the text
// Create a texture from the canvas
const labelTexture = new THREE.CanvasTexture(labelCanvas);
// Create a sprite material using the texture
const labelMaterial = new THREE.SpriteMaterial({ map: labelTexture });
// Create the sprite and add it to the scene
const labelSprite = new THREE.Sprite(labelMaterial);
root.add(labelSprite);
scene.add(root);
}
}
In the current code, the label is always displayed, but in my use case, the text should only appear on mouseover. Can someone help me modify it?
In below example text is displaying top and bottom
https://codepen.io/prisoner849/pen/dPyKqVe
