Three.js: Why's my shoe loading upside down and how do I get rid of that crazy metal look?

Question

Why's my shoe loading upside down?, how to get it to load the right way up? And how do I get rid of those crazy metallic highlights?

Here's the working code and here's the json model file. (I tried to do a plunker, but couldn't get around CORS issue of needing to load an external 6mb json file :( )

Here's my JS:

var scene, camera, renderer, geometry, material, cube, group, textureUrl, texture;

init();
render();

function init() {

    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera( 275, window.innerWidth / window.innerHeight, 0.1, 10000 );
    camera.position.z = 20;

    controls = new THREE.OrbitControls( camera);

    //set background to have transparency - alpha: true
    renderer = new THREE.WebGLRenderer({ alpha: true });
    renderer.setSize(window.innerWidth, window.innerHeight);

    document.getElementById("viewport").appendChild(renderer.domElement);

    var loader = new THREE.ObjectLoader();  
    loader.load("models/shoe4.json", function (obj) {
        scene.add (obj);
    });


  // lights

  light = new THREE.DirectionalLight( 0xffffff );
  light.position.set( 300, 300, 300 );
  scene.add( light );

  light = new THREE.DirectionalLight( 0x002288 );
  light.position.set( -300, -300, -300 );
  scene.add( light );


  light = new THREE.AmbientLight( 0x222222 );
 scene.add( light );



function render() {
    requestAnimationFrame(render);
    scene.rotation.y += 0.005;
    renderer.render(scene, camera);

}

Answer 1

Sorry to disagree with the previous answer...

1. Your model is upside down because the field-of-view of your camera, camera.fov, is 275 degrees. A reasonable value is 50 degrees.

2. All your MeshPhongMaterials have a shininess of 50. That is a perfectly reasonable value, and fairly low. material.shininess can range from 1 to 1000 or more for MeshPhongMaterial.

3. The "crazy metal look" is because you have set the specular reflectance of the material -- the material.specular property -- too high. A reasonable value in your case is:

   material.specular.setRGB( 0.05, 0.05, 0.05 );

three.js r.71