Importing Three.js Modules

Video Lecture

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

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

<>