let scene = new THREE.Scene()
let camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)

let renderer = new THREE.WebGLRenderer()

renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)
window.addEventListener('resize', () => {
    let width = document.querySelector('#renderer').innerWidth
    let height = document.querySelector('#renderer').innerHeight
    renderer.setSize(width, height)
    camera.aspect = width / height
    camera.updateProjectionMatrix()
})

controls = new THREE.OrbitControls(camera, renderer.domElement)

/**
 * Create the shape
 */
let geometry = new THREE.BoxGeometry(10, 10, 10)
let cubeMaterials = [
    new THREE.MeshBasicMaterial({
        map: new THREE.TextureLoader().load('https://picsum.photos/700/700/?random'),
        side: THREE.DoubleSide
    }),
    new THREE.MeshBasicMaterial({
        map: new THREE.TextureLoader().load('https://picsum.photos/500/500/?random'),
        side: THREE.DoubleSide
    }),
    new THREE.MeshBasicMaterial({
        map: new THREE.TextureLoader().load('https://picsum.photos/800/800/?random'),
        side: THREE.DoubleSide
    }),
    new THREE.MeshBasicMaterial({
        map: new THREE.TextureLoader().load('https://picsum.photos/550/550/?random'),
        side: THREE.DoubleSide
    }),
    new THREE.MeshBasicMaterial({
        map: new THREE.TextureLoader().load('https://picsum.photos/520/520/?random'),
        side: THREE.DoubleSide
    }),
    new THREE.MeshBasicMaterial({
        map: new THREE.TextureLoader().load('https://picsum.photos/620/620/?random'),
        side: THREE.DoubleSide
    }),
]

let cubeMaterial = THREE.MeshFaceMaterial(cubeMaterials)

/**
 * Create a material
 */
let cube = new THREE.Mesh(geometry, cubeMaterial)
scene.add(cube)


camera.position.z = 15

let ambientLight = new THREE.AmbientLight(0xFFFFFF, 1.0)
scene.add(ambientLight)



/**
 * Game logic
 */
 let update = function() {
    cube.rotation.x += 0.005;
 }

 /**
  * Draw scene
  */
 let render = function() {
     renderer.render(scene, camera)
 }

 /**
  * Run game loop (update, render, repeat)
  */
 let GameLoop = function() {
    requestAnimationFrame(GameLoop)
    update()
    render()
 }

 GameLoop()

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdn.rawgit.com/mrdoob/three.js/master/build/three.min.js
  2. https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js