概述

性能监视是监视threejs运行中的刷新频率，要使用到threejs提供的stat.js，可视化控制是在窗口中显示一个可见的控制框，可以通过鼠标改变其中的值，达到改变threejs对象参数的目的，需要使用到dat.gui.js

性能监视

引入stat.js

<script type="text/javascript" src="../libs/stats.js"></script>

文件可在这里下载

创建并初始化stat

      function initStats() {var stats = new Stats();stats.setMode(0); // 0: fps, 1: ms// 放在左上角stats.domElement.style.position = 'absolute';stats.domElement.style.left = '0px';stats.domElement.style.top = '0px';document.body.appendChild(stats.domElement);return stats;}

在渲染函数中更新状态

function renderScene() {stats.update();// 做些操作requestAnimationFrame(renderScene);renderer.render(scene, camera);}

可视化控制

引入dat.gui.js

<script type="text/javascript" src="../libs/dat.gui.js"></script>

文件可在这里下载

创建一个控制对象

var controls = new function () {this.rotationSpeed = 0.02;this.bouncingSpeed = 0.03;};

创建GUI对象，并添加控制对象

        var gui = new dat.GUI();gui.add(controls, 'rotationSpeed', 0, 0.5);gui.add(controls, 'bouncingSpeed', 0, 0.5);

添加到gui后，在页面上改动参数，也会影响到controls的值

在渲染函数中是用控制对象的值

 function render() {// 使用控制对象的值cube.rotation.x += controls.rotationSpeed;cube.rotation.y += controls.rotationSpeed;cube.rotation.z += controls.rotationSpeed;// 渲染requestAnimationFrame(render);renderer.render(scene, camera);}

Threejs性能监视和可视化控制相关推荐

R语言ggplot2可视化条形图可视化控制底部和x轴之间没有空格实战：即条形图的底部直接和坐标轴连接
R语言ggplot2可视化条形图可视化控制底部和x轴之间没有空格实战:即条形图的底部直接和坐标轴连接目录
远程可视化控制ubuntu桌面；ubuntu安装搜狗输入法；google浏览器代理访问不了系统不受支持问题解决
1.远程可视化控制ubuntu桌面远程ubuntu系统会因为不同桌面导致链接黑屏或灰屏:如果ubuntu系统是自带的GDM(gnome)做梦系统,那就灰远程连接不能可视化参考:https://ww ...
数字孪生-基于ThreeJS的3D可视化技术
------示例地址-------- https://blog.csdn.net/myfmyfmyfmyf/category_10734116.html ----------------------- ...
dubbo控制中心部署，权重配置，以及管控台中各个配置的简单查看
dubbo给我们提供了现成的后台管理网站,专门管理这些服务,应用,路由规则,动态配置,访问控制.权重控制.负载均衡等等,还可以查看系统日志,系统状态,系统环境等等,功能很是强大,通过这个后台,可以可视 ...
计算机通过变频器模拟输入控制电机正反转,用电脑控制的工频高压系统
IEC-243-1规定, 电压上升率的选择要使受试材料击穿发生在一定耐压时间内.否则须马上以一定速率升压, 直到击穿为止.本系统在传统的工频试验装置基础上, 采取微机控制, 在 WIN98 平台上用V ...
CBoard BI 数据可视化支持国产开源
摘自: https://github.com/yzhang921/CBoard/wiki/%E5%89%8D%E8%A8%80#%E9%A1%B9%E7%9B%AE%E8%83%8C%E6%99%AF ...
MMdetection3d环境搭建、使用MMdetection3d做3D目标检测训练自己的数据集、测试、可视化，以及常见的错误
MMdetection3d环境搭建.使用MMdetection3d做3D目标检测训练自己的数据集.测试.可视化,以及常见的错误 1 mmdetection3d环境搭建与测试 1.1 从docker开始 ...
全程物流可视化管理新模式
功能介绍中国物流行业大型知识社区,致力于推动中国物流发展,并为中国物流与供应链从业者提供交流.学习.讨论的专业型知识社区.影响行业超过40万人. 2018年3月16日,中远海运物流"虎克计划 ...
3D可视化智慧园区建模监控系统，数字化解决方案
随着产业的不断升级发展,传统园区已不能满足市场需求.基于数字孪生的智慧园区采用5G互联网.物联网.云计算.视频融合等技术,整合了园区的整体逻辑架构和统一平台管理,实现了高效的园区运营管理. 3D可视化 ...

Threejs性能监视和可视化控制

概述

性能监视

引入stat.js

创建并初始化stat

在渲染函数中更新状态

可视化控制

引入dat.gui.js

创建一个控制对象

创建GUI对象，并添加控制对象

在渲染函数中是用控制对象的值

Threejs性能监视和可视化控制相关推荐

最新文章

热门文章