var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 1, 5100); scene.add(camera); var front = getPlane(0xC986AF); front.position.z = -250; scene.add(front); var back = getPlane(0xA75486); back.rotation.y = THREE.Math.degToRad(180); back.position.z = 250; scene.add(back); var right = getPlane(0x801D15); right.rotation.y = THREE.Math.degToRad(-90); right.position.x = 250; scene.add(right); var left = getPlane(0xD4726A); left.rotation.y = THREE.Math.degToRad(90); left.position.x = -250; scene.add(left); var top = getPlane(0xFFB4AA); top.rotation.x = THREE.Math.degToRad(90); top.position.y = 250; scene.add(top); var bottom = getPlane(0x550A00); bottom.rotation.x = THREE.Math.degToRad(-90); bottom.position.y = -250; scene.add(bottom); var renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); renderer.render(scene, camera); function getPlane(color) { var geometry = new THREE.PlaneGeometry(500, 500); var material = new THREE.MeshBasicMaterial({ 'color': color }); return new THREE.Mesh(geometry, material); } rotate(); function rotate() { camera.rotation.y += 0.005; renderer.render(scene, camera); requestAnimationFrame(rotate); }