vue电子书效果加入页面three模型效果

前边写到vue简单的实现了一下，但是有bug，页面的页数之类没具体优化操作，下面实现具体的优化后的效果，

繁星如梦&

1173人浏览 · 2023-01-06 14:09:42

繁星如梦& · 2023-01-06 14:09:42 发布

在vue中实现电子书翻页效果

前边写到vue简单的实现了一下，但是有bug，页面的页数之类没具体优化操作，下面实现具体的优化后的效果，最后会把整体的源码放在最后

在这里插入图片描述

这是个小dome展示

代码的实现

01.页面的介绍
一般电子书都是分为前面和后面的，电子书的形式，翻页效果，以及权重
02.代码展示
这是在html里的代码，外围的div相当于一本书，内部每一页分为前后页，也就是两个div

<div class="notbooklist">
    
    <!-- 第一页 -->
    <div class="onebook" ref="fillenght" v-for="(item,index) in filbook" :key="index"  >
        <!-- 正面 -->
      <div class="positive" >
        <div class="title">{{item.title}}</div>
        <div ref="container" id="container" style="width: 100%;height: 40%; border-bottom: 1px solid #ccc;border-top: 1px solid #ccc;">
        
        </div>
        <!-- 事件展示 -->
       <div class="eventanimation">
          </div>
       </div>
        <!-- 模型说明 -->
        <div class="explain" v-html="item.introduce">
          <!-- {{}} -->
        </div>
        <!-- 跳转下一页 -->
        <div class="textto" @click="leftfilp(item)">下一页</div>
      </div>
      <!-- 反面 -->
      <div class="backbook" >
        <div style="width: 100%;height: 100%;">
        <img @click="leftfilps(item)" :src="item.foot" alt="" style="width:100%;height:100%">
        </div>
      </div>
    </div>

这是具体详实，翻页效果样式的实现，以及权重的预设

<style lang="less" scoped>
.notbooklist {
  width: 100%;
  height: 800px;
  // border: 1px solid #ccc;
  margin: 0 auto;
  transform-style: preserve-3d;
  position: relative;
 
  // 第一页
    .onebook {
      position: absolute;
      right: 0;
      margin-left: 50%;
      width: 50%;
      height: 100%;
      transform-style: preserve-3d;
      transition: 0.6s;
      transform-origin: left;
      background: url("/static/image/8.jpg") center no-repeat;
      // position: relative;
        // 第一页正面
        .positive {
          // border: 1px solid aquamarine;
          width: 100%;
          // text-align: center;
          height: 100%;
          font-size: 16px;
          
          position: absolute;
          // left: 100%;
          backface-visibility: hidden;
          .title {
            width: 100%;
            text-align: center;
            font-size: 20px;
            font-weight: 600;
            color: #fff;
          }
          .textto {
            width: 20px;
            position: absolute;
            bottom: 0;
            right: 0;
            padding: 5px;
            text-align: center;
            background: #fff;
            opacity: 0.7;
            color: #912CEE;
            border: 1px solid #fff;
            font-size: 14px;
            font-weight: 600;

          }
          .eventanimation {
            display: flex;
             // 模型展示按键
          .animation{
            // width: 100%;
            margin: 5px ;
            button {
              border: 1px solid blue;
              background: #1E90FF;
              color: #fff;
            }
          }
          }
         
        }
       
        // 反面
        .backbook  {
          position: absolute;
          transform: rotateY(180deg);
          width: 100%;
          // text-align: center;
          height: 100%;
          // border: 1px solid blue;
          backface-visibility: hidden;
          z-index: 99;
        }
        &.left {
          transform: rotateY(-180deg);
          z-index: 100 !important;
        }
        &.right {
          transform: rotateY(0deg);
          // z-index: 100 !important;
        }
    }
  
}
</style>

下面是最关键的js的实现
data里的数据是模仿后台传过来的数据样式，展示电子书
methods是触发的事件
this.init()里面是模型的数据以及编写，下面我会具体的介绍到

export default { 
  data(){
    return{
      // 电子书的页数以及neirong
      filbook:[
        {id:0,title:'外星模型展示',foot:'https://tse4-mm.cn.bing.net/th/id/OIP-C.zsEgRepQ6Uh5OYkkhJyn2gHaE5?pid=ImgDet&rs=1',titlefont:1,threeModel:'static/glb/1212.glb',modelsizeX:10,modelsizeZ:10,modelsizeY:10,oneanimation:[
          {id:0,title:'旋转',animation:'Animation1'},
          {id:1,title:'分散',animation:'Animation2'},
        ],introduce:'<h3 style="text-align:center;">模型介绍</h3><p><font color="#c24f4a">1.这是摄像机，功能：01....</font></p><p><font color="#c24f4a">2.功能二：01：。。。。。</font></p><p><font color="#c24f4a">3.这是测试😀</font></p>'},
        {id:1,title:'模型展示',foot:'https://www.haoy99.com/FileUpload/2019-02/Shui1Zhu11i1Pao1pptB-173234_106.jpg',titlefont:2,threeModel:'static/glb/333.glb',modelsizeX:3,modelsizeZ:3,modelsizeY:3,oneanimation:[
          {id:0,title:'走路',animation:'All Animations'},
         
        ],introduce:'<h3 style="text-align:center;">模型介绍</h3><p><font color="#c24f4a">1.这是人物，功能：01....</font></p><p><font color="#c24f4a">2.功能二：01：。。。。。</font></p><p><font color="#c24f4a">3.这是测试😀</font></p>'},
        {id:2,title:'医疗模型展示',foot:'https://ts1.cn.mm.bing.net/th/id/R-C.699defcec77365c2dcd1bac50a789a46?rik=sk9qvtl%2fpa%2f5eA&riu=http%3a%2f%2fcdn57.picsart.com%2f179951678001202.jpg&ehk=SEq86wyqKmauSBKOyess7Qp6gtM56dWGBQia7SwkJHg%3d&risl=&pid=ImgRaw&r=0',titlefont:3,threeModel:'static/glb/ultrasonic.glb',modelsizeX:2,modelsizeZ:2,modelsizeY:2,oneanimation:[
          {id:0,title:'抽屉',animation:'Animation1'},
          {id:1,title:'绳子',animation:'Animation2'},
          {id:2,title:'头部',animation:'Animation3'},
        ],introduce:'<h3 style="text-align:center;">模型介绍</h3><p><font color="#c24f4a">1.这是医疗机器，功能：01....</font></p><p><font color="#c24f4a">2.功能二：01：。。。。。</font></p><p><font color="#c24f4a">3.这是测试😀</font></p>'}
      ],
      // 动画名称显示(后台逻辑)
      animationspan:[
       
      ]
    }
  },
  methods:{
    // 进入下一页
    leftfilp(e){
      console.log(e.titlefont,this.filbook.length)
      if(e.titlefont<this.filbook.length){
        // modelsize=this.filbook[e.titlefont].modelsize
        modelsizeX=this.filbook[e.titlefont].modelsizeX
    modelsizeY=this.filbook[e.titlefont].modelsizeY
    modelsizeZ=this.filbook[e.titlefont].modelsizeZ
        let list=this.$refs.fillenght
      console.log(this.$refs.fillenght , list[e.titlefont-1])
      list[e.titlefont-1].classList.remove("right");
      list[e.titlefont-1].classList.add('left')
      threemodel=this.filbook[e.titlefont].threeModel
      sendmodeldiv=sendmodeldiv+1
      this.init()
      }else {
        alert('最后一页')
      }
    },
    // 点击背面进入上
    leftfilps(e){
      console.log(e,'1')
      // modelsize=e.modelsize
      modelsizeX=e.modelsizeX
    modelsizeY=e.modelsizeY
    modelsizeZ=e.modelsizeZ
      let list=this.$refs.fillenght
      console.log(list[e.titlefont-1])
      list[e.titlefont-1].classList.remove("left");
      list[e.titlefont-1].classList.add('right')
      threemodel=this.filbook[e.titlefont-1].threeModel
      if(sendmodeldiv!=0){
        sendmodeldiv=sendmodeldiv-1
      }
      this.init()
    },

在电子书页使用three技术添加，模型，以及模型动画的实现

01.在vue中使用three
在上篇文章中介绍过，这里不过多介绍了
直接上代码，
02.代码介绍
当然了在html里面也得变化，添加了页面动画事件的标识，添加了事件，

<!-- 电子书 -->
   <div>电子书模式</div>
   <div class="notbooklist">
    
    <!-- 第一页 -->
    <div class="onebook" ref="fillenght" v-for="(item,index) in filbook" :key="index"  >
        <!-- 正面 -->
      <div class="positive" >
        <div class="title">{{item.title}}</div>
        <div ref="container" id="container" style="width: 100%;height: 40%; border-bottom: 1px solid #ccc;border-top: 1px solid #ccc;">
        
        </div>
        <!-- 事件展示 -->
       <div class="eventanimation">
          <div class="animation" v-for="(itemlist,indexs) in item.oneanimation" :key="indexs" >
            <button @click="animationone(itemlist)">{{itemlist.title}}</button>
            <button @click="stopanimation(itemlist)">暂停{{itemlist.title}}</button>
          </div>
       </div>
        <!-- 模型说明 -->
        <div class="explain" v-html="item.introduce">
          <!-- {{}} -->
        </div>
        <!-- 跳转下一页 -->
        <div class="textto" @click="leftfilp(item)">下一页</div>
        <!-- <div style="width: 100%;height: 100%;background-color: #000; color: #ccc;">{{item.title}}</div> -->
      </div>
      <!-- 反面 -->
      <div class="backbook" >
        <div style="width: 100%;height: 100%;">
        <img @click="leftfilps(item)" :src="item.foot" alt="" style="width:100%;height:100%">
        </div>
      </div>
    </div>
    
   </div>

css没变刚才把所有的css样式放在上面了
下面是js
最上面的判断是判断一个页面有几个canvas，多的需要为空，不然会出现加载多个canvas的bug
mounted里面是浏览器开始加载模型

 init(){
      let containers = this.$refs.container[sendmodeldiv].getElementsByTagName("canvas")
      console.log(containers,containers.length,this.$refs.container)
      if(containers.length!=0){
        this.$refs.container[sendmodeldiv].innerHTML = ""
      }
      console.log(this.$refs.container[sendmodeldiv])
      // if(){}
      //获取div
      let container = this.$refs.container[sendmodeldiv]
      console.log(container,sendmodeldiv,containers.length)
      // 添加相机
      camera = new Three.PerspectiveCamera(70, container.clientWidth/container.clientHeight, 0.01, 1000);
      // 相机的位置
      var vector = new Three.Vector3( 0, 0, - 1 );
      vector.applyQuaternion( camera.quaternion );
      camera.position.z = -10
      camera.position.y=0
      camera.position.x=0
      // 场景
      scene = new Three.Scene()
      // 北京
      // scene.background.dispose()
      // 添加模型到页面展示
      loader = new GLTFLoader();
      console.log(threemodel)
      loader.load( threemodel, function ( glb ) {
        glblist=glb
        
        // this.data.animationspan
          console.log(glb,glblist);
          // this.animationone()
          glb.scene.position.y = -modelsizeY/2;
          glb.scene.scale.set(modelsizeX,modelsizeY,modelsizeZ)
          glb.scene.name= 'train'
          // glb.scene.remove.z
          glb.scene.rotation.y= Math.PI
          glb.scene.traverse( function ( child ) {
            if ( child.isMesh ) {
                child.frustumCulled = false;
                //模型阴影
                child.castShadow = true;
                //模型自发光
                child.material.emissive =  child.material.color;
                child.material.emissiveMap = child.material.map ;
            }})
            animationMixer = new Three.AnimationMixer(glb.scene);
        clock = new Three.Clock();
            scene.add(glb.scene);
            console.log(glblist)
        })
        console.log(glblist)
      // 初始化渲染器
      renderer = new Three.WebGLRenderer({antialias:true});
      // 渲染器的大小
      renderer.setSize(container.clientWidth,container.clientHeight);
      // 设置背景透明
      // 设置透明
      renderer.setClearAlpha(0.01)
      // 将渲染器添加到页面
      container.appendChild(renderer.domElement);
      // 浏览器变化
     
      // 创建轨道控制器 相机围绕模型看到的角度
      const OrbitControl = new OrbitControls(camera, renderer.domElement)
      // 设置轨道自然
      OrbitControl.enableDamping = true
      // 设置惯性
      OrbitControl.update()
  },
  animate(){
      // 浏览器自动渲染下一帧
      requestAnimationFrame(this.animate);
      // var animationMixer = new Three.AnimationMixer(scene);
      // 渲染到页面
      renderer.render(scene,camera); 
      if(animationMixer!==null){
    //clock.getDelta()方法获得两帧的时间间隔
    // 更新混合器相关的时间
    animationMixer.update(clock.getDelta());
  }
    },
    // 设置动画启动
    animationone(e){
      console.log(e.animation)
      console.log(glblist.animations)
      const animationClip = glblist.animations.find(animationClip => animationClip.name ===e.animation);
      let action =  animationMixer.clipAction(animationClip);
      action.play()
    },
    // 动画暂停
    stopanimation(e){
      console.log(e)
      console.log(e.animation)
      console.log(glblist.animations)
      const animationClip = glblist.animations.find(animationClip => animationClip.name ===e.animation);
      let action =  animationMixer.clipAction(animationClip);
      action.stop()
    },
    // 动画名称显示,模拟后台
    animationname(){
      console.log(glblist.animations)
      for(var i=0; i<glblist.animations.length; i++){
        console.log(i,glblist.animations[i].name)
        let id=i
        let title=glblist.animations[i].name
        let web={id:id,title:title}
        this.animationspan.push(web)
      }
      console.log(this.animationspan)
    }



 mounted(){
      this.init()
      this.animate()
      // this.plane()
  },

具体代码

下面会把所有代码放到下面，有不懂得可以私信我

<template>
  <div>
   <!-- 电子书 -->
   <div>电子书模式</div>
   <div class="notbooklist">
    
    <!-- 第一页 -->
    <div class="onebook" ref="fillenght" v-for="(item,index) in filbook" :key="index"  >
        <!-- 正面 -->
      <div class="positive" >
        <div class="title">{{item.title}}</div>
        <div ref="container" id="container" style="width: 100%;height: 40%; border-bottom: 1px solid #ccc;border-top: 1px solid #ccc;">
        
        </div>
        <!-- 事件展示 -->
       <div class="eventanimation">
          <div class="animation" v-for="(itemlist,indexs) in item.oneanimation" :key="indexs" >
            <button @click="animationone(itemlist)">{{itemlist.title}}</button>
            <button @click="stopanimation(itemlist)">暂停{{itemlist.title}}</button>
          </div>
       </div>
        <!-- 模型说明 -->
        <div class="explain" v-html="item.introduce">
          <!-- {{}} -->
        </div>
        <!-- 跳转下一页 -->
        <div class="textto" @click="leftfilp(item)">下一页</div>
        <!-- <div style="width: 100%;height: 100%;background-color: #000; color: #ccc;">{{item.title}}</div> -->
      </div>
      <!-- 反面 -->
      <div class="backbook" >
        <div style="width: 100%;height: 100%;">
        <img @click="leftfilps(item)" :src="item.foot" alt="" style="width:100%;height:100%">
        </div>
      </div>
    </div>
    
   </div>
  </div>
</template>
<style lang="less" scoped>
.notbooklist {
  width: 100%;
  height: 800px;
  // border: 1px solid #ccc;
  margin: 0 auto;
  transform-style: preserve-3d;
  position: relative;
 
  // 第一页
    .onebook {
      position: absolute;
      right: 0;
      margin-left: 50%;
      width: 50%;
      height: 100%;
      transform-style: preserve-3d;
      transition: 0.6s;
      transform-origin: left;
      background: url("/static/image/8.jpg") center no-repeat;
      // position: relative;
        // 第一页正面
        .positive {
          // border: 1px solid aquamarine;
          width: 100%;
          // text-align: center;
          height: 100%;
          font-size: 16px;
          
          position: absolute;
          // left: 100%;
          backface-visibility: hidden;
          .title {
            width: 100%;
            text-align: center;
            font-size: 20px;
            font-weight: 600;
            color: #fff;
          }
          .textto {
            width: 20px;
            position: absolute;
            bottom: 0;
            right: 0;
            padding: 5px;
            text-align: center;
            background: #fff;
            opacity: 0.7;
            color: #912CEE;
            border: 1px solid #fff;
            font-size: 14px;
            font-weight: 600;

          }
          .eventanimation {
            display: flex;
             // 模型展示按键
          .animation{
            // width: 100%;
            margin: 5px ;
            button {
              border: 1px solid blue;
              background: #1E90FF;
              color: #fff;
            }
          }
          }
         
        }
       
        // 反面
        .backbook  {
          position: absolute;
          transform: rotateY(180deg);
          width: 100%;
          // text-align: center;
          height: 100%;
          // border: 1px solid blue;
          backface-visibility: hidden;
          z-index: 99;
        }
        &.left {
          transform: rotateY(-180deg);
          z-index: 100 !important;
        }
        &.right {
          transform: rotateY(0deg);
          // z-index: 100 !important;
        }
    }
  
}
</style>
<script>
import * as Three from 'three'
// 导入轨道控制器
import {
  OrbitControls
} from 'three/examples/jsm/controls/OrbitControls'
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";

let scene = null,
// 相机
camera=null,
// 渲染器
renderer=null,
// 模型
loader=null,
// 模型地址
threemodel=null,
// 第几个模型
sendmodeldiv=0,
modelsizeX=null,
modelsizeY=null,
modelsizeZ=null,
// 动画
animationMixer=null,
clock=null,
// 模型
glblist=null
// 导入轨道控制器
export default { 
  data(){
    return{
      // 电子书的页数以及neirong
      filbook:[
        {id:0,title:'外星模型展示',foot:'https://tse4-mm.cn.bing.net/th/id/OIP-C.zsEgRepQ6Uh5OYkkhJyn2gHaE5?pid=ImgDet&rs=1',titlefont:1,threeModel:'static/glb/1212.glb',modelsizeX:10,modelsizeZ:10,modelsizeY:10,oneanimation:[
          {id:0,title:'旋转',animation:'Animation1'},
          {id:1,title:'分散',animation:'Animation2'},
        ],introduce:'<h3 style="text-align:center;">模型介绍</h3><p><font color="#c24f4a">1.这是摄像机，功能：01....</font></p><p><font color="#c24f4a">2.功能二：01：。。。。。</font></p><p><font color="#c24f4a">3.这是测试😀</font></p>'},
        {id:1,title:'模型展示',foot:'https://www.haoy99.com/FileUpload/2019-02/Shui1Zhu11i1Pao1pptB-173234_106.jpg',titlefont:2,threeModel:'static/glb/333.glb',modelsizeX:3,modelsizeZ:3,modelsizeY:3,oneanimation:[
          {id:0,title:'走路',animation:'All Animations'},
         
        ],introduce:'<h3 style="text-align:center;">模型介绍</h3><p><font color="#c24f4a">1.这是人物，功能：01....</font></p><p><font color="#c24f4a">2.功能二：01：。。。。。</font></p><p><font color="#c24f4a">3.这是测试😀</font></p>'},
        {id:2,title:'医疗模型展示',foot:'https://ts1.cn.mm.bing.net/th/id/R-C.699defcec77365c2dcd1bac50a789a46?rik=sk9qvtl%2fpa%2f5eA&riu=http%3a%2f%2fcdn57.picsart.com%2f179951678001202.jpg&ehk=SEq86wyqKmauSBKOyess7Qp6gtM56dWGBQia7SwkJHg%3d&risl=&pid=ImgRaw&r=0',titlefont:3,threeModel:'static/glb/ultrasonic.glb',modelsizeX:2,modelsizeZ:2,modelsizeY:2,oneanimation:[
          {id:0,title:'抽屉',animation:'Animation1'},
          {id:1,title:'绳子',animation:'Animation2'},
          {id:2,title:'头部',animation:'Animation3'},
        ],introduce:'<h3 style="text-align:center;">模型介绍</h3><p><font color="#c24f4a">1.这是医疗机器，功能：01....</font></p><p><font color="#c24f4a">2.功能二：01：。。。。。</font></p><p><font color="#c24f4a">3.这是测试😀</font></p>'}
      ],
      // 动画名称显示(后台逻辑)
      animationspan:[
       
      ]
    }
  },
  methods:{
    // 进入下一页
    leftfilp(e){
      console.log(e.titlefont,this.filbook.length)
      if(e.titlefont<this.filbook.length){
        // modelsize=this.filbook[e.titlefont].modelsize
        modelsizeX=this.filbook[e.titlefont].modelsizeX
    modelsizeY=this.filbook[e.titlefont].modelsizeY
    modelsizeZ=this.filbook[e.titlefont].modelsizeZ
        let list=this.$refs.fillenght
      console.log(this.$refs.fillenght , list[e.titlefont-1])
      list[e.titlefont-1].classList.remove("right");
      list[e.titlefont-1].classList.add('left')
      threemodel=this.filbook[e.titlefont].threeModel
      sendmodeldiv=sendmodeldiv+1
      this.init()
      }else {
        alert('最后一页')
      }
    },
    // 点击背面进入上
    leftfilps(e){
      console.log(e,'1')
      // modelsize=e.modelsize
      modelsizeX=e.modelsizeX
    modelsizeY=e.modelsizeY
    modelsizeZ=e.modelsizeZ
      let list=this.$refs.fillenght
      console.log(list[e.titlefont-1])
      list[e.titlefont-1].classList.remove("left");
      list[e.titlefont-1].classList.add('right')
      threemodel=this.filbook[e.titlefont-1].threeModel
      if(sendmodeldiv!=0){
        sendmodeldiv=sendmodeldiv-1
      }
      this.init()
    },
    // 模型加载
    init(){
      let containers = this.$refs.container[sendmodeldiv].getElementsByTagName("canvas")
      console.log(containers,containers.length,this.$refs.container)
      if(containers.length!=0){
        this.$refs.container[sendmodeldiv].innerHTML = ""
      }
      console.log(this.$refs.container[sendmodeldiv])
      // if(){}
      //获取div
      let container = this.$refs.container[sendmodeldiv]
      console.log(container,sendmodeldiv,containers.length)
      // 添加相机
      camera = new Three.PerspectiveCamera(70, container.clientWidth/container.clientHeight, 0.01, 1000);
      // 相机的位置
      var vector = new Three.Vector3( 0, 0, - 1 );
      vector.applyQuaternion( camera.quaternion );
      camera.position.z = -10
      camera.position.y=0
      camera.position.x=0
      // 场景
      scene = new Three.Scene()
      // 北京
      // scene.background.dispose()
      // 添加模型到页面展示
      loader = new GLTFLoader();
      console.log(threemodel)
      loader.load( threemodel, function ( glb ) {
        glblist=glb
        
        // this.data.animationspan
          console.log(glb,glblist);
          // this.animationone()
          glb.scene.position.y = -modelsizeY/2;
          glb.scene.scale.set(modelsizeX,modelsizeY,modelsizeZ)
          glb.scene.name= 'train'
          // glb.scene.remove.z
          glb.scene.rotation.y= Math.PI
          glb.scene.traverse( function ( child ) {
            if ( child.isMesh ) {
                child.frustumCulled = false;
                //模型阴影
                child.castShadow = true;
                //模型自发光
                child.material.emissive =  child.material.color;
                child.material.emissiveMap = child.material.map ;
            }})
            animationMixer = new Three.AnimationMixer(glb.scene);
        clock = new Three.Clock();
            scene.add(glb.scene);
            console.log(glblist)
        })
        console.log(glblist)
      // 初始化渲染器
      renderer = new Three.WebGLRenderer({antialias:true});
      // 渲染器的大小
      renderer.setSize(container.clientWidth,container.clientHeight);
      // 设置背景透明
      // 设置透明
      renderer.setClearAlpha(0.01)
      // 将渲染器添加到页面
      container.appendChild(renderer.domElement);
      // 浏览器变化
      // window.addEventListener('resize', () => {
      
      // // 更新摄像头
      // camera.aspect = container.innerWidth / container.innerHeight
      // // 更新投影
      // camera.updateProjectionMatrix();
      // // 更新渲染器
      // renderer.setSize(container.innerWidth, container.innerHeight)
      // // 设置像素比
      // renderer.setPixelRatio(container.devicePixelRatio)
      // })
      // 创建轨道控制器 相机围绕模型看到的角度
      const OrbitControl = new OrbitControls(camera, renderer.domElement)
      // 设置轨道自然
      OrbitControl.enableDamping = true
      // 设置惯性
      OrbitControl.update()
  },
  animate(){
      // 浏览器自动渲染下一帧
      requestAnimationFrame(this.animate);
      // var animationMixer = new Three.AnimationMixer(scene);
      // 渲染到页面
      renderer.render(scene,camera); 
      if(animationMixer!==null){
    //clock.getDelta()方法获得两帧的时间间隔
    // 更新混合器相关的时间
    animationMixer.update(clock.getDelta());
  }
    },
    // 设置动画启动
    animationone(e){
      console.log(e.animation)
      console.log(glblist.animations)
      const animationClip = glblist.animations.find(animationClip => animationClip.name ===e.animation);
      let action =  animationMixer.clipAction(animationClip);
      action.play()
    },
    // 动画暂停
    stopanimation(e){
      console.log(e)
      console.log(e.animation)
      console.log(glblist.animations)
      const animationClip = glblist.animations.find(animationClip => animationClip.name ===e.animation);
      let action =  animationMixer.clipAction(animationClip);
      action.stop()
    },
    // 动画名称显示,模拟后台
    animationname(){
      console.log(glblist.animations)
      for(var i=0; i<glblist.animations.length; i++){
        console.log(i,glblist.animations[i].name)
        let id=i
        let title=glblist.animations[i].name
        let web={id:id,title:title}
        this.animationspan.push(web)
      }
      console.log(this.animationspan)
    }
  },
  mounted(){
      this.init()
      this.animate()
      // this.plane()
  },
  created(){
    threemodel=this.filbook[0].threeModel
    modelsizeX=this.filbook[0].modelsizeX
    modelsizeY=this.filbook[0].modelsizeY
    modelsizeZ=this.filbook[0].modelsizeZ
    console.log(this.animationspan)
    // 模拟后台
    setTimeout(this.animationname,2000);
    // 加载后
    this.$nextTick(() => {
      let flipbook=this.$refs.fillenght
      // this.animationspan=glblist.animations[0].name
    for(var i=0;i<this.filbook.length;i++){
      console.log(i)
      flipbook[i].style.zIndex=this.filbook.length-i
    }
    
    // 禁用右键
    document.oncontextmenu = new Function('event.returnValue=false')
      // 禁用选择
      document.onselectstart = new Function('event.returnValue=false')
      //禁止f12
      // document.onkeydown = new Function('event.returnValue=false')
})
  }
}
</script>