目标:将全景图像/视频包裹在圆柱体周围并控制内部的“相机”以环视全景。
首先,我找不到任何图像示例,更不用说围绕圆柱体缠绕的视频了。有人知道怎么做吗?
我认为我应该可以很好地使用鼠标或箭头键控制视口的交互方面,但我不知道如何从这个圆柱体开始,因为我有点像 CSS 转换和 3d webkit 编码的菜鸟......< /p>
爱你很久 - 非常感谢你的任何回答!-乔尔
目标:将全景图像/视频包裹在圆柱体周围并控制内部的“相机”以环视全景。
首先,我找不到任何图像示例,更不用说围绕圆柱体缠绕的视频了。有人知道怎么做吗?
我认为我应该可以很好地使用鼠标或箭头键控制视口的交互方面,但我不知道如何从这个圆柱体开始,因为我有点像 CSS 转换和 3d webkit 编码的菜鸟......< /p>
爱你很久 - 非常感谢你的任何回答!-乔尔
我今天刚刚做了同样的事情。今天早上我遇到了这个问题,所以想发表一些帮助。
生成的代码:
<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
并用于translateZ
包装 div ( 1222... pixels
) 的 。每个面也偏移-50%
( left: -77px
) 以将其放置在正确的位置。
希望这会有所帮助,我知道这是几个月前的问题。