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 に答える