Skip to content

Importing Three.js Modules

Video Lecture

Importing Three.js Modules Importing Three.js Modules

 (Pay Per View)

You can use PayPal to purchase a one time viewing of this video for $1.49 USD.

Pay Per View Terms

  • One viewing session of this video will cost the equivalent of $1.49 USD in your currency.
  • After successful purchase, the video will automatically start playing.
  • You can pause, replay and go fullscreen as many times as needed in one single session for up to an hour.
  • Do not refresh the browser since it will invalidate the session.
  • If you want longer-term access to all videos, consider purchasing full access through Udemy or YouTube Memberships instead.
  • This Pay Per View option does not permit downloading this video for later viewing or sharing.
  • All videos are Copyright © 2019-2025 Sean Bradley, all rights reserved.

Description

The core of Three.js is focused on the most important components of the 3D engine. For example, that is classes related to managing the scene graph, cameras, renderers, primitive geometries, textures, lighting, shadows and more.

To keep the core small and manageable to quickly download, many modules, such as 3D model loaders, controls and other utilities can be downloaded as addons from the examples/jsm folder.

If we want to use these extra modules in our projects, then we can import them separately.

The ./node_modules/three/examples/jsm/ directory, which was installed as part of Threejs library, contains many useful extra modules that we can use in our Threejs projects.

In this lesson, I will show you how to import the OrbitControls into the existing TypeScript project.

Lesson Script

./src/main.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
import './style.css'
import * as THREE from 'three'
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'

const scene = new THREE.Scene()

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
camera.position.z = 1.5

const renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)

window.addEventListener('resize', () => {
  camera.aspect = window.innerWidth / window.innerHeight
  camera.updateProjectionMatrix()
  renderer.setSize(window.innerWidth, window.innerHeight)
})

new OrbitControls(camera, renderer.domElement)

const geometry = new THREE.BoxGeometry()
const material = new THREE.MeshNormalMaterial({ wireframe: true })

const cube = new THREE.Mesh(geometry, material)
scene.add(cube)

function animate() {
  requestAnimationFrame(animate)

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

  renderer.render(scene, camera)
}

animate()

If your project is not currently running,

npm run dev

and visit http://localhost:5173/

Working Example

<>