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

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

您的模型是颠倒的，因为您的相机camera.fov的视野是275度。合理的值是50度。
你所有MeshPhongMaterial的{{1}}都是50，这是一个非常合理的价值，相当低。 shininess的{{1}}范围为1到1000或更多。
疯狂的金属外观＆＃34;是因为你设置了材质的镜面反射 - material.shininess属性 - 太高了。您的案例中合理的价值是：

MeshPhongMaterial

three.js r.71

Answer 2

如果您的模型在您的场景中颠倒了，那么它可能只是出口在它的头上。可能是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，比平常要高。将此值设置得更低和/或使specular颜色变暗，这是高光的颜色。

材料需要一些时间调整才能在three.js中看起来很好，你必须根据你的光线来调整值。

Three.js：为什么我的鞋子颠倒了，我怎么摆脱那种疯狂的金属外观？

2 个答案: