Hello, (Three.js) Cube!

A rotating cube using Three.js.

by mvgician

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/0.160.1/three.min.js"></script>

CSS

body {
  padding: 0;
  margin: 0;
}

canvas {
  display: block;
}

JavaScript

// scene stuff
const renderer = new THREE.WebGLRenderer({ antialias: true }) // create a renderer
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)
const camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000) // create a camera
camera.position.z = 2 // create a scene
const scene = new THREE.Scene()
scene.background = new THREE.Color(0xffffff)

// cube stuff
const geometry = new THREE.BoxGeometry(1, 1, 1) // create a cube geometry
const material = new THREE.MeshNormalMaterial() // assign it a material
const mesh = new THREE.Mesh(geometry, material)
scene.add(mesh) // and add it to the scene

window.addEventListener('resize', onWindowResize, false) // resize

function onWindowResize () {
  camera.aspect = window.innerWidth / window.innerHeight
  camera.updateProjectionMatrix()
  renderer.setSize(window.innerWidth, window.innerHeight)
}

function animate () {
  requestAnimationFrame(animate)
  // update the cube's rotation on each frame
  mesh.rotateX(0.005)
  mesh.rotateY(0.01)
  mesh.rotateZ(0.001)
  renderer.render(scene, camera)
}
animate()