0

我使用 CSS3、HTML5 和 Javascript 创建了一个 3d 风景（迷宫）。我想根据屏幕尺寸自动调整风景，所以它适合不同尺寸的屏幕。最好的方法是什么？有没有办法自动调整风景/屏幕的大小？

如果没有自动方法，那么我有这个问题：“在相机前”有一个大小为 WxH 的 DIV，我使用 translate3d(X,Y,Z) 定位，透视图为 P。我如何计算实际这个 DIV 在屏幕上的像素大小？

顺便说一句 - 我正在使用 Chrome

4

2 回答 2

1

#1 - 如果你想缩放它，使用scale3d向上或向下缩放整个事物。测量屏幕尺寸并按您需要的任何比例缩放您的 div（例如，如果您有一个 800x800 的 div 并且屏幕为 1600x1200，则按 2 倍缩放）

#2 - getBoundingClientRect()

于 2012-10-16T02:12:39.020 回答
0

以下代码可以解决问题。考虑到最初设计场景的窗口大小（1920*965），此代码获取父容器的当前大小，并将包含场景的 Div 相对于原始 1920*965 进行缩放。注意 - 它不会尝试对场景内的元素执行 3D 缩放，而是缩放包含整个场景的 div，而里面的内容会自动调整大小。

另请注意，随着缩放父容器将场景从屏幕中心移开，代码如何使用负坐标将场景位置移动到左侧和顶部，以便将 Div 放置在正确的位置。

function resizeWin() {
        wW = ourDiv.parentNode.offsetWidth;
        wH = ourDiv.parentNode.offsetHeight;
        var scaler=Math.min(wW/1920, wH/965); // original screen was designed in full HD Chrome
        var w=wW/scaler;
        var h=wH/scaler;
        var left=(w-scaler*w)/2;
        var top=(h-scaler*h)/2;


        var style = "width:"+w+"px; height:"+h+"px;"+allStyles("-webkit-transform:  translate(-"+left+"px,-"+top+"px) scale("+scaler+");");

        ourDiv.setAttribute("style", style);
        redrawScene();
    }
于 2012-10-18T09:53:39.077 回答