Axes + Orbit Controls

Orbit a normal-mapped cube with axes visible.

What this code does

- AxesHelper: displays X (red), Y (green), Z (blue) coordinate axes at origin.
- MeshNormalMaterial: colors faces based on surface normal vectors for debugging.
- Animation: cube rotates continuously while maintaining orbital camera control.
- OrbitControls: allows full 360° camera movement around the rotating cube.

JavaScript (plain)

import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'

const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000)
camera.position.set(2, 2, 3)

const renderer = new THREE.WebGLRenderer({ antialias: true })
renderer.setSize(width, height)

document.querySelector('#app').appendChild(renderer.domElement)

const controls = new OrbitControls(camera, renderer.domElement)
controls.target.set(0, 0, 0)
controls.update()

const axes = new THREE.AxesHelper(2)
scene.add(axes)

const box = new THREE.Mesh(
  new THREE.BoxGeometry(1, 1, 1),
  new THREE.MeshNormalMaterial()
)
scene.add(box)

function animate() {
  requestAnimationFrame(animate)
  box.rotation.y += 0.01
  controls.update()
  renderer.render(scene, camera)
}
animate()

← Back