ズームは動作しません

Question

私は「車輪」

私が扱う私はdiv要素のような単純な2Dアイコンをレンダリングした上で threejs（つまり、WebGLの）ビューアーを、持っていますイベントへのズームイン/ズームアウト元のソースコードで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イベントで使用するイベントプロパティを確認してください。