Three.js TypeScript Boilerplate

I have created a Three.js Typescript boilerplate.

It is an example of programming Three.js, with extra imported modules from the examples folder, and all using TypeScript.

When run, the boilerplate shows a green wireframe rotating cube, with OrbitControls included.

It is hosted using NodeJS and Express.

It contains server and client scripts both written in TypeScript.

The client TypeScript and resulting compiled JavaScript both use ES6 import syntax.

Image of the boilerplate running

Image of Client TypeScript Code with ES6 Import Syntax

Image of compiled client side JavaScript, showing ES6 Import Syntax

2 Likes

Well done Sean, it looks interesting!

I’m not sure what the “client” and “server” are for though. Three.js is not a client-server application, so I’m a bit confused, could you explain a bit?

I did something similar, it’s pretty much the same thing as yours, but it uses Webpack and includes GLSL importers for custom shaders.

2 Likes

I found aliasing ~:'.' to be gold.

Note that I am using ES6 imports identically in the client.ts and in the compiled client side JavaScript. I wasn’t able to get ~ to work.

Very good.
I was able to get it to work without using webpack.

At some point when you write a threejs project, you probably want to consider how you are going to serve it. You have many options.
If you are like me, and you like using TypeScript, and you like NodeJS, then this is perfect.
It’s only a tiny project, and you continue to have all the options in the world in case you want to extend the server or client further.
Example, I can include socket.io, and quickly write communications between the server and client components, and all using TypeScript, and within the same project, since I have a tendency to be a full stack developer who uses three.js, Socket.IO and NodeJS, and others.
I understand that this is not the forum for it, but if you want use SocketIO in TypeScript, then I have created a course for it. Creating Realtime Multiplayer Interactive Content using Socket.io and TypeScript. This project is only a moment away from writing a real time multiplayer 3d game, using three.js, Socket.IO and TypeScript, and also served using NodeJS. Once I have created the content, I will provide the link.

1 Like

What service do you use to host your Node.js environment? I tried HostGator for a while, but it got pricey after the introductory rate.

Digital Ocean. At the moment you get $100 free for 30 days. That’s 20 x $5 droplets for a month. Ubuntu, Centos, etc. https://m.do.co/c/23d277be9014
or
Hetzner Cloud https://www.hetzner.com.
You can get Ubuntu, Centos, etc for about $2.50 a month.
Both companies are reliable. But the Digital Ocean free offer is very useful if you want to try things out.

1 Like