javascript - Three.js:为什么我的鞋子装反了，我该如何摆脱那种疯狂的金属外观？

Question

为什么我的鞋子装载颠倒了？如何让它以正确的方式装载？我该如何去除那些疯狂的金属高光？

Here's the working code和 here's the json model file . (我尝试做一个 plunker，但无法解决需要加载外部 6mb json 文件的 CORS 问题 :( )

这是我的 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

很抱歉不同意之前的回答...

1. 您的模型是颠倒的，因为您的相机 camera.fov 的视野是 275 度。一个合理的值是 50 度。

2. 您所有的 MeshPhongMaterial 的光泽度 都是 50。这是一个非常合理的值，而且相当低。对于 MeshPhongMaterial，material.shininess 的范围可以从 1 到 1000 或更多。

3. “疯狂的金属外观”是因为您将 Material 的镜面反射率 - material.specular 属性设置得太高了。您的情况的合理值(value)是:

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

three.js r.71