Learn Three.js for 3D Computer Graphics/

...

/

Testing and Experimenting with the Examples

Testing and Experimenting with the Examples

Build and run the first Three.js example.

We'll cover the following...

Install the dependencies

First, we need to download the external libraries. For instance, Three.js is one of the dependencies we need to download. 

Press + to interact
{
  "name": "ltjs-fourth",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "author": "",
  "license": "ISC",
  "dependencies": {
    ...
    "lil-gui": "^0.16.0",
    "mandelbrot-canvas": "^0.0.2",
    "perlin": "^1.0.0",
    "three": "^0.142.0",
    "three-custom-shader-material": "^3.3.6",
    "troika-three-text": "^0.46.4",
    "tween.js": "^16.6.0",
    "webpack-dev-server": "^4.7.3"
    ...
  },
  "devDependencies": {
    ...
    "serve": "^13.0.2",
    "webpack": "^5.67.0",
    "webpack-cli": "^4.9.1"
    ...
  },
  "scripts": {
    "build": "webpack build",
    "watch": "webpack --watch",
    "serve": "webpack serve --open",
    "serve:reload": "webpack build && webpack serve"
  },
}

We need two types of dependencies, one for runtime and the other for development. In the dependencies section (lines 8–19), we have the library three (line 13). This is the primary library for 3D graphics. We also need a build tool to bundle and optimize our projects. In the devDependencies section (lines 20–24), we will use webpack (line 23) for this purpose.

  • To download all the dependencies, we run the following command: 

Press + to interact
npm install

The preceding command will start downloading all the required JavaScript libraries and store these in the node_modules folder. 

  • Next, we need to build the examples. Doing so will combine our source code and the external libraries into a single file, which we can show ...