0

我用一个干净的边缘流模型和地图编辑了这篇文章，如果这有助于获得反馈，你可以访问它。我也可以为这种情况复制硬标记边缘问题：

我发现 three.js 中的渲染结果显示了低多边形对象的非常难标记的多边形，我将其与 sketchfab 、 unity3d 和 Iray 渲染结果进行比较。

这是 Maya 中显示的边缘流的快照：https ://drive.google.com/open?id=1qNA4VoZf-rSyq3_MQdeZqdFC6BxsE3un

这是模型在 Maya 视图面板中的外观（未细分）：https ://drive.google.com/open?id=1US-fv5-v2ygReqjRPgcsQSusrAXTxVG5

这是 three.js 渲染的快照（用红框标记更明显）

https://drive.google.com/open?id=1K3CIBLvA7skVUPWL0qInLcFrK74DtriK

这里的sketchfabs没有阴影/后处理过滤器

https://drive.google.com/open?id=1rozZyBSU1HwPPk4EnKFyc7SVvFNXQBwz

这里 Iray 用物质画家渲染： https ://drive.google.com/open?id=1cXJzw780-kWH0nANy5ekM0HjRKAdaVQ2

这是 Unity 渲染：https ://drive.google.com/open?id=1lLFLd8UT48OSvxJcp7arwygZZISsaHkS

如果您需要检查网格/边缘流，这里是 fbx：https ://drive.google.com/open?id=1BwljZNKL3dWJSSca6WYlqSK7os1Hp4pT

我还添加了法线贴图，因为我认为问题可能与我的three.js 设置有关（？）：https ://drive.google.com/open?id=149r3n9JGnb9xEJkf9Eh7ELK2bM83bJX_

反照率地图：https ://drive.google.com/open?id=1rGgDUOKbbeE6mrAlTG_6C7b8LgqQ1DF0

我正在重用 envmap hdr 示例和 hdr 设置。

有人可以分享一些我可以尝试不同的想法吗？

谢谢你的帮助，塞尔吉奥。

我尝试了以下方法：我在 Maya 中软化了边缘。我还分别尝试了以下几行并合并，但没有结果。

//vaseMesh.geometry.mergeVertices(); 和 //vaseMesh.geometry.computeVertexNormals();

normalScale 似乎在 material.normalScale.x = -1 时最好；

我也尝试过，但没有 hdr 或色调映射设置的结果相同，根据位移 three.js 示例https://threejs.org/examples/?q=displ#webgl_materials_displacementmap

renderer = new THREE.WebGLRenderer();
renderer.toneMapping = THREE.LinearToneMapping;

//load vase material textures once loaded
                manager.onLoad=function () {
                    material = new THREE.MeshStandardMaterial( { 
                        color: 0xffffff,
                                roughness: params.roughness,
                                metalness: params.metalness,
                                map: albedoM,
                                normalMap: normalMap,
                                normalScale: new THREE.Vector2( 1, -1 ),
                                aoMap: aoMap,
                                aoMapIntensity: 1,
                                flatShading: true,
                                side: THREE.DoubleSide
                    } );

                    var myObjectLoader = new THREE.FBXLoader(  );

                    myObjectLoader.load( "Piece1.fbx", function ( group ) {
                        console.log("On object loading");
                        var geometry = group.children[ 0 ].geometry;
                        geometry.attributes.uv2 = geometry.attributes.uv;
                        geometry.center();

                        vaseMesh = new THREE.Mesh( geometry, material );
                        vaseMesh.material=material;
                        //vaseMesh.geometry.mergeVertices();
                        //vaseMesh.geometry.computeVertexNormals();
                        material.normalScale.x = -1;
                        scene.add( vaseMesh );
                        console.log("Finished adding to scene");
                        vaseMesh.position.set(0,0,0);
                        animate();
                    } );                    
                }

                var textureLoader = new THREE.TextureLoader(manager);
                var albedoM = textureLoader.load( "vaseTextures/albedo.png");
                var normalMap = textureLoader.load( "vaseTextures/normal.png");
                var aoMap = textureLoader.load( "vaseTextures/ao.png");
4

1 回答 1

1

将答案归功于@Mugen87，将设置删除flatShading为真的做到了！

https://discourse.threejs.org/t/render-of-low-poly-model-tris-showing-very-hard-marked-in-three-js-compared-to-sketchfab-unit3d-iray/6829/ 2?u=mugen87

干杯，塞尔吉奥

于 2019-03-31T16:54:37.720 回答