Search⌘ K
AI Features
Home
Courses
Learn Three.js for 3D Computer Graphics

Testing and Experimenting with the Examples

Explore the process of setting up, building, and running Three.js example projects, including installing dependencies, using build tools like webpack, and testing 3D scenes in a browser. Understand the project structure and workflow that helps you efficiently create and render your first 3D scene with Three.js.

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. 

Node.js
{
  "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: 

Shell-20
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 ...