Converting JavaScript Threejs Examples to TypeScript Projects
Video Lecture
Description
There are many great Threejs examples on the official Threejs examples website at https://threejs.org/examples/
They are written in JavaScript and now use ES6 import syntax. You may want to convert a Threejs JavaScript project into the TypeScript project so in the video I demonstrate how I would go about doing that. I convert the Threejs example gpgpu water into a TypeScript equivalent of that example.
In summary,
- I base the new project on the statsgui branch of my boilerplate because it already includes the Stats and DAT.gui panels.
- I get the project to the point where the javascript code is running in the client.ts file unchanged
- I make sure all resource that the script needs are available such as any resources referenced in the examples html, or images/models that will also need to be placed in your project dist folders.
- I then proceed to convert all var keywords to let or const and add Type Annotations to all of the variable declarations.
View the converted project on codesandbox.io