補償瀏覽器縮放Three.js CSSRenderer

Question

我正在使用CSSRenderer處理three.js中的項目，並且我被告知我需要在瀏覽器的縮放不是100％時正確顯示它。從我可以告訴：

• 有沒有辦法強制瀏覽器返回到100％
• 有沒有辦法來檢測一下縮放瀏覽器是（根據https://github.com/tombigel/detect-zoom）

我想也許如果我可以檢測到變焦我可以做一個css放大到另一個方向來補償，有點像在Vijey的帖子中提到的那樣：Changing the browser zoom level

鑑於此，似乎不可能顯示three.js場景適當地在非 - 100％縮放，我甚至無法顯示警告，告訴用戶應用程序將無法正常使用瀏覽器縮放比例。有人可以證明我錯了嗎？有誰知道是否有任何事情可以解決這個問題？

Answer 1

Three.js使用matrix3d（）函數應用轉換。 Chrome有一個known issue，因此使用matrix3D的3d轉換在瀏覽器縮放下無法正確縮放。

您可以看到一個錯誤here的示例。如果您更改縮放級別，您會注意到紅色和藍色框之間的邊界會發生變化。

解決方案是獨立應用轉換，使用旋轉，平移和縮放轉換。這種方法避免了Chrome的bug，並且按照expected（框之間的邊界在縮放級別之間是一致的）進行縮放。

這裏是一個更新的CSSRenderer，它使用這種技術並正確擴展。