2

目標：パノラマ画像/ビデオをシリンダーに巻き付け、内側の「カメラ」を制御してパノラマを見回します。

まず第一に、シリンダーに巻き付けられたビデオはもちろんのこと、画像の例を見つけることができません。誰もがこれを行う方法を知っていますか？

マウスまたは矢印キーを使用してビューポートを制御するというインタラクティブな側面は問題ないと思いますが、CSS変換と3D Webkitコーディングに慣れていないので、このシリンダーのものから始める方法がわかりません…< / p>

長い間愛してる-答えてくれてありがとう！-ジョエル

4

1 に答える 1

1

私はちょうど今日これとまったく同じことをしました。今朝この質問に出くわしたので、少し助けを投稿したいと思いました。

生成されたコード:

<div class="view-Cylinder-Background" style="width: 100%; height: 100%; position: absolute; left: 0px; right: 0px; -webkit-perspective-origin-x: 50%; -webkit-perspective-origin-y: 50%; -webkit-perspective: 500; ">
    <div style="width: 100%; height: 100%; -webkit-transform-style: preserve-3d; -webkit-transform: translateZ(1222.3099629457563px); ">
        <div style="-webkit-transform-style: preserve-3d; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; width: 0px; -webkit-transition-property: -webkit-transform; -webkit-transition-duration: 0.5s; -webkit-transform: rotateY(-748.5000000000005deg); ">
            <div class="view-Cylinder-Item" style="position: absolute; left: -77px; -webkit-transform: rotateY(0deg) translateZ(1195.5154099609108px) translateY(0px); -webkit-transition-property: -webkit-transform; -webkit-transition-duration: 0.5s; ">
                <div style="-webkit-transform: rotateY(180deg); ">
                    <div style="background-image: url(images/panarama.jpg); width: 153px; height: 1024px; background-position: 0px 0px; ">
                    </div>
                </div>
            </div>
            <div class="view-Cylinder-Item" style="position: absolute; left: -77px; -webkit-transform: rotateY(7.2deg) translateZ(1195.5154099609108px) translateY(0px); -webkit-transition-property: -webkit-transform; -webkit-transition-duration: 0.5s; ">
                <div style="-webkit-transform: rotateY(180deg); ">
                    <div style="background-image: url(images/panarama.jpg); width: 153px; height: 1024px; background-position: 153.6px 0px; ">
                    </div>
                </div>
            </div>
            <div class="view-Cylinder-Item" style="position: absolute; left: -77px; -webkit-transform: rotateY(14.4deg) translateZ(1195.5154099609108px) translateY(0px); -webkit-transition-property: -webkit-transform; -webkit-transition-duration: 0.5s; ">
                <div style="-webkit-transform: rotateY(180deg); ">
                    <div style="background-image: url(images/panarama.jpg); width: 153px; height: 1024px; background-position: 307.2px 0px; ">
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

外側の div はシリンダー自体です。3 つの「view-Cylinder-Item」div は、その円柱の面です。この特定の例は 50 個の面に分割されているため (簡潔にするためにカットされています)、各面は で回転し7.2 degreesます。面のtranslateZは、基本的なジオメトリ (ピタゴラス: ) によって計算されますsqrt( radius^2 - face_width^2 )。半径は次のように計算され、ラッピング div ( ) でimageWidth / Pi / 2使用されます。各面は、正しい位置に配置するために( ) だけオフセットされます。translateZ1222... pixels-50%left: -77px

これが少し役立つことを願っています。これは数か月前の質問であることを知っています。

于 2011-11-06T06:37:03.180 に答える