vue2.x & vue-3d-model

版本区分

vue2版本参照分支1branch github.com/hujiulong/v…

*3D Avatar制作链接参考readyplayer.me/ *

demo下载至本地，文件夹名vue-3d-model-1

vue2.x项目引入vue-3d-model

npm安装：npm install vue-3d-model --save
vue-3d-model-1文件夹下public\static\models目录拷贝至vue项目根public目录下，快速引用

1. template

    <template>
    ...
      <div>
        <model-gltf src="static/models/gltf/glTF-Binary/myavatar.glb" @on-load="onLoad"></model-gltf>
        <div class="example-loading" v-show="loading3d"></div>
      </div>
    ...
   </template>

2. js

import { ModelObj,ModelCollada,ModelGltf,...  } from 'vue-3d-model';
export default {
  components: { ModelObj,ModelCollada,ModelGltf,... },
  data() {
      loading3d: true,
      ...
  } 
  ...
},
methods: {
  onLoad() {
    this.loading3d = false;
  },
  ...
}

3. cssloading参照demo

.example-loading {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
}
.example-loading::before {
    content: '';
    border-radius: 100%;
    margin: 2px;
    border: 3px solid #20a0ff;
    border-bottom-color: transparent;
    height: 36px;
    width: 36px;
    display: inline-block;
    animation: loading-rotate .75s 0s linear infinite;
    vertical-align: middle;
}
.example-loading::after {
    content: '';
    display: inline-block;
    height: 100%;
    width: 0;
    vertical-align: middle;
}

基础作品展示