为了创建Verge3D,我们大量修改了Three.js代码库,因此我们决定对API使用“v3d”前缀。但是,我们将尝试维护与Three.js的源代码兼容性。大多数基于Three.js的应用程序和示例都可以在Verge3D中运行,无需进行任何修改。
我们希望所有对象,无论它们与摄像机的距离如何,都显示相同的大小,即使调整了窗口的大小。解决此问题的关键公式是该公式针对给定距离的可见高度:
visible_height = 2 * Math.tan((Math.PI / 180) * camera.fov / 2) * distance_from_camera;
如果我们将窗口高度增加一定百分比,那么我们想要的是在所有距离处的可见高度都以相同百分比增加。不能通过更改相机位置来做到这一点。相反,您必须更改相机的视野。例子。
如果将Verge3D应用程序嵌入iframe元素中,则可能会遇到iOS设备上的特定问题,这会导致iframe的大小不断增加,超出浏览器窗口的范围。反过来,这可能导致WebGL崩溃。
要解决此问题,您可以使用以下代码段,该代码段将iframe调整为页面主体的尺寸,以防止该iframe超出页面范围。
<script>if (/(iPad|iPhone|iPod)/g.test(navigator.userAgent)) { var iframe = document.getElementById('myIframe'); function resize() { iframe.style.width = getComputedStyle(document.body).width; iframe.style.height = getComputedStyle(document.body).height; iframe.setAttribute('scrolling', 'no'); } iframe.addEventListener('resize', function(e) { resize(); }); resize();}</script>
当页面上的其他HTML获得焦点时,就会发生这种情况。要解决此问题,请尝试以下代码:
document.getElementById("my_iframe_id").focus();
其中my_iframe_id是iframe元素的ID。
联系客服