7

ページを完全に 3D 空間にしたいのですが、3D についてはよくわかりませんが、ボディをビューポートにし、世界は変換されたコンテンツが存在する div にすることを考えています。方向と位置のベクトル (またはカメラ オブジェクト?) をパラメーターとして取り、内部的に CSS 変換を使用してワールド div を変換し、画面がページの目的の部分に面するようにする関数が必要です。例のページ、シンプルな部屋。

<body>
    <div id="world">
        <section id="left-wall">...</section>
        <section id="right-wall">...</section>
        <section id="front-wall">...</section>
        <section id="floor">...</section>
    </div>
</body>

スクリプト。

var cam = Camera(),
    world = document.getElementById("world");
cam.setPosition([x,y,z]);
cam.setOrientation([x,y,z]);
transform(world,cam); // world gets transformed

機能はどうtransform()ですか？それが正しいアプローチなのか、それとも別の方法で行うべきなのかはわかりません。

4

1 に答える 1

16

Keith Clark の CSS3 一人称シューティング ゲームは、次のような HTML 構造を使用しているようです。

<div id="viewport">
    <div id="camera">
        <div id="assembly">
            <!-- Geometry elements inside here -->
        </div>
    </div>
</div>

彼のデモでは、「カメラ」が回転を処理しますが、動きは残りの要素のコンテナである「アセンブリ」を変換することによって処理されます。これの重要な部分は、ビューポートに遠近法を適用し、カメラに 3D を保持して、内部で真の 3D 空間が使用されるようにすることです。

#viewport {
    -webkit-perspective: 700px;
}
#camera {
    -webkit-transform-style: preserve-3d;
}

preserve-3dアセンブリ内にネストされたジオメトリ要素は、スタイルにより、アセンブリの位置を基準にして解釈される 3D 変換を持ちます。

次に、変換関数を次のように実装できます。

function transform(cameraElem, assemblyElem, camera) {
    var orient = camera.getOrientation();
    var pos = camera.getPosition();
    cameraElem.style.WebkitTransform = "rotateX(" + orient[0] + "deg) " + 
                                       "rotateY(" + orient[1] + "deg) " +
                                       "rotateZ(" + orient[2] + "deg)";
    assemblyElem.style.WebkitTransform = "translate3d(" + (-pos[0]) + "px, " +
                                                          (-pos[1]) + "px, " +
                                                          (-pos[2]) + "px)";
}

もちろん、上記のすべては WebKit のフレーバーの 3D 変換のみをサポートしていますが、これを拡張して Mozilla バリアントと標準 (プレフィックスなし) バリアントをサポートするのは簡単なことです。

于 2013-03-17T17:42:04.583 に答える