Three.js TypeScript Boilerplate

Resources
1

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

screengrab1
screengrab1773×674 65.7 KB

Image of Client TypeScript Code with ES6 Import Syntax

screengrab2
screengrab21920×1080 305 KB

Image of compiled client side JavaScript, showing ES6 Import Syntax

screengrab3
screengrab31920×1080 366 KB

3 Likes
2

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?

3

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
4

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

5

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.

6

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

7

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
8

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.

9

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
10

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?

11

it now uses webpack since its updated for three r130

12

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.

13

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

14

I am using your boilerplate from github, the annotations branch. i am trying to import a .js file to play with this effect here:https://fake-glow-material-threejs.vercel.app/ so i include it in client.ts with this way import { FakeGlowMaterial } from 'three/examples/jsm/postprocessing/FakeGlowMaterial.js'' but i get this error ``

TS7016: Could not find a declaration file for module ‘three/examples/jsm/postprocessing/FakeGlowMaterial.js’. ‘/Users/alex/Sites/Three.js-TypeScript-Boilerplate/node_modules/three/examples/jsm/postprocessing/FakeGlowMaterial.js’ implicitly has an ‘any’ type.

can you please saw me the way to import any .js i might need inside?

15

FakeGlowMaterial doesn’t come with a type definition.

So quickest thing to do is create a new .ts file in the project

./src/client/FakeGlowMaterial.ts

Copy the .js source from the original repo page at fake-glow-material-threejs/src/FakeGlowMaterial.js at 4d155fbbfabd60689be6861564dafe28b19c08e6 · ektogamat/fake-glow-material-threejs · GitHub into it and save.

Change line 21 of the new file ./src/client/FakeGlowMaterial.ts to

constructor(parameters: any = {}) {

Import it into the ./src/client/client.ts like this

import FakeGlowMaterial from './FakeGlowMaterial'

And now you can use it,

E,g.,

const fakeGlowMaterial = new FakeGlowMaterial({ glowColor: '#8039ea' })
const torusMesh = new THREE.TorusKnotGeometry(0.8, 0.5, 128, 128)
const Torus = new THREE.Mesh(torusMesh, fakeGlowMaterial)
scene.add(Torus)