THREE.js OBJLoader - 加载到几何体,操作,然后保存到BufferGeometry

Question

我正在尝试确定为什么我无法平滑加载OBJLoader的阴影几何体.

var loader = new THREE.OBJLoader(manager);
loader.load('/manmodel/js/man.obj', function (object, materials) {
    console.log(object);
    console.log(materials);
    man = object;
    man.traverse(function (child) {
        if (child instanceof THREE.Mesh) {
            child.geometry.computeFaceNormals();
            child.geometry.computeVertexNormals( true );
            child.material = new THREE.MeshPhongMaterial({
                color: 'white',
                shading: THREE.SmoothShading // <-----------  THIS IS THE PROBLEM
            });
        }
    });
    man.position.y = -10;
    scene.add(man);
});

这是结果:

如果我删除行computeFaceNormals(),模型呈现相同.如果我删除computeVertexNormals(true),对象渲染时没有光照(黑色) - 所以我知道这是做某事.

如果我在这段代码中更改了MeshPhongMaterial的颜色属性,颜色会发生变化,所以我也知道这是有效的.

我试图使用顶点和普通助手来确定问题所在,但它们失败了,因为使用BufferGeometry时,面和顶点不会存储为数组.

我也尝试修改man.obj文件,将's'值从'off'更改为1.这没有做任何事.

因为我将为Blender中生成的不同人物加载几个.obj文件,目前每个大约2MB,我更喜欢在浏览器上进行着色而不是将其"烘焙"到文件中,如果这样会增加文件大小.

问题:我在这里遗漏了什么吗？或者,有没有办法将.obj文件作为标准几何体加载,计算法线,应用着色,然后另存为BufferGeometry？

PS.我可能还需要在线下进行光线追踪的法线.

Answer 1

由于性能原因,最新版本的ObjLoader将.obj解析为BufferGeometry.如果您回顾GitHub上的历史记录,您可以找到解析为Geometry的先前版本:

https://github.com/mrdoob/three.js/blob/a321ba05f02ae3a1586a4060a53f5ad63b90729b/examples/js/loaders/OBJLoader.js

使用此加载.obj然后您可以根据需要操作几何体直到您拥有它,然后创建一个新的BufferGeometry并使用BufferGeometry.fromGeometry(geometry)将Geometry加载到其中以获得性能.我有这个很好的工作.

Answer 2

如果我们想使用最新的加载器(r73),我们也可以将其转换BufferGeometry为a Geometry,然后再返回!

唯一需要注意的是,我必须在计算顶点法线之前合并顶点.我猜测从缓冲区转换为三角形,所以我们必须先将它们合并.

 var geometry = new THREE.Geometry().fromBufferGeometry( child.geometry );
 geometry.computeFaceNormals();
 geometry.mergeVertices();
 geometry.computeVertexNormals();
 child.geometry = new THREE.BufferGeometry().fromGeometry( geometry );