Question

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

某些物体呈现OK，因为不同的脸部会向相机反射不同强度的光线。但是其他物体只会呈现均匀的哑光色，因此无法看到它们的形状。

我查看了文件并发现了各种不同之处。例如，一个成功的文件包含具有以下初始字符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

您已经正确地发现平面文件没有＆＃34; vn＆＃34;资讯

＆＃34; VN＆＃34;意味着＆＃34;顶点正常＆＃34; - 即（平滑的）法线面向的方向。

您可以尝试调用thisMeshOb.geometry.computeFaceNormals();之类的内容，然后使用thisMeshOb.geometry.computeVertexNormals();跟随它 - 然后设置thisMeshOb.geometry.normalsNeedUpdate = true; - 这将直接在THREE中计算一组新的法线。

你只需要在每个会话中调用一次，在读入时间，顺便说一下 - 不需要重新计算每一帧。

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

1 个答案: