Box Wireframe

Wireframe cube using MeshBasicMaterial.

What this code does

- MeshBasicMaterial: simplest material type that doesn't require lighting.
- Wireframe Mode: wireframe: true renders only the edges of triangles.
- BoxGeometry: creates a cube with 12 triangles (2 per face).
- Animation: dual-axis rotation shows wireframe structure from all angles.
- Debug Tool: wireframe mode is excellent for understanding mesh topology.

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.z = 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)

const mesh = new THREE.Mesh(
  new THREE.BoxGeometry(1, 1, 1),
  new THREE.MeshBasicMaterial({ color: 0x9bdc6e, wireframe: true })
)
scene.add(mesh)

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

← Back