變焦不起作用

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事件。