1，stats.js 介紹
（1）stats.js 是一個 Three.js 開發的輔助庫，這個庫同樣也是 Three.js 作者開發的。
（2）stats.js 主要用於檢測動畫運行時的幀數。
（3）GitHub 主頁地址：
https://github.com/mrdoob/stats.js
2，使用步驟
（1）首先在頁面的 <head> 標簽中引入這個輔助庫。
<script type="text/javascript" src="../libs/stats.js"></script>
（2）然后在網頁上添加 <div> 元素，用於顯示統計圖形。
<div id="Stats-output"></div>
（3）接着初始化統計對象，並將該對象添加到 <div> 元素中。這里要注意 setMode() 方法參數：
設置為 0：檢測的是畫面每秒傳輸幀數（fps）
設置為 1：檢測的是畫面渲染的時間
（4）為了能夠統計 stats 對象畫面何時被重新渲染，我們還需要在重新渲染時調用 stats.update() 方法。
3，運行效果
（1）下面是一個簡單的樣例，頁面打開后場景中央會有一個不斷旋轉的立方體。
（2）左上角會實時顯示當前的幀數，點擊后會切換顯示畫面渲染時間。
4，完整代碼
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>hangge.com</title> <script type="text/javascript" src="../libs/three.js"></script> <script type="text/javascript" src="../libs/stats.js"></script> <style> body { margin: 0; overflow: hidden; } </style> </head> <body> <!-- 用於顯示統計圖形 --> <div id="Stats-output"> </div> <!-- 作為Three.js渲染器輸出元素 --> <div id="WebGL-output"> </div> <!-- 第一個 Three.js 樣例代碼 --> <script type="text/javascript"> //網頁加載完畢后會被調用 function init() { //初始化統計對象 var stats = initStats(); //創建一個場景（場景是一個容器，用於保存、跟蹤所要渲染的物體和使用的光源） var scene = new THREE.Scene(); //創建一個攝像機對象（攝像機決定了能夠在場景里看到什么） var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000); //設置攝像機的位置，並讓其指向場景的中心（0,0,0） camera.position.x = -30; camera.position.y = 40; camera.position.z = 30; camera.lookAt(scene.position); //創建一個WebGL渲染器並設置其大小 var renderer = new THREE.WebGLRenderer(); renderer.setClearColor(new THREE.Color(0xEEEEEE)); renderer.setSize(window.innerWidth, window.innerHeight); //創建一個立方體 var cubeGeometry = new THREE.BoxGeometry(4, 4, 4); //將線框（wireframe）屬性設置為true，這樣物體就不會被渲染為實物物體 var cubeMaterial = new THREE.MeshLambertMaterial({color: 0xff0000}); var cube = new THREE.Mesh(cubeGeometry, cubeMaterial); cube.castShadow = true; //設置立方體的位置 cube.position.x = -4; cube.position.y = 3; cube.position.z = 0; //將立方體添加到場景中 scene.add(cube); //創建點光源 var spotLight = new THREE.SpotLight(0xffffff); spotLight.position.set(-40, 60, -10); spotLight.castShadow = true; scene.add(spotLight); //將渲染的結果輸出到指定頁面元素中 document.getElementById("WebGL-output").appendChild(renderer.domElement); //渲染場景 renderScene(); //渲染場景 function renderScene() { //通知stats畫面已被重新渲染了 stats.update(); //選裝立方體 cube.rotation.x += 0.02; cube.rotation.y += 0.02; cube.rotation.z += 0.02; //通過requestAnimationFrame方法在特定時間間隔重新渲染場景 requestAnimationFrame(renderScene); //渲染場景 renderer.render(scene, camera); } //初始化統計對象 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'; //將統計對象添加到對應的<div>元素中 document.getElementById("Stats-output").appendChild(stats.domElement); return stats; } } //確保init方法在網頁加載完畢后被調用 window.onload = init; </script> </body> </html>