Clever Geek Handbook

Three.js: Why are my shoes loading upside down and how do I get rid of that crazy metallic look?

Why is my boot loading upside down? How do I get it to load properly? And how do I get rid of those crazy metallic reflections?

Here's the working code and here's the json model file . (I tried to do a plunker, but couldn't get around the CORS issue requiring an external jumb jumb file to be loaded :()

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

}
+3


source to share


2 answers


Sorry to disagree with the previous answer ...

  • Your model is upside down because your camera's field of view camera.fov

    is 275 degrees. A reasonable value is 50 degrees.

  • All of yours MeshPhongMaterial

    are shininess

    out of 50. This is a perfectly reasonable value and rather low. material.shininess

    can be from 1 to 1000 or more for MeshPhongMaterial

    .

  • The "crazy metallic look" is that you set the specular reflection of the material - property material.specular

    - too high. In your case, a reasonable value is:

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



three.js r.71

+4


source


If your model is upside down in your scene, it might just be exported to the head. There may be a mistake with Y-up, the best thing to fix is ​​in your 3D software. If you want to fix this in code, you can simply rotate the geometry 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 don't want to get nervous with geometry by doing obj.rotation.z = Math.PI/2;



crazy metal look

is the mirror illumination of your MeshPhongMaterial

. All of your materials have shininess

50, which is higher than usual. Set this value lower and / or darken the color specular

that is the highlight color.

Materials take a while to look good in three .js, you also have to play with values ​​depending on your lighting.

+3


source






More articles:


All Articles