Stats Panel
Video Lecture
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/
