基于vue与three.js，监听FPX（Stats类使用）

printf_824

已于 2023-12-20 16:58:29 修改

阅读量569

点赞数 9

分类专栏： vue 与 three 文章标签： javascript vue.js 前端

于 2023-12-20 16:58:10 首次发布

本文链接：https://blog.csdn.net/m0_49083276/article/details/135112387

版权

vue 与 three 专栏收录该内容

10 篇文章 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);
    },