翻译：为Forge Viewer的模型贴材质-白红宇

翻译：为Forge Viewer的模型贴材质

阅读量：6800 次

发布时间：2019-06-26

本文共 2366 字，大约阅读时间需要 7 分钟。

参考原文：

Autodesk Forge的小伙伴们经常会问到关于FBX文件在转换成Forge Viewer网页浏览格式的时候材质丢失的问题，参考以上两篇StackOverflow问题解答，现总结一下：

Forge Model Derivative （模型数据提取和转换服务）在转换FBX的时候，没有提取材质内容。相关的需求已录入到开发部，但目前没有具体的时间表。

所以，如果想要在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 toolbarAutodesk.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) ;    }) ;}

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

图片描述