CODEWITHSUNDEEP
javascriptjqueryhtmlcssthree.js
sp497
sp497

Reputation: 2491

Zoom does not work when mouse pointer is over a "div" element

I have a threejs (i.e webgl) viewer, on which I render simple 2D icons as div elements

I handle "wheel" event to zoomin/zoomout over my models similar to what trackballcontrols does in the original source code and it does work fine except for one case.

This case is when my mouse is hovering over one of these 2D div elements the "wheel" event never reaches the threejs viewer and zoom does not take place

Is there a default "wheel" event handler for a div element and if not what could be the issue?

Edit:

I found that "pointer-events: none" is one part of solution for this problem but it also removed the click property from this div element. How do we solve it?

Upvotes: 0

Views: 189

Answers (1)

TheJim01
TheJim01

Reputation: 8866

This is not really a three.js issue, and more of a raw HTML/JavaScript problem.

You can force the wheel event to pass through by creating and dispatching a new event.

Consider the yellow div is your three.js canvas, and the green div is your "floating" div.

<div id="outer" style="border: 1px black solid; background: yellow; width: 200px; height: 200px; padding: 50px; position: relative;">
	&nbsp;
</div>

<div id="inner" style="border: 1px black solid; background: green; width: 100px; height: 100px; padding: 50px; position: absolute; top: 50px; left: 50px;">
	&nbsp;
</div>

<script>
	var outer = document.getElementById("outer");
	var inner = document.getElementById("inner");

	outer.addEventListener("wheel", function (e) {
		console.log("outer wheel event on ", e.currentTarget.id);
	});

	inner.addEventListener("wheel", function (e) {
		var evt = new MouseEvent("wheel", {
			view: window,
			bubbles: true,
			cancelable: true
		});
		outer.dispatchEvent(evt);
		console.log("inner wheel event on ", e.currentTarget.id);
	});
</script>

You'll need to fill in some of the blanks to ensure the proper information is sent to the TrackballControls events, such as the wheel delta. Take a peek at the TrackballControls code to see what event properties it uses for the wheel events.

Upvotes: 1

Related Questions