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

第一步,引入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);
    },

相关推荐

  1. Vue基础(3)监听数据

    2023-12-21 10:54:08       30 阅读
  2. Vue 监听状态 watch 监听状态 watchEffect

    2023-12-21 10:54:08       53 阅读
  3. vue watch监听的多种使用

    2023-12-21 10:54:08       39 阅读
  4. Vue3】watch监听使用【超详细】

    2023-12-21 10:54:08       33 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2023-12-21 10:54:08       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2023-12-21 10:54:08       101 阅读
  3. 在Django里面运行非项目文件

    2023-12-21 10:54:08       82 阅读
  4. Python语言-面向对象

    2023-12-21 10:54:08       91 阅读

热门阅读

  1. 服务器不稳定因素

    2023-12-21 10:54:08       54 阅读
  2. Python基础语法:使用Python编写一个简单的计算器

    2023-12-21 10:54:08       64 阅读
  3. Linux 内核参数:vmallocinfo

    2023-12-21 10:54:08       69 阅读
  4. 数组深入学习感悟

    2023-12-21 10:54:08       70 阅读
  5. 《微信小程序开发从入门到实战》学习五十七

    2023-12-21 10:54:08       60 阅读
  6. 讲诉JVM

    2023-12-21 10:54:08       58 阅读
  7. QML基础类型之Size - 编程指南

    2023-12-21 10:54:08       65 阅读
  8. qiankun(乾坤)微前端框架简介

    2023-12-21 10:54:08       48 阅读
  9. 基于分裂Bregman算法的图像去噪实现

    2023-12-21 10:54:08       56 阅读
  10. 使用Spark GraphX进行图形处理的代码练习

    2023-12-21 10:54:08       56 阅读