Home > Article > Web Front-end > Three.js uses the stats plug-in to implement performance monitoring
Three.js uses the stats plug-in to implement performance monitoring
- 小云云Original
- 2018-02-01 13:27:241925browse
About performance: Test a program to see if there is a bottleneck in performance. In the 3D world, the concept of frame number is often used. First, let’s define the meaning of frame number. Three.js is a 3D engine running in the browser. You can use it to create various three-dimensional scenes. This article mainly introduces you to relevant information on how Three.js uses the performance plug-in stats to implement performance monitoring. Friends who need it You can use it as a reference, let’s learn together below.
Number of frames: How many times the graphics processor can be refreshed per second, usually represented by fps (Frames Per Second)
About performance: Test a program to see if there is a bottleneck in performance. In the 3D world, the concept of frame number is often used. First, let’s define the meaning of frame number.
Frame number: How many times the graphics processor can refresh per second, usually expressed by fps (Frames Per Second)
After the stats performance plug-in is added, the performance will be displayed in the upper left corner by default The number of frames, the time taken for each refresh, and the memory occupied. Click the left mouse button to switch, and the number of frames per second is displayed by default.
First, you need to introduce the stats plug-in. The address is examples/js/libs/stats.min.js in the download file from the official website.
Then you need to instantiate a component and then add it to the dom.
//初始化性能插件
var stats;
function initStats() {
stats = new Stats();
document.body.appendChild(stats.dom);
}
Stats need to be updated in the requestAnimationFrame() function call.
function animate() {
//更新控制器
controls.update();
render();
//更新性能插件
stats.update();
requestAnimationFrame(animate);
}
In this way, the normal plug-in effect will be displayed on the page.
Set the default display monitor.
Stats.prototype.setMode() method can set the default monitoring of the plug-in
stats.setMode(0); //默认的监听fps stats.setMode(1); //默认的监听画面渲染时间 stats.setMode(2); //默认的监听当前的不知道是啥
The case is also written using the case in the previous section, the entire code:
<!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>
Related recommendations:
Detailed explanation of event monitoring and event publishing usage examples in Node.js
##javascript event model, object, monitoring, Detailed explanation of passing code examples
How to monitor events when jumping between WeChat applet pages
The above is the detailed content of Three.js uses the stats plug-in to implement performance monitoring. For more information, please follow other related articles on the PHP Chinese website!