翻译：为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) ;
    }) ;
}

此案例在没有贴材质之前，这个电路板的主平面是单一的色调。

贴完材质后，是这样的：