Question

目标：在圆柱体周围包裹全景图像/视频并控制内部的“相机”以环顾全景。

首先，我找不到任何一个图像的例子，更不用说一个视频，包裹在圆柱体周围。有谁知道怎么做？

我认为我应该对使用鼠标或箭头键控制视口的交互方面很好，但我不知道如何从这个圆柱体开始，因为我有点像CSS转换和3d webkit的菜鸟编码...

爱你很久 - 非常感谢你的任何答案！ -Joel

Answer 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 )。半径计算为imageWidth / Pi / 2并用于包装div的translateZ（{{1}每个面也会被1222... pixels（-50%）偏移，以将其放置在正确的位置。

希望这有点帮助，我知道这个问题已经有几个月了。

在Cylinder周围包裹图像（或视频！？） - Webkit CSS 3d Transform

1 个答案: