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 = window.innerWidth
    let height = window.innerHeight
    renderer.setSize(width, height)
    camera.aspect = width / height
    camera.updateProjectionMatrix()
})

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


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



/**
 * Create the shape
 */
let geometry = new THREE.BoxGeometry(1000, 1000, 1000)
let cubeMaterials = [
    new THREE.MeshBasicMaterial({
        map: new THREE.TextureLoader().load('https://www.1min30.com/wp-content/uploads/2018/07/negz.jpg'),
        side: THREE.DoubleSide
    }),
    new THREE.MeshBasicMaterial({
        map: new THREE.TextureLoader().load('https://www.1min30.com/wp-content/uploads/2018/07/posz.jpg'),
        side: THREE.DoubleSide
    }),
    new THREE.MeshBasicMaterial({
        map: new THREE.TextureLoader().load('https://www.1min30.com/wp-content/uploads/2018/07/posy-e1531726368774.jpg'),
        side: THREE.DoubleSide
    }),
    new THREE.MeshBasicMaterial({
        map: new THREE.TextureLoader().load('https://www.1min30.com/wp-content/uploads/2018/07/negy-e1531726194828.jpg'),
        side: THREE.DoubleSide
    }),
    new THREE.MeshBasicMaterial({
        map: new THREE.TextureLoader().load('https://www.1min30.com/wp-content/uploads/2018/07/posx.jpg'),
        side: THREE.DoubleSide
    }),
    new THREE.MeshBasicMaterial({
        map: new THREE.TextureLoader().load('https://www.1min30.com/wp-content/uploads/2018/07/negx.jpg'),
        side: THREE.DoubleSide
    })
]

camera.position.z = 3
let cubeMaterial = THREE.MeshFaceMaterial(cubeMaterials)

let cube = new THREE.Mesh(geometry, cubeMaterial)
scene.add(cube)

/**
 * Game logic
 */
 let update = function() {
 }

 /**
  * 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
  3. https://cdn.rawgit.com/mrdoob/three.js/master/src/loaders/ObjectLoader.js