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

如果您的模型在您的场景中是颠倒的，那么它可能只是头朝下导出。可能是 Y-up 的错误，最好在您的 3d 软件中修复它。如果你想在代码中修复它，你可以将几何图形旋转 180 度：

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

或者你也可以只旋转你的网格（-group），如果你不想通过做 obj.rotation.z = Math.PI/2;

crazy metal look 是 MeshPhongMaterial 的镜面高光。您所有材料的 shininess 为 50，高于平时。将此值设置得较低 and/or 使高亮颜色 specular 变暗。

材质需要一些时间调整才能在 three.js 中看起来不错，您还必须根据光照调整这些值。

Answer 2

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

您的模型是颠倒的，因为您相机的视野 camera.fov 是 275 度。一个合理的值是 50 度。
您所有的 MeshPhongMaterial 的 shininess 都是 50。这是一个非常合理的值，而且相当低。对于 MeshPhongMaterial.

material.shininess

"crazy metal look"是因为你设置了material的镜面反射率——material.specular属性 -- 太高了。在您的情况下，合理的价值是：

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

three.js r.71

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

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

javascript

three.js

blender