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

news/2024/10/19 2:22:35/

第一步,引入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);//添加domthis.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);},


http://www.ppmy.cn/news/1279396.html

相关文章

2023美团机器人研究院学术年会成功举办

2023年12月19日,深圳市美团机器人研究院学术年会在清华大学深圳国际研究生院成功落下帷幕。会议回顾了研究院成立一年来的进展和成果,并邀请了各界专家共同讨论机器人技术的未来发展趋势。此外,年会期间还举办了首届低空经济智能飞行管理挑战…

【笔记】Spring是什么

什么是spring&#xff1f; Spring的基础知识铺垫 IOC AOP<-Spring->容器->生态 先说你的认知&#xff0c;总-分结构 spring是一个基础的框架&#xff0c;同时提供了Bean的容器&#xff0c;用来方便装载具体的Bean对象&#xff0c;之前在使用对象的时候必须自己new&…

【网络编程】网络通信基础——简述TCP/IP协议

个人主页&#xff1a;兜里有颗棉花糖 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 兜里有颗棉花糖 原创 收录于专栏【网络编程】【Java系列】 本专栏旨在分享学习网络编程的一点学习心得&#xff0c;欢迎大家在评论区交流讨论&#x1f48c; 目录 一、ip地…

设计模式之-策略模式,快速掌握策略模式,通俗易懂的讲解策略模式以及它的使用场景

系列文章目录 设计模式之-6大设计原则简单易懂的理解以及它们的适用场景和代码示列 设计模式之-单列设计模式&#xff0c;5种单例设计模式使用场景以及它们的优缺点 设计模式之-3种常见的工厂模式简单工厂模式、工厂方法模式和抽象工厂模式&#xff0c;每一种模式的概念、使用…

R语言【dplyr】——filter保留符合筛选条件的行,以数据的行为单位,创建子集

Package dplyr version 1.1.4 Parameters filter(.data, ..., .by NULL, .preverse FALSE) 参数【.data】&#xff1a;一个数据集&#xff08;data frame&#xff09;&#xff0c;数据集扩展&#xff08;比如&#xff1a;tibble&#xff09;&#xff0c;或者 lazy data fram…

C++内存管理和模板初阶

C/C内存分布 请看代码&#xff1a; int globalVar 1; static int staticGlobalVar 1; void Test() {static int staticVar 1;int localVar 1;int num1[10] { 1, 2, 3, 4 };char char2[] "abcd";const char* pChar3 "abcd";int* ptr1 (int*)mallo…

ObjectMapper的常用方法 (对象和JSON数据之间的转换)

<dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-databind</artifactId> <version>2.13.0</version> <!-- 请根据实际情况选择合适的版本 --> </dependency> ObjectMapper类是Ja…

WEB 3D技术 three.js 通过lil-gui管理公共事件

首先 导入我们的 lil-gui //引入lil-gui import { GUI } from "three/examples/jsm/libs/lil-gui.module.min.js";我们直接可以在代码最下面这样写 let eventobj {Fullscreen: function(){// 全屏document.body.requestFullscreen();},exitFullscreen: function (…