Question

我在不同的角度拍摄了24张图像，这些图像代表了物体的3D模型。我想在我的网站上添加180度旋转功能，例如example 应使用滚动条“旋转”对象，如示例所示。此外，我必须为某些图像添加热点。

我怎么能做到这一点？

Answer 1

由于你有很多角度的图像，听起来你可以在没有3D CSS变换的jQuery中做到这一点。

加载所有图片并为其提供不同的id：

<div id="3dview">
  <img src="..." id="angle1" style="display:block;" /> <!-- display this first -->
  <img src="..." id="angle2" />

  <img src="..." id="angle24" />
</div>

使用CSS声明position: absolute（以及top和left）确保它们全部显示在彼此之上。确保默认情况下隐藏它们（即display:none）。您只能显示一个图像以显示初始角度。

#3dview img {
    position:absolute;
    top:0;
    left:0;
    display:none;
}

然后，在JavaScript中，您可以连接slider control, perhaps from jQuery UI，并显示一个特定的<img />元素（同时保留所有其他元素）。您需要收听控件中的事件，例如：

$( ".selector" ).on( "slidechange", function( event, ui ) { /* code here */} );

我建议只用两个按钮开始，“向左旋转1步”和“向右旋转1步”。这将寻找唯一的img:visible，隐藏它，选择它的下一个/上一个兄弟，然后显示它。

// code to display the next image (ie 'rotate' by one step)
$("#3dview img:visible").hide().next().show()

您可能需要检查用户是否在第一个或最后一个视图上并更改行为，循环或停止旋转。您可以尝试将上面的选择器:not(:last-child):not(:first-child)链接起来。

如何模仿由一组图像表示的对象的3D旋转

1 个答案: