Three.js uses the stats plug-in to implement performance monitoring

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:

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!