概述

性能监视是监视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);}