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 |
|
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 |
|
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/
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 |
|
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()