关于javascript：THREE.js OBJLoader-加载到Geometry，进行操作，然后保存到BufferGeometry


THREE.js OBJLoader - load to Geometry, manipulate, then save to BufferGeometry

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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);
});

结果如下：

apparently Flat Shading

如果删除行computeFaceNormals()，则模型将呈现相同的效果。
如果我删除了computeVertexNormals(true)，则该对象将在没有光照的情况下呈现(黑色)-因此我知道这正在做某事。

如果我在这段代码中更改了MeshPhongMaterial的color属性，则颜色也会更改，因此我也知道这是可行的。

我尝试使用顶点和法线帮助程序来确定问题所在，但是它们失败了，因为使用BufferGeometry时，面和顶点不会存储为数组。

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

由于我将加载在Blender中生成的用于不同人物的多个.obj文件，每个文件目前约为2MB，因此我宁愿在浏览器上进行阴影处理，而不是将其"烘焙"到文件中，如果这样做会增加文件大小。

问题：我在这里错过了什么吗？要么，
有没有一种方法可以将.obj文件加载为标准Geometry，计算法线，应用阴影，然后另存为BufferGeometry？

ps。我可能还需要法线来进一步追踪光线。

如果要使用最新的加载程序(r73)，我们还可以将BufferGeometry转换为Geometry，然后返回！

唯一需要注意的是，在计算顶点法线之前，我必须合并这些顶点。 我猜想从缓冲区转换时会把三角形弄乱，所以我们必须先将它们合并。

1
2
3
4
5
 var geometry = new THREE.Geometry().fromBufferGeometry( child.geometry );
 geometry.computeFaceNormals();
 geometry.mergeVertices();
 geometry.computeVertexNormals();
 child.geometry = new THREE.BufferGeometry().fromGeometry( geometry );

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

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

使用此方法加载您的.obj，然后您可以操纵几何，直到您需要它为止，然后创建一个新的BufferGeometry并使用BufferGeometry.fromGeometry(geometry)将几何加载到其中，以获取性能。 我的工作很好。