翻譯：爲Forge Viewer的 模型貼材質

參考原文：
https://stackoverflow.com/que...
https://stackoverflow.com/que...

Autodesk Forge的小夥伴們常常會問到關於FBX文件在轉換成Forge Viewer網頁瀏覽格式的時候材質丟失的問題，參考以上兩篇StackOverflow問題解答，現總結一下：

1. Forge Model Derivative （模型數據提取和轉換服務）在轉換FBX的時候，沒有提取材質內容。相關的需求已錄入到開發部，但目前沒有具體的時間表。

2. 因此，若是想要在Forge Viewer裏看到FBX的材質，須要利用Viewer的API作些後處理工做，本身貼材質。這裏有一段參考代碼，加載了一個名爲 RefdFile_1.png 的材質，而後找到對象的fragment id，調用setMaterial貼上材質。

var attenuationVertexShader =`
  varying vec2 vUv;
  varying vec3 vPosition;
  void main() {
    vUv = uv;
    vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);
    gl_Position = projectionMatrix * mvPosition;
  }
  ` ;

var attenuationFragmentShader = `
  varying vec2 vUv;
  uniform sampler2D checkerboard;
  void main() {
    gl_FragColor = texture2D(checkerboard, vec2 (vUv.x * 0.1263, vUv.y * 0.166)) ;
  }
` ;

var dbId =4 ;
var fragId =0 ;
var texturePath ="/RefdFile_1.png" ;
var material =null ;

oViewer =new Autodesk.Viewing.Private.GuiViewer3D ($("#viewer") [0], {}) ; // With toolbar
Autodesk.Viewing.Initializer (options, function () {
    oViewer.initialize () ;
    oViewer.addEventListener (Autodesk.Viewing.GEOMETRY_LOADED_EVENT, function (event) {
        oViewer.fitToView (true) ;
        setTimeout (function () { oViewer.autocam.setHomeViewFrom (oViewer.navigation.getCamera ()) ; }, 1000) ;
        setTimeout (createTexture, 500) ;
    }) ;
    oViewer.setGroundReflection (false) ;
    oViewer.setGroundShadow (false) ;
    oViewer.load (myurn) ;
}) ;

function createTexture () {
    var loader =new THREE.TextureLoader () ;
    loader.load (texturePath, function (texture) {
        texture.minFilter =THREE.LinearMipMapLinearFilter ; // THREE.LinearMipMapLinearFilter
        texture.magFilter =THREE.LinearFilter ;

        var uniforms ={
            checkerboard: {
                type: 't',
                value: texture
            }
        } ;
        material =new THREE.ShaderMaterial ({
          uniforms: uniforms,
          vertexShader: attenuationVertexShader,
          fragmentShader: attenuationFragmentShader,
          side: THREE.DoubleSide
        }) ;
        oViewer.impl.matman ().removeMaterial ('shaderMaterial') ;
        oViewer.impl.matman ().addMaterial ('shaderMaterial', material, true) ;
        var floor_mesh_render =oViewer.impl.getRenderProxy (oViewer.model, fragId) ;
        oViewer.model.getFragmentList ().setMaterial (fragId, material) ;
        oViewer.impl.invalidate (true) ;
    }) ;
}

此案例在沒有貼材質以前，這個電路板的主平面是單一的色調。

貼完材質後，是這樣的：