Three.js is a JavaScript library that allows developers to create 3D graphics and animations on the web. TypeScript is a superset of JavaScript that adds optional static typing and other features. In this tutorial, we will combine the power of Three.js and TypeScript to create stunning 3D graphics.


Prerequisites

Before we get started, you should have a basic understanding of TypeScript and Three.js. You should also have Node.js and npm installed on your machine.


Setting up the Project

To start, let's create a new directory for our project and initialize a new npm package. 

mkdir threejs-typescript
cd threejs-typescript
npm init -y

Next, we'll install the necessary dependencies:

npm install three typescript webpack webpack-cli webpack-dev-server ts-loader --save-dev

We'll also create a basic TypeScript configuration file (tsconfig.json) in the root directory:

{
  "compilerOptions": {
    "module": "es6",
    "target": "es5",
    "sourceMap": true
  },
  "exclude": [
    "node_modules"
  ]
}

Now let's create our project structure. We'll create a "src" directory to hold our TypeScript code and a "public" directory to hold our HTML and other static assets.

mkdir src public
touch public/index.html

In the "public" directory, let's create a basic HTML file that loads our compiled JavaScript file:

<!doctype html>
<html>
  <head>
    <title>Three.js TypeScript Demo</title>
  </head>
  <body>
    <canvas id="canvas"></canvas>
    <script src="bundle.js"></script>
  </body>
</html>


Creating a Basic Three.js Scene

Now let's create our first Three.js scene. In the "src" directory, create a new file called "app.ts" and add the following code:

import * as THREE from "three";

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

const renderer = new THREE.WebGLRenderer({
  canvas: document.querySelector("#canvas")
});

renderer.setSize(window.innerWidth, window.innerHeight);

const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

camera.position.z = 5;

function animate() {
  requestAnimationFrame(animate);

  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;

  renderer.render(scene, camera);
}

animate();
  1. Let's go through this code step by step:
  2. First, we import the Three.js library.
  3. Next, we create a new scene and camera.
  4. We create a new WebGLRenderer and pass it a reference to our canvas element.
  5. We set the renderer's size to match the size of the window.
  6. We create a new cube geometry and a green material.
  7. We create a new Mesh object using the geometry and material, and add it to the scene.
  8. We set the camera's position and rotation.
  9. Finally, we create an animate function that updates the cube's rotation and renders the scene.


Compiling and Running the Code

Now that we have our code, we need to compile it using webpack. In the root directory, create a new file called "webpack.config.js" and add the following code: 

const path = require("path");

module.exports = {
  entry: "./src/app.ts",
  output: {
    filename: "bundle.js",
path: path.resolve(__dirname, "public")
},
devServer: {
contentBase: path.join(__dirname, "public"),
compress: true,
port: 9000
},
resolve: {
extensions: [".ts", ".tsx", ".js"]
},
module: {
rules: [
{
test: /.tsx?$/,
use: "ts-loader",
exclude: /node_modules/
}
]
}
};

This configuration file tells webpack to use our "app.ts" file as the entry point, and to compile it into "bundle.js" in the "public" directory. It also sets up a development server on port 9000, and tells webpack to use the ts-loader to compile TypeScript files.

To compile our code, we can run the following command in the terminal: 

npx webpack serve --mode development

This will start the webpack development server and open the app in a web browser at http://localhost:9000.


Conclusion

In this tutorial, we learned how to create a basic Three.js scene using TypeScript, and how to compile and run our code using webpack. From here, you can start exploring the vast capabilities of Three.js and create your own stunning 3D graphics and animations.