CODEWITHSUNDEEP
three.js
gratschultz2013
gratschultz2013

Reputation: 35

How to change color with three.js?

Im having issues, I downloaded the source code for a simple three.js project to play around with for fun. Im trying to change the colors of the object but when changing the hex code, saving, and refreshing the browser, the color DOES NOT CHANGE. Any help would be greatly appreciated.

function init() {

// heeere we go !

var blue = new THREE.Color(0x7658ef);
var pink = new THREE.Color(0xfca4c5);

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

var renderer = new THREE.WebGLRenderer({ alpha: true });
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

//THREEx.WindowResize(renderer, camera);
var shape = [];
geometry = new THREE.IcosahedronGeometry(2.5,0);
material = new THREE.MeshNormalMaterial({ color: 0x0000ff });
shape[0] = new THREE.Mesh( geometry, material );
shape[1] = new THREE.Mesh( geometry, material );
shape[2] = new THREE.Mesh( geometry, material );
shape[0].position.set(0,5,0);
shape[1].position.set(0,5,0);
shape[2].position.set(0,5,0);
scene.add(shape[0],shape[1],shape[2]);

var light = new THREE.PointLight(0xfca4c5);
light.position.set(0,250,0);
scene.add(light);

camera.position.set(3,4,10); // x y z

function render() {
    requestAnimationFrame( render );

    shape[0].rotation.x += 0.035;
    shape[0].rotation.y -= 0.005;
    shape[1].rotation.y += 0.015;
    shape[1].rotation.z -= 0.005;
    shape[2].rotation.z -= 0.025;
    shape[2].rotation.x += 0.005;
    renderer.render(scene, camera);
}
render();

}

init();

Upvotes: 2

Views: 6989

Answers (1)

pailhead
pailhead

Reputation: 5431

THREE.Color is an object. THREE.Material does some magic when you provide certain types of arguments to certain parameters. So when you provide a string or a number as a color, three constructs a Color object out of it.

yourMaterial.color instanceof THREE.Color === true

To change it you need to do

yourMaterial.color.setRGB(1,0,1)

Upvotes: 1

Related Questions