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

Three.js is a 3D engine running in the browser. You can use it to create various three-dimensional scenes. The following article mainly introduces how Three.js uses the performance plug-in stats to implement performance monitoring. Friends who need it can refer to the relevant information. Let’s study together.

Preface

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.

Number of frames: How many times the graphics processor can be refreshed per second, usually expressed 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 therequestAnimationFrame()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()The method can set the default listening 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, all codes:

The above is the detailed content of Three.js uses performance plug-in stats to implement performance monitoring examples in detail. For more information, please follow other related articles on the PHP Chinese website!