Question

我有一个 threejs （即webgl）查看器，我将简单的2D图标渲染为 div元素

我在我的模型上处理 zoomin / zoomout 的“wheel”事件，类似于原始源代码中的trackballcontrols，除了一个案例之外它确实工作正常。

这种情况是当我的鼠标悬停在其中一个2D div元素上时，“wheel”事件永远不会到达threejs查看器并且不会进行缩放

div元素是否有默认“wheel”事件处理程序，如果不是，那可能是什么问题？

修改

我发现“pointer-events：none”是此问题解决方案的一部分，但它也从此div元素中删除了click属性。我们如何解决它？

Answer 1

这不是一个真正的three.js问题，而是更多原始的HTML / JavaScript问题。

您可以通过创建和分派新活动来强制wheel事件通过。

考虑黄色div是您的three.js canvas，绿色div是您的“浮动”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>

您需要填写一些空白以确保将正确的信息发送到TrackballControls事件，例如滚轮增量。查看TrackballControls代码，了解它为wheel事件使用的事件属性。

当鼠标指针位于“div”元素上时，缩放不起作用

1 个答案: