javascript - THREE.js OBJLoader - 加载到 Geometry,操作,然后保存到 BufferGeometry

标签 javascript three.js smoothing .obj

我正在尝试确定为什么我无法平滑使用 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);
});

这是结果:

apparently Flat Shading

如果我删除行 computeFaceNormals() 模型呈现相同。 如果我删除 computeVertexNormals( true ),对象将在没有照明(黑色)的情况下呈现 - 所以我知道这是在做某事。

如果我在这段代码中更改 MeshPhongMaterial 的颜色属性,颜色就会改变,所以我也知道这是可行的。

我曾尝试使用顶点和法线助手来确定问题所在,但它们失败了,因为使用 BufferGeometry 时,面和顶点未存储为数组。

我还尝试修改 man.obj 文件以将“s”值从“off”更改为 1。这没有任何作用。

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

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

附言。我可能还需要用于光线追踪的法线。

最佳答案

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

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

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

关于javascript - THREE.js OBJLoader - 加载到 Geometry,操作,然后保存到 BufferGeometry,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26607094/

相关文章:

javascript - jQuery:固定长度、连接、可排序列表

三.js 子级忽略父对象的缩放

python - Boxcar 在 python/astropy 中卷积散点图?

python - 如何在 Python 中使用补间,而不会失去准确性?

javascript - 在 Cycle2 中,如何区分对寻呼机项目的点击和对上一个/下一个项目的点击?

javascript - PHP中使用ajax滚动到窗口底部的分页

javascript - document.getElementById().value 不覆盖现有值

javascript - 旋转环形网格会产生意外结果

javascript - 使用控件拖动和单击对象

Python - NLTK 中的三元组概率分布平滑技术 (Kneser Ney) 返回零