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);

}

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);

}

• javascript
• three.js
• blender

2 Answers 2

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

If your model is upside down in your scene then maybe its just exported on its head. Could be an error with Y-up, best to fix it in your 3d Software. If you want to fix it in code, you can just rotate the geometry by 180 degrees:

var rotation = new THREE.Matrix4().makeRotationZ(Math.PI/2);
obj.geometry.applyMatrix(transformation);

Or you can also just rotate your mesh (-group) if you dont want to hassle with the geometry by doing obj.rotation.z = Math.PI/2;

The crazy metal look is the specular highlight of your MeshPhongMaterial. All your materials have a shininess of 50, which is higher than usual. Set this value lower and/or darken the specular color which is the color of the highlight.

Materials take some time tweaking to look good in three.js, you will have to play around with the values depending on your lighting also.