Color of cubes face not changing

Questions
1

This was supposed to change the colors of the faces of the cube but it doesnt.
What am i doing wrong?

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 );
		document.body.appendChild( renderer.domElement );

		var geometry = new THREE.BoxGeometry( 1, 1, 1 );
		var material = new THREE.MeshBasicMaterial( { color: 0xffffff, vertexColors: THREE.FaceColors});
		var cube = new THREE.Mesh( geometry, material );
		
		scene.add( cube );

		camera.position.z = 5;

		var animate = function () {
			requestAnimationFrame( animate );
			cube.geometry.faces[0].color.setRGB(getRandomInt(0, 256), getRandomInt(0, 256), getRandomInt(0, 256));
			cube.geometry.faces[1].color.setRGB(getRandomInt(0, 256), getRandomInt(0, 256), getRandomInt(0, 256));
			cube.geometry.faces[2].color.setRGB(getRandomInt(0, 256), getRandomInt(0, 256), getRandomInt(0, 256));
			cube.geometry.faces[3].color.setRGB(getRandomInt(0, 256), getRandomInt(0, 256), getRandomInt(0, 256));
			cube.geometry.colorsNeedUpdate = true;
			cube.rotation.y += 0.01;
			cube.rotation.x += 0.01;
			

			renderer.render( scene, camera );
		};

		animate();
		
		function getRandomInt(min, max) {
          min = Math.ceil(min);
          max = Math.floor(max);
          return Math.floor(Math.random() * (max - min)) + min;
        }
2

It could be that Color.setRGB() expects values in the [0, 1] range, not in the [0, 255] range.

4 Likes