ThreeJs监听帧Stat

在three的案例中引入Stat

 初始化Stat

 通过Stat的update方法监听动画帧

案例 旋转的立方体

import * as THREE from 'three'

import Stat from 'three/examples/jsm/libs/stats.module'

const w = window.innerWidth

const h = window.innerHeight

const scene = new THREE.Scene()

const geometry = new THREE.BoxGeometry(1,1,1)

const material = new THREE.MeshNormalMaterial()

const cube = new THREE.Mesh(geometry, material)

scene.add(cube)

const camera = new THREE.PerspectiveCamera(75, w / h, 0.1, 1000)

camera.position.set(5,5,5)

camera.lookAt(0,0,0)

const renderer = new THREE.WebGLRenderer()

renderer.setSize(w, h)

renderer.render(scene, camera)

document.body.append(renderer.domElement)

const stat = new Stat()

document.body.append(stat.domElement)

const clock = new THREE.Clock()

 

function animation() {

  const time = clock.getElapsedTime()

  cube.rotation.x = time

  cube.rotation.y = time

  renderer.render(scene, camera)

stat.update()

  requestAnimationFrame(animation)

}

animation()