cube with different face colors

by Browork

HTML

<script src="http://mrdoob.github.com/three.js/build/three.min.js"></script>
<script src="http://mrdoob.github.com/three.js/examples/js/controls/TrackballControls.js"></script>

JavaScript

import * as THREE from "https://threejs.org/build/three.module.js";
import { TrackballControls } from 'https://three/examples/jsm/controls/TrackballControls.js';


var scene = new THREE.Scene(); 
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000); 
var renderer = new THREE.WebGLRenderer(); 

renderer.setSize(window.innerWidth, window.innerHeight); 
renderer.setClearColor(0xffffff, 0); // bg color
document.body.appendChild(renderer.domElement); // displays canvas

camera.position.z = 13; // move away to see coord center
camera.position.y = 0;

controls = new THREE.TrackballControls(camera, renderer.domElement);

// CUBE
var geometry = new THREE.CubeGeometry(2,2,2);
var cubeMaterials = [ 
    new THREE.MeshBasicMaterial({color:0xff0000 ,side: THREE.FrontSide}),
    new THREE.MeshBasicMaterial({color:0x00ff00, side: THREE.FrontSide}), 
    new THREE.MeshBasicMaterial({color:0x0000ff, side: THREE.FrontSide}),
    new THREE.MeshBasicMaterial({color:0xffff00, side: THREE.FrontSide}), 
    new THREE.MeshBasicMaterial({color:0xff00ff, side: THREE.FrontSide}), 
    new THREE.MeshBasicMaterial({color:0x00ffff, side: THREE.FrontSide}), 
]; 
// Create a MeshFaceMaterial, which allows the cube to have different materials on each face 
var cubeMaterial = new THREE.MeshFaceMaterial(cubeMaterials); 
var cube = new THREE.Mesh(geometry, cubeMaterial);
scene.add( cube );

var render = function () { 
    requestAnimationFrame(render); 
    controls.update();
    renderer.render(scene, camera); 
};

render();