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

3 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

Hey sean i’ve been searching for something like this in the past days so thank you, this boilerplate use module bundler like webpack or without?

it now uses webpack since its updated for three r130

Sean, thanks very much for this work! I am having an issue trying to extend a Three class using the boilerplate. Seems like a transpiler issue, but the error remains even after setting target to ES6. Any suggestion would be greatly appreciates. Thx.

Error: “Class constructor Group cannot be invoked without ‘new’”
I am calling super() in 1st line of cstr.

I just extended the THREE.Group using this

class Group2 extends THREE.Group {
  myvar: string;
  constructor() {
    super();
    this.myvar = "abc";
  }
}

const group = new Group2();
console.log(group.myvar);

and it worked after adding the target to the tsconfig

{
    "compilerOptions": {
        "target": "ES6",
        "moduleResolution": "node",
        "strict": true,
    },
    "include": ["**/*.ts"]
}

I’m using
@types/three: 0.131.1
three: 0.132.2