低聚模型Tris的渲染顯示，與sketchfab / unit3d / Iray相比，很難/在three.js中標記

Question

我使用干凈的邊緣流模型編輯了這篇文章，並在可以幫助您獲得反饋的情況下訪問了地圖。 我也可以在這種情況下復制硬標記的邊緣問題：

我在three.js中找到了渲染結果，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或色調映射設置的結果相同.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");

Answer 1

感謝@ Mugen87的答案，刪除設置為true的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

干杯，塞爾吉奧