three.js - three.jsでビューポートをトリミングすることは可能ですか?

Question

真ん中に球体があり、カメラがその周りを回転しているシーンがあります。たとえば、球体が左または右に表示されるように、Three.JS でこのビューポートを切り取ることができるかどうか疑問に思っていました。

カメラを動かしたり、球体以外の点を見たりするつもりはありません。遠近感が歪むためです。レンダリングのクリップまたはクロップです。

これは可能ですか？

Answer 1

考えられる解決策の 1 つは、Three.js キャンバスの上に 2 番目のキャンバスを配置し、ブリットによって three.js シーンを 2 番目のキャンバスに再描画することです。

overlayCanvas.getContext('2d').drawImage(threeCanvas, 40, 40, 960, 960, 0, 0, 1200, 1200);

ドキュメントでdrawImage() のパラメーターについて詳しく読むことができますが、これは three.js キャンバスの特定の領域を切り取り、2 番目のキャンバスのより広い領域に引き延ばします。シーンを 2 回レンダリングするよりもはるかに高速で、必要なサイズで表示されます (多少引き伸ばされますが)。

ビューにトリミングする領域がセカンダリ キャンバスと同じサイズになるように、元の (three.js) シーンを通常表示されるサイズよりも大きいサイズで描画することで、ストレッチを軽減できます。