I'm currently delving into the world of OOP with Three.js, which is proving to be quite challenging. To start, I decided to create a box within the scene. Now, my next goal is to change the color of one face of that cube.
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 100, window.innerWidth/window.innerHeight, 0.1, 1000 );
camera.position.set(5, 5, 10);
var geometry = new THREE.BoxGeometry(5,2,5);
var material = new THREE.MeshBasicMaterial({color:0xff0ff0, side:THREE.DoubleSide});
var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
// Here is where I attempt to change the color of the face, but it's not working
mesh.geometry.faces[5].color.setHex(0xffffff);
var wireframe = new THREE.WireframeHelper(mesh, 0x00ff00);
scene.add(wireframe);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
renderer.render(scene, camera);
EDIT: The reason why my initial attempt failed was due to using the color 0xffffff. As long as the color isn't set to white (0xffffff), this program should work as intended.