WebGL Three.jsコンテナがスクロールイベントを捕捉しないようにする

Question

フルスクリーンのthree.jsアプリケーションをバックグラウンドとして使用していて、スクロールできるようにするためにテキストをオーバーレイとして配置したい。

私の問題は、明らかにthree.js WebGLコンテナがすべてのスクロールイベントをキャッチし、オーバーレイするコンテンツをスクロールできないということです。

three.js-アプリケーションが私のCSS、<canvas>要素です：

canvas { 
    position: absolute; 
    top: 0; 
    left: 0; 
    pointer-events: none; 
    z-index: -9999; 
} 

これは、スクロールする必要があり、コンテンツの本体と親<div>要素です。

body { 
    display:block; 
} 

.page-content { 
    z-index: 1000; 
    padding: 0; 
} 

• どちらも体の直接の子です。

• スクリプトはコンテンツの後に実行されます。

どのように私は、スクロール（例えば、スクロールホイール）のイベントをキャッチThree.jsコンテナを防ぎ、.page-contentのdivに転送することができますか？

Answer 1

全体のスクロール処理を防止し、このCSS属性overflow: hidden;がありました。

Answer 2

これは実際にコントロールの問題です。 controls = new THREE.OrbitControls(camera, renderer.domElement);

そうでない場合は、the controls will set document as it's domainをし、すべてのイベントをキャッチ：

あなたが設定したいです。

だから、どちらかあなたが使用を制御する、それにrenderer.domElement部分を追加