Addition of Div on the image texture and it must move when we move the sphere

Questions
1 
function onMouseClick(event) {
	event.preventDefault();

	// Calculate normalized device coordinates (NDC) from mouse coordinates
	const mouse = new THREE.Vector2();
	mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
	mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

	// Create a ray from the camera through the mouse's NDC
	const raycaster = new THREE.Raycaster();
	raycaster.setFromCamera(mouse, camera);

	// Intersect the ray with the sphere
	const intersects = raycaster.intersectObject(mesh);
	console.log(intersects[0].uv);

	const inputDiv = document.createElement('div');
	inputDiv.style.position = 'absolute';
	inputDiv.style.zIndex = '1';

	inputDiv.style.left = intersects[0].uv.x + "px";
	inputDiv.style.top = intersects[0].uv.y + "px";
	
	// Create an input text box element and add it to the div
	const inputBox = document.createElement('input');
	inputBox.style.position = 'absolute'
	inputBox.style.width = '200px';
	inputBox.style.height = '60px';
	inputBox.style.border = '1.5px solid black';
	inputBox.style.borderRadius = '5px';
	inputBox.type = 'text';
	inputBox.style.display = "block";
	inputDiv.appendChild(inputBox);

	// Append the div to the document body
	document.body.appendChild(inputDiv);

	// Add an event listener to handle input text changes
	inputBox.addEventListener('input', function () {
		const xValue = parseFloat(inputBox.value); // Parse the X coordinate from the input
		// You can use xValue for your desired purpose
		console.log(xValue);
	});

	// Remove the div when you're done with it (e.g., when you click outside of it)
	document.addEventListener('dblclick', function (e) {
		if (!inputDiv.contains(e.target)) {
			document.body.removeChild(inputDiv);
		}
	});
}
 window.addEventListener('dblclick', onMouseClick);

This is my code

2

how can we do it

3

It’s quite unclear exactly what you’re asking, it would be best if you provided some reference images of what you’re trying to achieve along with a nicely formatted question, it’s quite difficult to deduct what result you’re expecting from the code you have provided as it only partially seems to relate to the title…

if you need to preserve the input functionality of the inputBox, the common option would be to use the CSS3DRenderer class, this wouldn’t have the option of being used as an addition to an image texture as it is HTML and not a texture… if you do not need to preserve the input functionality and just need to serve an image texture you could use a library such as html2canvas which you could then apply as a CanvasTexture onto your object…

1 Like