贴图不显示在Autodesk Viewer中

问题描述

使用Autodesk Viewer时，贴花似乎没有按预期显示。上图具有正确显示的贴图（在Autodesk Viewer中未渲染），而下图没有正确的贴图（在Autodesk Viewer中渲染）。

为什么这样，以及如何使贴花在Autodesk Viewer中起作用？

源文件

解决方案

这是我的代码示例。我在Forge上导入了STEP文件，并在我的node.js服务器上复制了RefdFile_1.png文件。

  var reductionVertexShader =` 
个vec2 vUv； 
个vec3 vPosition； 
 void main（）{
 vUv = uv; 
 vec4 mvPosition = modelViewMatrix * vec4（position，1.0）; 
 gl_Position = projectionMatrix * mvPosition; 
} 
`; 
 
 var delayFragmentShader =`
变化的vec2 vUv; 
统一采样器2D棋盘格; 
 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 =新的Autodesk.Viewing.Private.GuiViewer3D（$（＃viewer）[0]，{}）; //使用工具栏
 Autodesk.Viewing.Initializer（选项，功能（）{
 oViewer.initialize（）; 
 oViewer.addEventListener（Autodesk.Viewing.GEOMETRY_LOADED_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）; 
}）; 
 
函数createTexture（）{
 var loader = new THREE.TextureLoader（）; 
 loader.load（texturePath，function（texture）{
 texture.minFilter = THREE.LinearMipMapLinearFilter; // THREE.LinearMipMapLinearFilter 
 texture.magFilter = THREE.LinearFilter; 
 
 var制服= {
棋盘格：{
类型：'t'，
值：纹理
} 
}； 
材质=新的三个。 ShaderMaterial（{
制服：制服，
 vertexShader：衰减VertexShader，
片段着色器：衰减FragmentShader，
一侧：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（tr ue）; 
}）； 
} 
  

When using the Autodesk Viewer, decals do not seem to display as expected. The image above has the decal displaying correctly (not rendered in Autodesk Viewer), and the image below has no decal (rendered in Autodesk viewer).

Why is this so, and how can decals be made to work in Autodesk Viewer?

Source files here.

解决方案

Here is my code sample. I imported the STEP file on Forge, and copied the RefdFile_1.png file on my node.js server.

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) ;
    }) ;
}

这篇关于贴图不显示在Autodesk Viewer中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！