Stats Panel
Video Lecture
Your browser does not support the video tag.
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 = 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/