How to add reflectivity to the golden ring in Three.js? - three.js

Question

I have an stl file of the gold ring mesh exported from the blender. When I imported it into three JS and add image texture to get the gold metal effect, the texture is not getting applied properly.
Any suggestions?
Here is the code,
loader.load( objaddress, stladdress, function ( object ) {
object.traverse( function ( child ) {
if ( child instanceof THREE.Mesh ) {
material = new THREE.MeshPhongMaterial({map: new THREE.ImageUtils.loadTexture("Gold.jpg")});
child.material = material;
}
} );
This is the jpg file url I've used:
http://cdn.designbeep.com/wp-content/uploads/2012/10/7.gold-textures.jpg

Answer 1

Once the geometry is loaded from the external file, use THREE js ShaderMaterial to create the material for the loaded geometry. Inside the ShaderMaterial specify the image texture along with the smoothness, noise, wrapping to get a better look and feel.
For reference: http://threejs.org/docs/#Reference/Materials/ShaderMaterial
Here is the code to create the Shader material for the geometry,
var material = new THREE.ShaderMaterial({
uniforms: {
tMatCap: {
type: 't',
value: THREE.ImageUtils.loadTexture('Gold.jpg')
},
time: {
type: 'f',
value: 0
},
bump: {
type: 'f',
value: 0
},
noise: {
type: 'f',
value: .04
},
useNormal: {
type: 'f',
value: 0
},
normalScale: {
type: 'f',
value: .5
},
normalRepeat: {
type: 'f',
value: 1
} });