<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Three框架</title>
<script src="../static/three.js-master/build/three.js"></script>
<script src="../static/three.js-master/examples/js/libs/stats.min.js"></script>

<style type="text/css">
div#canvas-frame {
border: none;
cursor: pointer;
width: 100%;
height: 600px;
background-color: #EEEEEE;
}

</style>
<script>
var renderer; // 渲染器
var stats; // 性能监视器
function initThree() {
width = window.innerWidth;
height = window.innerHeight;
renderer = new THREE.WebGLRenderer({
antialias : true
});
renderer.setSize(width, height);
document.getElementById('canvas-frame').appendChild(renderer.domElement);
renderer.setClearColor(0xFFFFFF, 1.0);

stats = new Stats(); // 创建一个性能监视器
stats.domElement.style.position = 'absolute'; // 样式, 坐标
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px';
document.getElementById('canvas-frame').appendChild(stats.domElement); // 添加到canvas-frame
}

var camera; // 摄像机
function initCamera() {
camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
camera.position.x = 0;
camera.position.y = 0;
camera.position.z = 800;
camera.up.x = 0;
camera.up.y = 1;
camera.up.z = 0;
camera.lookAt(0, 0, 0);
}

var scene; // 场景
function initScene() {
scene = new THREE.Scene();
}

var light; // 光线
function initLight() {
light = new THREE.AmbientLight(0xFF0000); // 环境光源
light.position.set(100, 100, 200);
scene.add(light);
light = new THREE.PointLight(0x00FF00); // 点光源
light.position.set(0, 0,300);
scene.add(light);
}

var mesh; // 模型
function initObject() {
var geometry = new THREE.CylinderGeometry( 100,150,400); // 构造圆柱体
var material = new THREE.MeshLambertMaterial( { color:0xFFFFFF} ); // 构造表面
mesh = new THREE.Mesh( geometry,material); // 创建模型
mesh.position = new THREE.Vector3(0,0,0);
scene.add(mesh);
}

function threeStart() {
initThree();
initCamera();
initScene();
initLight();
initObject();
animation();

}
function animation()
{
//renderer.clear();
//camera.position.x =camera.position.x +1;
mesh.position.x-=1;
renderer.render(scene, camera);
requestAnimationFrame(animation);

stats.update(); // 调用stats.update()函数来统计时间和帧数
}

</script>
</head>

<body onload="threeStart();">
<div id="canvas-frame"></div>
</body>
</html>

性能监视器是three.js里面的一个类:

var stats = new Stats();
stats.setMode(1); // 0: fps, 1: ms
// 将stats的界面对应左上角
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px';
document.body.appendChild( stats.domElement );
setInterval( function () {
stats.begin();
// 你的每一帧的代码
stats.end();
}, 1000 / 60 );

1、setMode函数

参数为0的时候,表示显示的是FPS界面,参数为1的时候,表示显示的是MS界面。

2、stats的domElement

stats的domElement表示绘制的目的地(DOM),波形图就绘制在这上面。

3、stats的begin函数

begin,在你要测试的代码前面调用begin函数,在你代码执行完后调用end()函数,这样就能够统计出这段代码执行的平均帧数了。

附带three.js代码,​​点击下载​

附带status.min.js代码,​​点击下载​

three.js之性能监视器_js代码