使用threesixty.js實現360度物品預覽

最近公司網站更新，想要對商品進行360度展示，能實現手工拖拽旋轉功能。恰好jQuery有個強大的插件threesixty.js可以實現這個功能。先上做好的效果圖：

1.圖片準備

材料：轉檯一個，相機一個；

過程：

    （1）根據轉檯速度，設置相機的連拍時間和張數，控制轉360度，拍30-40張左右的照片；

    （2）直接拍攝得到的圖片質量較高，可以進行適當壓縮，提高加載速度 ；

    （3）對連拍的圖片進行重命名：1.jpg,2.jpg,3.jpg.......，寫個小腳本，批量重命名：

import os

def batRename():
    base_dir=u'D:/pic/'
    name_pre = ''
    name_num = 1
    dirlist = os.listdir(base_dir)
    for f in dirlist:
        old_file = os.path.join(base_dir,f)
        
        if os.path.isdir(old_file): continue
        suffix = f.split('.')[1]
        new_name = os.path.join(base_dir,name_pre+str(name_num)+'.'+suffix)
        os.rename(old_file, new_name)
        name_num = name_num + 1
        
if __name__ == '__main__':
    batRename()

最後得到的圖片列表如下：

2.在頁面中引入文件

<link type="text/css" rel="stylesheet" href="./treesixty.css">
<script type="text/javascript" src="./jquery.min.js"></script>
<script type="text/javascript" src="./threesixty.min.js"></script>

3.HTML結構

<section class="container-fluid" id="container">
  <div class="threesixty product1">
    <div class="spinner">
      <span>0%</span>
    </div>
    <ol class="threesixty_images"></ol>
  </div>

4.JS腳本

    window.onload = init;

    var product;
    function init(){

      product1 = $('.product1').ThreeSixty({
        totalFrames: 28,   //圖片個數，一定要與圖片個數一致
        endFrame: 28,
        currentFrame: 1,
        imgList: '.threesixty_images',
        progress: '.spinner',
        imagePath:'images/gift/',  //圖片所在路徑，最後一定要有/。如果圖片有前綴，也可以寫在/後
        filePrefix: '',
        ext: '.jpg',
        height: 667,
        width: 1000,
        navigation: true,
        disableSpin: false
      });

    }

好了，到這裏就實現了，是不是簡單幾行代碼就實現了“3D”效果？

給大家一個這個例子的鏈接：

http://image.yzmg.com/20200302/threesixty/index.html