Three.js - 統計資訊

統計資訊

統計資訊在大型應用中發揮著重要作用。假設您正在建立一個包含許多物件和動畫的大型 Three.js 專案。監控程式碼的效能（如 fps（每秒幀數）、分配的記憶體等）非常重要。Three.js 的建立者還建立了一個小型 JavaScript 庫 Stats.js 來監控渲染。

安裝

像任何其他庫一樣，您可以簡單地透過三種方式之一將其新增到您的專案中，如前所述。

您可以從GitHub下載它並將其匯入到您的 HTML 頁面中。或者，您可以將 CDN 連結新增到 HTML 頁面中。

<script src="https://cdnjs.cloudflare.com/ajax/libs/stats.js/r17/Stats.min.js"></script>

如果您使用的是節點應用程式，請安裝npm 包並將其匯入到您的專案中。

npm install stats.js

或者

yarn add stats.js
import * as stats from 'stats.js'

功能

您可以使用 Stats.js 監控以下屬性。

FPS - 在上一秒中渲染的幀數 (0)。
MS - 渲染一幀所需的毫秒數 (1)。
MB - 已分配記憶體的兆位元組 (2)（使用 --enable-precise-memoryinfo 執行 Chrome）
自定義 - 您可以定義要監控的內容 - 使用者定義的面板支援 (3)。

它是如何工作的？

如果您正在監控幀速率，它會計算在上一秒內更新被呼叫的次數並顯示該值。如果您正在跟蹤渲染時間，它只會顯示呼叫和更新函式之間的時間。

用法

您可以通過幾個簡單的步驟將此功能新增到您的程式碼中。

建立 stats 物件並使用 DOM 將其新增到 HTML 頁面中。

const stats = new Stats()
stats.showPanel(1) // 0: fps, 1: ms, 2: mb, 3+: custom
document.body.appendChild(stats.dom)

注意 - 您可以使用 showPanel() 顯示您想要的面板。預設情況下，Stats.js 顯示 fps 面板，您可以透過單擊面板在面板之間切換。

選擇要監控的程式碼。

stats.begin()
// monitored code goes here
// in our case the render function
renderer.render(scene, camera)
stats.end()

如果您使用動畫，則應在渲染每一幀時更新統計資訊。

function animate() {
   requestAnimationFrame(render)
   // our animations
   renderer.render(scene, camera)
   stats.update()
}

示例

檢視此工作示例。

stats.js

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" />
      <meta http-equiv="X-UA-Compatible" content="ie=edge" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Three.js - Stats.js</title>
      <style>
         * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: -applesystem, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
            Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
         }
         html,
         body {
            height: 100vh;
            width: 100vw;
         }
         #threejs-container {
            position: block;
            width: 100%;
            height: 100%;
         }
      </style>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.7/dat.gui.js"></script>
      <script src="http://mrdoob.github.io/stats.js/build/stats.min.js"></script>
   </head>
   <body>
      <div id="threejs-container"></div>
      <script type="module">
         // Adding stats panel to moniter application statistics
         const gui = new dat.GUI()
         const stats = new Stats()
         //stats.showPanel(0)
         //stats.showPanel(1)
         document.body.appendChild(stats.dom)
         // width, height
         let width = window.innerWidth
         let height = window.innerHeight
         // scene
         const scene = new THREE.Scene()
         scene.background = new THREE.Color(0x262626)
         // camera
         const camera = new THREE.PerspectiveCamera(30, width / height, 0.1, 100)
         camera.position.set(0, 0, 10)
         // cube
         const geometry = new THREE.BoxGeometry(1, 1, 1)
         const material = new THREE.MeshBasicMaterial({
            color: 0xffffff,
            wireframe: true
         })
         const cube = new THREE.Mesh(geometry, material)
         scene.add(cube)
         // responsiveness
         window.addEventListener('resize', () => {
            width = window.innerWidth
            height = window.innerHeight
            camera.aspect = width / height
            camera.updateProjectionMatrix()
            renderer.setSize(window.innerWidth, window.innerHeight)
            renderer.render(scene, camera)
         })
         // renderer
         const renderer = new THREE.WebGL1Renderer()
         renderer.setSize(width, height)
         renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
         // animation
         function animate() {
            requestAnimationFrame(animate)
            cube.rotation.x += 0.005
            cube.rotation.y += 0.01
            renderer.render(scene, camera)
            stats.update()
         }
         // rendering the scene
         const container = document.querySelector('#threejs-container')
         container.append(renderer.domElement)
         stats.begin()
         renderer.render(scene, camera)
         stats.end()
         animate()
      </script>
   </body>
</html>

輸出

threejs_debug_and_stats.htm

列印頁面