三.js 加载 .OBJ 文件 - 为什么有些渲染平面？

Question

我正在使用相同的通用代码从 OBJ 文件（从网络上的网站免费获得）加载基本网格对象（无纹理）。

有些物体的渲染效果很好，因为不同的面会向相机反射不同强度的光。但其他物体只是呈现均匀的哑光颜色，因此无法看到它们的形状。

我查看了文件内部并注意到了各种不同之处。例如，一个成功的文件包含具有以下初始字符 v、vt、vn、f、s（顶点、顶点纹理、顶点法线、面、平滑）的记录。不成功文件的示例具有以下初始字符：v、vt、f。

这是我正在使用的代码。

function F_Load_OBJ_Model ( givenFilespec, givenName, givenScene, givenHexColorStr, posX, posY, posZ,  rotX, rotY, rotZ, scaleX, scaleY, scaleZ )
{

var OBJLoader = new THREE.OBJLoader();

OBJLoader.load( givenFilespec, F_make_LoadedOBJ_Handler ( givenName, givenScene, givenHexColorStr, posX, posY, posZ,  rotX, rotY, rotZ, scaleX, scaleY, scaleZ ) );

}


function F_make_LoadedOBJ_Handler( givenName, givenScene,     givenHexColorStr, posX, posY, posZ, rotX, rotY, rotZ, scaleX, scaleY, scaleZ )
{
    //... See Tapio's answer (callback factory for use in loops) 
    //... at http://stackoverflow.com/questions/10920372/associate-loaded-json-files-with-a-name-for-later-access
    //... This is useful in case have a loop loading multiple objects asynchronously.

return function ( object )
{
    //... Note that <object> is a THREE Object3D which can have 1 or more child meshes.
    //... But I will assume that there is only one child mesh.

    //var material = new THREE.MeshBasicMaterial();
    //eval( givenName + " = new THREE.Mesh( geometry, material );" );
    //eval ( " var thisMeshOb =" + givenName );
    //eval( givenName + " = object.children[0];" ); //....OK alias

    eval( givenName + " = object.children[0].clone();" );//... also OK

    //object.delete(); //... not possible or neccy, javascript will delete any object which cannot be referred to again.

    eval ( " var thisMeshOb =" + givenName );//... alias used for following common local commands

    thisMeshOb.position.set( posX, posY, posZ );
    thisMeshOb.rotation.set( rotX, rotY, rotZ );
    thisMeshOb.name = givenName; 
    thisMeshOb.scale.set( scaleX, scaleY, scaleZ );
    givenScene.add( thisMeshOb );
    //xxx thisMeshOb.material.type = THREE.MeshLambertMaterial();

    thisMeshOb.material.color.setHex( givenHexColorStr ) ;//...("0xff0000");

    thisMeshOb.geometry.computeFaceNormals(); //...no effect
    thisMeshOb.geometry.normalsNeedUpdate = true; //... no effect

    //... for PHONG ... floorGeometry.computeVertexNormals();   

    thisMeshOb.updateMatrix(); //... without this the next is not effective!?
    xxx = SOW_F_grob_Add_to_Target_Set( thisMeshOb );
};

}//... EOF F_make_LoadedOBJ_Handler. 

我猜这可能与缺少顶点法线有关。但是添加代码来更新它们对最终结果没有影响。

那么文件有问题还是我可以在 THREE.js 中做一些事情来使它们正确呈现？

Answer 1

您已经正确地发现，平面文件没有“vn”信息。

“vn”表示“顶点法线”——即（平滑的）法线所面对的方向。

您可以尝试调用thisMeshOb.geometry.computeFaceNormals(); 之类的名称，并可能在其后加上thisMeshOb.geometry.computeVertexNormals();——然后设置thisMeshOb.geometry.normalsNeedUpdate = true;——这将直接在THREE 中计算一组新的法线。

您只需要在每个会话中调用一次，在读入时，顺便说一句——无需重新计算每一帧。