Skip to content

Stats Panel

Video Lecture

Stats Panel Stats Panel

Description

Adding the Stats panel to the document using TypeScript.

<>

Start Script

Begin the lesson using this client.ts below.

./src/client/client.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'

const scene = new THREE.Scene()

const camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
)
camera.position.z = 2

const renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)

const controls = new OrbitControls(camera, renderer.domElement)
controls.addEventListener('change', render)

const geometry = new THREE.BoxGeometry()
const material = new THREE.MeshBasicMaterial({
    color: 0x00ff00,
    wireframe: true,
})

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

window.addEventListener('resize', onWindowResize, false)
function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight
    camera.updateProjectionMatrix()
    renderer.setSize(window.innerWidth, window.innerHeight)
    render()
}

// function animate() {
//     requestAnimationFrame(animate)

//     cube.rotation.x += 0.01
//     cube.rotation.y += 0.01

//     render()
// }

function render() {
    renderer.render(scene, camera)
}

//animate()
render()

Final Scripts

Below is the client.ts how it is left at the end of the lesson.

./src/client/client.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import Stats from 'three/examples/jsm/libs/stats.module'

const scene = new THREE.Scene()

const camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
)
camera.position.z = 2

const renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)

const controls = new OrbitControls(camera, renderer.domElement)
//controls.addEventListener('change', render)

const geometry = new THREE.BoxGeometry()
const material = new THREE.MeshBasicMaterial({
    color: 0x00ff00,
    wireframe: true,
})

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

window.addEventListener('resize', onWindowResize, false)
function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight
    camera.updateProjectionMatrix()
    renderer.setSize(window.innerWidth, window.innerHeight)
    //render()
}

const stats = new Stats()
document.body.appendChild(stats.dom)

function animate() {
    requestAnimationFrame(animate)

    cube.rotation.x += 0.01
    cube.rotation.y += 0.01

    render()

    stats.update()
}

function render() {
    renderer.render(scene, camera)
}

animate()
//render()

Boilerplate stats Branch

The official course boilerplate contains a branch including the Stats panel if you need.

You can clone the boilerplate into a new folder somewhere and checkout the stats branch.

git clone https://github.com/Sean-Bradley/Three.js-TypeScript-Boilerplate.git
cd Three.js-TypeScript-Boilerplate
git checkout stats
npm install
npm run dev

Visit http://127.0.0.1:8080/

With the Stats panel

Troubleshooting

Error : This module is declared with 'export =', and can only be used with a default import when using the 'allowSyntheticDefaultImports' flag.

@types/[email protected] and several versions later changed how stats.module.js was being referenced. Depending on the version of Threejs you are using, you can add "allowSyntheticDefaultImports": true to your tsconfig.json to counteract the error. This fix no longer seems to be necessary since Three r154.

Example,

1
2
3
4
5
6
7
8
9
{
    "compilerOptions": {
        "target": "ES6",
        "moduleResolution": "node",
        "strict": true,
        "allowSyntheticDefaultImports": true
    },
    "include": ["**/*.ts"]
}

And we also now need to instantiate using the syntax,

const stats = new Stats()

In previous versions of @types/three, we could use the syntax,

const stats = Stats()

'new' expression, whose target lacks a construct signature, implicitly has an 'any' type

If using @types/[email protected] or earlier with stats.module, instantiating a new Stats() (using the new keyword) would cause the error new' expression, whose target lacks a construct signature, implicitly has an 'any' type since stats is exported as a function and not a class.

In @types/[email protected] and earlier, you could use the syntax,

const stats = Stats()

If using versions equal to and between @types/[email protected] and @types/[email protected], then you need to add "allowSyntheticDefaultImports": true to your tsconfig.json.

And, you need to now instantiate stats using the syntax, in all versions since @types/[email protected].

const stats = new Stats()

Comments