Threejs性能监视和可视化控制

概述

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