完全なCSSの3Dページ - カメラの実装

私は自分のページを完全に3D空間にしたい、私は3Dについてよく分かりませんが、私のアイデアはボディを私のビューポートとし、世界はdivです変換されたコンテンツが存在します。私は、方向と位置のベクトル（またはカメラオブジェクト？）をパラメータとして受け取り、内部的にCSS変換を行う関数が必要です。これは、画面がページの所望の部分に向くように変換されます。例ページ、シンプルルーム。完全なCSSの3Dページ - カメラの実装

<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()の機能はどのようになりますか？私はそれが正しいアプローチであるかどうか、あるいは別の方法で行うべきかどうかはわかりません。

出典

2013-03-07 olanod

これは、このブログ記事へのリンクがあるhttp://stackoverflow.com/questions/7988874/webkit-3d-css-rotate-camera-like-in-a-first-person-shooterの複製のようです1人の著者経験を説明する：http://blog.keithclark.co.uk/creating-3d-worlds-with-html-and-css/ –

Keith Clark's CSS3 first-person shooterは次のような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; 
}

あなたの幾何学的要素は、その3Dの解釈変換していますpreserve-3dスタイルのためにアセンブリの位置に対して相対的です。

私たちは、このような関数の何かを変えるあなた実装することができます：3DのWebKitの味が変換もちろん

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)"; 
}

上記のすべてはのみをサポートしていますが、Mozillaのバリアントをサポートするために、これを拡張することは簡単なことでなければなりません標準（非接頭辞）バリアントです。

出典

2013-03-17 17:42:04

そのCSS3 FPSをリンクするための+1 ...絶対に驚くべき –

優秀、私はなかったHTML/CSSでこれが可能であることを認識しています！ありがとうございました – Awena

完全なCSSの3Dページ - カメラの実装

答えて

関連する問題