Converting JavaScript Threejs Examples to TypeScript Projects

Video Lecture

Converting JavaScript Threejs Examples to TypeScript Projects Converting JavaScript Threejs Examples to TypeScript Projects Converting JavaScript Threejs Examples to TypeScript Projects

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