Primitives Wall

A row of basic primitives rotating under lights.

What this code does

- Four Basic Primitives: box, sphere, cone, and torus geometries in a row.
- Shared Material: all primitives use the same MeshStandardMaterial for consistency.
- Variable Rotation: each primitive rotates at slightly different speeds.
- Standard Lighting: ambient light for fill + directional light for definition.
- Geometry Comparison: demonstrates different built-in Three.js primitive shapes.

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(60, width / height, 0.1, 1000)
camera.position.set(3, 2, 6)

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 mats = new THREE.MeshStandardMaterial({
  color: 0x9bdc6e,
  roughness: 0.5
})
const items = [
  new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), mats),
  new THREE.Mesh(new THREE.SphereGeometry(0.6, 32, 32), mats),
  new THREE.Mesh(new THREE.ConeGeometry(0.6, 1, 32), mats),
  new THREE.Mesh(new THREE.TorusGeometry(0.5, 0.2, 16, 32), mats)
]
items.forEach((m, i) => {
  m.position.x = (i - 1.5) * 1.6
  scene.add(m)

})

const ambient = new THREE.AmbientLight(0xffffff, 0.4)
const dir = new THREE.DirectionalLight(0xffffff, 1)
dir.position.set(2, 3, 2)
scene.add(ambient, dir)

function animate() {
  requestAnimationFrame(animate)
  items.forEach((m, i) => {
    m.rotation.y += 0.01 + i * 0.002
  })
  controls.update()
  renderer.render(scene, camera)
}
animate()

← Back