前言
關于性能：測試一個程序，性能上是否有瓶頸，在3D世界里，經常使用幀數的概念，首先我們來定義一下幀數的意義。
幀數：圖形處理器每秒鐘能夠刷新幾次，通常用fps（Frames Per Second）來表示
關于性能：測試一個程序，性能上是否有瓶頸，在3D世界里，經常使用幀數的概念，首先我們來定義一下幀數的意義。
幀數：圖形處理器每秒鐘能夠刷新幾次，通常用fps（Frames Per Second）來表示
stats性能插件添加了以后，會默認在左上角顯示性能幀數，每次刷新所用時間，占用內存。鼠標左鍵點擊可進行切換，默認顯示每秒的幀數。
首先需要將stats插件引入，地址是官網下載文件里面的examples/js/libs/stats.min.js。
然后需要實例化一個組件，然后添加到dom當中。
//初始化性能插件
var stats;
function initStats() {
stats = new Stats();
document.body.appendChild(stats.dom);
}
需要在requestAnimationFrame()函數調用里面更新stats。
function animate() {
//更新控制器
controls.update();
render();
//更新性能插件
stats.update();
requestAnimationFrame(animate);
}
就這樣，頁面當中就會顯示出來正常插件效果了。
設置默認顯示的監聽。
Stats.prototype.setMode()方法可以設置插件的默認監聽
stats.setMode(0); //默認的監聽fps stats.setMode(1); //默認的監聽畫面渲染時間 stats.setMode(2); //默認的監聽當前的不知道是啥
案例也是用的上一節的案例寫的，全部代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
html, body {
margin: 0;
height: 100%;
}
canvas {
display: block;
}
</style>
</head>
<body onload="draw();">
</body>
<script src="build/three.js"></script>
<script src="examples/js/controls/TrackballControls.js"></script>
<script src="examples/js/libs/stats.min.js"></script>
<script>
var renderer;
function initRender() {
renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
}
var camera;
function initCamera() {
camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 10000);
camera.position.set(0, 0, 400);
}
var scene;
function initScene() {
scene = new THREE.Scene();
}
var light;
function initLight() {
scene.add(new THREE.AmbientLight(0x404040));
light = new THREE.DirectionalLight(0xffffff);
light.position.set(1,1,1);
scene.add(light);
}
function initModel() {
var map = new THREE.TextureLoader().load("examples/textures/UV_Grid_Sm.jpg");
var material = new THREE.MeshLambertMaterial({map:map});
var cube = new THREE.Mesh(new THREE.BoxGeometry(100, 200, 100, 1, 1, 1), material);
scene.add(cube);
}
//初始化性能插件
var stats;
function initStats() {
stats = new Stats();
document.body.appendChild(stats.dom);
}
//用戶交互插件 鼠標左鍵按住旋轉，右鍵按住平移，滾輪縮放
var controls;
function initControls() {
controls = new THREE.TrackballControls( camera );
//旋轉速度
controls.rotateSpeed = 5;
//變焦速度
controls.zoomSpeed = 3;
//平移速度
controls.panSpeed = 0.8;
//是否不變焦
controls.noZoom = false;
//是否不平移
controls.noPan = false;
//是否開啟移動慣性
controls.staticMoving = false;
//動態阻尼系數 就是靈敏度
controls.dynamicDampingFactor = 0.3;
//未知，占時先保留
//controls.keys = [ 65, 83, 68 ];
controls.addEventListener( 'change', render );
}
function render() {
renderer.render( scene, camera );
}
//窗口變動觸發的函數
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
controls.handleResize();
render();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
//更新控制器
controls.update();
render();
//更新性能插件
stats.update();
requestAnimationFrame(animate);
}
function draw() {
initRender();
initScene();
initCamera();
initLight();
initModel();
initControls();
initStats();
animate();
window.onresize = onWindowResize;
}
</script>
</html>
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對億速云的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
