Javascript 3D CSS3场景的自动大小-计算3D div的像素大小？

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

如果没有自动方式，那么我有一个问题： “在相机前面”有一个尺寸为WxH的DIV，我使用translate3d（X，Y，Z）定位它，透视图为P。 如何计算屏幕上此DIV的实际大小（以像素为单位）

顺便说一句，我使用的是Chrome，如果你想缩放它，可以使用

scale3d

来缩放整个东西。测量屏幕大小并按需要的比例缩放您的div（例如，如果您的div为800x800，屏幕为1600x1200，则按2x缩放）

---

#2-getBoundingClientRect（）

下面的代码实现了这一点。 考虑到最初设计场景的窗口的大小（1920*965），此代码获取父容器的当前大小，并相对于原始1920*965缩放包含场景的Div。注意-它不会尝试对场景中的元素执行三维缩放，而是缩放包含整个场景的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();
    }

---

关于getBoundingClientRect（）的说法是正确的。非常感谢。关于自动缩放3D是有问题的。您无法缩放“整个对象”，因为同时缩放所有3个坐标只会使场景保持相同大小。根据当前角度缩放将调整场景大小，但会使自动调整大小非常复杂。