Skip to content

Converting JavaScript Threejs Examples to TypeScript Projects

Video Lecture

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 you may one day 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 Ocean 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 mostly unchanged.
  • I make sure all resources that the script needs are available such as any resources referenced in the examples html, or images/models/textures that will also need to be placed in your projects dist folder.
  • I then add the types to all the variables until there are no more TypeScript warnings.

Comments