变焦不起作用

Question

我有一个threejs（即webgl的）浏览器，在其上予呈现简单的2D图标作为div元素

予处理“车轮”事件到放大/缩小在我的模型上类似于trackballcontrols在原始源代码中所做的，并且它确实工作正常，除了一例。

这种情况是当我的鼠标悬停在这些2D div元素之一的“车轮”事件永远不会到达threejs观众和缩放不会发生

是否有默认的“轮”事件处理器为div元素，如果不是可能是什么问题？

编辑：

我发现“指针事件：无”是对这一问题的解决方案的一部分，但它也移除了这个div元素点击属性。我们如何解决它？

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;"> 
 
\t &nbsp; 
 
</div> 
 

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

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

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

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

您需要填写一些空白，以确保正确的信息被发送到TrackballControls事件，如车轮三角洲。看一看TrackballControls代码，看看它使用什么事件属性来处理wheel事件。