img-model

img-model

图片模拟3D 360°旋转

安装

npm install img-model

使用

必须开启 "enableSkia": "true"

• json

{
    "usingComponents": {
        "img-model": "img-model/img-model"
    }
}

• mini.project.json

{
  "node_modules_es6_whitelist": [
    "img-model",
    "common-game"
  ]
}

• js

Page({
  data: {
    gameSource: JSON.stringify({
      movelmd: 12,//移动超过此值才算移动成功
      sensitivity: 1,//移动成功一次增加多少下标
      imgs: [
        { "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01iyfwAn1FJveaflUng_!!1080040467.jpg", "name": "xl_00.jpg", "width": "1500", "height": "1500" },
        { "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01ovfg8I1FJveWTa5SL_!!1080040467.jpg", "name": "xl_01.jpg", "width": "1500", "height": "1500" },
        { "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01OM5E6O1FJveNmIGYL_!!1080040467.jpg", "name": "xl_02.jpg", "width": "1500", "height": "1500" },
        { "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN017mApqK1FJveY6UtK0_!!1080040467.jpg", "name": "xl_03.jpg", "width": "1500", "height": "1500" },
        { "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01eANWkh1FJvebhOijY_!!1080040467.jpg", "name": "xl_04.jpg", "width": "1500", "height": "1500" },
        { "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01qoMLmW1FJveZH6Fsv_!!1080040467.jpg", "name": "xl_05.jpg", "width": "1500", "height": "1500" },
        { "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01zCSjIJ1FJveX2YbKN_!!1080040467.jpg", "name": "xl_06.jpg", "width": "1500", "height": "1500" },
        { "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN019enDGO1FJveY6Wlj8_!!1080040467.jpg", "name": "xl_07.jpg", "width": "1500", "height": "1500" },
        { "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01fyJR7b1FJveWXWvWc_!!1080040467.jpg", "name": "xl_08.jpg", "width": "1500", "height": "1500" },
        { "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN019vhM3z1FJveX2a8yi_!!1080040467.jpg", "name": "xl_09.jpg", "width": "1500", "height": "1500" },
        { "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01x0HIK51FJvea9eYZQ_!!1080040467.jpg", "name": "xl_10.jpg", "width": "1500", "height": "1500" },
        { "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01R5HvwZ1FJvecPMNcR_!!1080040467.jpg", "name": "xl_11.jpg", "width": "1500", "height": "1500" },
        { "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01SQv0ul1FJveTthgaZ_!!1080040467.jpg", "name": "xl_12.jpg", "width": "1500", "height": "1500" },
        { "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01T1bpAV1FJvea9hEtX_!!1080040467.jpg", "name": "xl_13.jpg", "width": "1500", "height": "1500" },
        { "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN014OiS1b1FJveWTbQeq_!!1080040467.jpg", "name": "xl_14.jpg", "width": "1500", "height": "1500" },
        { "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01MEz7lK1FJveZH5idZ_!!1080040467.jpg", "name": "xl_15.jpg", "width": "1500", "height": "1500" },
        { "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN015zy9aM1FJveSQIXII_!!1080040467.jpg", "name": "xl_16.jpg", "width": "1500", "height": "1500" },
        { "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01nKXNSo1FJvedFlLrx_!!1080040467.jpg", "name": "xl_17.jpg", "width": "1500", "height": "1500" },
        { "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01QfWYgp1FJveX2YKjK_!!1080040467.jpg", "name": "xl_18.jpg", "width": "1500", "height": "1500" },
        { "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01NVTLnT1FJveTtennW_!!1080040467.jpg", "name": "xl_19.jpg", "width": "1500", "height": "1500" },
        { "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01XJIX9T1FJveSQIGgw_!!1080040467.jpg", "name": "xl_20.jpg", "width": "1500", "height": "1500" },
        { "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01vXB7rr1FJvebhOvDJ_!!1080040467.jpg", "name": "xl_21.jpg", "width": "1500", "height": "1500" },
        { "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01URX21R1FJveTth5Bn_!!1080040467.jpg", "name": "xl_22.jpg", "width": "1500", "height": "1500" },
        { "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01osyIug1FJvebhOaQm_!!1080040467.jpg", "name": "xl_23.jpg", "width": "1500", "height": "1500" },
        { "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01qebE6q1FJveXq1VML_!!1080040467.jpg", "name": "xl_24.jpg", "width": "1500", "height": "1500" },
        { "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01m0iL571FJveUTOVaN_!!1080040467.jpg", "name": "xl_25.jpg", "width": "1500", "height": "1500" },
        { "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01T9aIwB1FJvea9etNy_!!1080040467.jpg", "name": "xl_26.jpg", "width": "1500", "height": "1500" },
        { "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01mdmN1g1FJveWTacm1_!!1080040467.jpg", "name": "xl_27.jpg", "width": "1500", "height": "1500" },
        { "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01E7fgZj1FJveY6WV7Q_!!1080040467.jpg", "name": "xl_28.jpg", "width": "1500", "height": "1500" },
        { "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01glpmmj1FJveXq330H_!!1080040467.jpg", "name": "xl_29.jpg", "width": "1500", "height": "1500" },
        { "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN015Y8sDU1FJveWTapGY_!!1080040467.jpg", "name": "xl_30.jpg", "width": "1500", "height": "1500" },
        { "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01Dwaysk1FJvebhPaoI_!!1080040467.jpg", "name": "xl_31.jpg", "width": "1500", "height": "1500" },
        { "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01YqZxgS1FJvedFkkTm_!!1080040467.jpg", "name": "xl_32.jpg", "width": "1500", "height": "1500" },
        { "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01P5iz3f1FJvecPP3y1_!!1080040467.jpg", "name": "xl_33.jpg", "width": "1500", "height": "1500" },
        { "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01IvzULF1FJveNmJbke_!!1080040467.jpg", "name": "xl_34.jpg", "width": "1500", "height": "1500" },
        { "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01PAl7pB1FJveafjouh_!!1080040467.jpg", "name": "xl_35.jpg", "width": "1500", "height": "1500" },
        { "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN019k7rmX1FJveTtgc6E_!!1080040467.jpg", "name": "xl_36.jpg", "width": "1500", "height": "1500" },
        { "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01NfCMKZ1FJveZH7rif_!!1080040467.jpg", "name": "xl_37.jpg", "width": "1500", "height": "1500" },
        { "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01843GJo1FJvee05ELt_!!1080040467.jpg", "name": "xl_38.jpg", "width": "1500", "height": "1500" },
        { "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01ArHNu51FJveZH8s5G_!!1080040467.jpg", "name": "xl_39.jpg", "width": "1500", "height": "1500" },
        { "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01Ka4ebm1FJveafllU4_!!1080040467.jpg", "name": "xl_40.jpg", "width": "1500", "height": "1500" },
        { "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01gNguwG1FJvea9fpca_!!1080040467.jpg", "name": "xl_41.jpg", "width": "1500", "height": "1500" },
        { "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01yRSVMY1FJveXq1m1F_!!1080040467.jpg", "name": "xl_42.jpg", "width": "1500", "height": "1500" },
        { "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01kbqfvk1FJvee07yr5_!!1080040467.jpg", "name": "xl_43.jpg", "width": "1500", "height": "1500" },
        { "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01aQeJqr1FJveaflINv_!!1080040467.jpg", "name": "xl_44.jpg", "width": "1500", "height": "1500" },
        { "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01XXv3RP1FJveX2ZoEX_!!1080040467.jpg", "name": "xl_45.jpg", "width": "1500", "height": "1500" },
        { "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01noqd281FJveTtgc71_!!1080040467.jpg", "name": "xl_46.jpg", "width": "1500", "height": "1500" },
        { "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01UGVvBn1FJveTtfblq_!!1080040467.jpg", "name": "xl_47.jpg", "width": "1500", "height": "1500" },
        { "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01XFh2m91FJvebhP7i7_!!1080040467.jpg", "name": "xl_48.jpg", "width": "1500", "height": "1500" },
        { "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01Z0Zbm41FJveY6VEAK_!!1080040467.jpg", "name": "xl_49.jpg", "width": "1500", "height": "1500" },
        { "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01T7aoXe1FJvedFlHlD_!!1080040467.jpg", "name": "xl_50.jpg", "width": "1500", "height": "1500" },
        { "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN017NuET31FJvedFnhPi_!!1080040467.jpg", "name": "xl_51.jpg", "width": "1500", "height": "1500" },
        { "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01OyyHvU1FJveY6XNCO_!!1080040467.jpg", "name": "xl_52.jpg", "width": "1500", "height": "1500" },
        { "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01xlBhaS1FJveTtj5za_!!1080040467.jpg", "name": "xl_53.jpg", "width": "1500", "height": "1500" },
        { "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01NmdJwy1FJveUTQvKn_!!1080040467.jpg", "name": "xl_54.jpg", "width": "1500", "height": "1500" },
        { "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01Q041vH1FJveZH84CQ_!!1080040467.jpg", "name": "xl_55.jpg", "width": "1500", "height": "1500" },
        { "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01zM9wEx1FJvebhSXmq_!!1080040467.jpg", "name": "xl_56.jpg", "width": "1500", "height": "1500" },
        { "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01PvxYaw1FJveSQK4yW_!!1080040467.jpg", "name": "xl_57.jpg", "width": "1500", "height": "1500" },
        { "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01zcrsVf1FJveX2Ys3P_!!1080040467.jpg", "name": "xl_58.jpg", "width": "1500", "height": "1500" },
        { "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01H9vMxB1FJveNmIGdx_!!1080040467.jpg", "name": "xl_59.jpg", "width": "1500", "height": "1500" },
        { "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01Vn38PP1FJvea9gR3e_!!1080040467.jpg", "name": "xl_60.jpg", "width": "1500", "height": "1500" },
        { "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01BSbwmm1FJvea9f1lA_!!1080040467.jpg", "name": "xl_61.jpg", "width": "1500", "height": "1500" },
        { "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01i8CmsN1FJvecPMmdn_!!1080040467.jpg", "name": "xl_62.jpg", "width": "1500", "height": "1500" },
        { "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01zkFvyd1FJveSQLUI9_!!1080040467.jpg", "name": "xl_63.jpg", "width": "1500", "height": "1500" },
        { "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01UgDFCf1FJveZH9PND_!!1080040467.jpg", "name": "xl_64.jpg", "width": "1500", "height": "1500" },
        { "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01PalsJL1FJveZH6zi3_!!1080040467.jpg", "name": "xl_65.jpg", "width": "1500", "height": "1500" },
        { "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01K8vk0Q1FJveY6Vtln_!!1080040467.jpg", "name": "xl_66.jpg", "width": "1500", "height": "1500" },
        { "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN017OXjzS1FJveTtiI6K_!!1080040467.jpg", "name": "xl_67.jpg", "width": "1500", "height": "1500" },
        { "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01vlhS9t1FJveY6VxwK_!!1080040467.jpg", "name": "xl_68.jpg", "width": "1500", "height": "1500" },
        { "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01E8MOUi1FJveZH7KVI_!!1080040467.jpg", "name": "xl_69.jpg", "width": "1500", "height": "1500" },
        { "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01ovFBQE1FJveX2bxKV_!!1080040467.jpg", "name": "xl_70.jpg", "width": "1500", "height": "1500" },
        { "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01YmSYvG1FJveafklB9_!!1080040467.jpg", "name": "xl_71.jpg", "width": "1500", "height": "1500" },
        { "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01VAw76e1FJveX2bcXo_!!1080040467.jpg", "name": "xl_72.jpg", "width": "1500", "height": "1500" },
      ]
    }),
  },
  onLoad(query) {
  },

  onRef(game) {
    this.gameComponent = game;
    console.log("进入游戏")
  },
  onInitDone() {
    // my.alert({
    //   content: "游戏初始化完成"
    // })
  },
})

• xaml

  <img-model gameSource="{{gameSource}}" 
    onRef="onRef"
    onInitDone="onInitDone" 
    />