基于vue与three.js,监听FPX(Stats类使用)

基于vue与three.js,监听FPX(Stats类使用)_第1张图片

第一步,引入stats类并new出来

import Stats from 'three/examples/jsm/libs/stats.module.js';
data(){
    return {
        stats : new Stats(),
    }
}

第二步,添加dom

 mounted() {
    this.init3D();
    this.animate();
    window.addEventListener("keydown", this.toggleFullscreen, true);
    document.body.appendChild(this.stats.dom);//添加dom
    this.openFullScreen();
  },

第三步,实时更新

 animate() {
      if (!this.renderer) {
        return;
      }
      requestAnimationFrame(this.animate);
      this.controls.update(); // 更新控制器状态
      TWEEN.update();
      this.renderer.render(this.scene, this.camera);
      this.stats.update(); //更新fpx状态
      if (!this.tagRenderer) {
        return;
      }
      this.tagRenderer.render(this.scene, this.camera);
    },

你可能感兴趣的:(vue,与,three,javascript,vue.js,前端)