贴花未显示在 Autodesk 查看器中 [英] Decals not displaying in Autodesk Viewer

问题描述

使用 Autodesk 查看器时，贴花似乎没有按预期显示.上图的贴花显示正确(未在 Autodesk 查看器中渲染)，下图没有贴花(在 Autodesk 查看器中渲染).

为什么会这样，以及如何使贴花在 Autodesk 查看器中工作?

源文件

解决方案

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

var衰减VertexShader =`不同的 vec2 vUv；改变 vec3 vPosition；无效主(){vUv = uv;vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);gl_Position = 投影矩阵 * mvPosition;};var 衰减FragmentShader = `不同的 vec2 vUv；统一的sampler2D棋盘；无效主(){gl_FragColor = texture2D(棋盘格, vec2 (vUv.x * 0.1263, vUv.y * 0.166)) ;};var dbId = 4 ;var fragId =0 ;var texturePath ="/RefdFile_1.png" ;var 材料 =null ;oViewer = new 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) ;});函数创建纹理(){var loader =new THREE.TextureLoader() ;loader.load(纹理路径，函数(纹理){texture.minFilter =THREE.LinearMipMapLinearFilter ;//THREE.LinearMipMapLinearFilter纹理.magFilter =THREE.LinearFilter ;无功制服={棋盘:{类型:'t',价值:质地}};材质 = 新的 THREE.ShaderMaterial ({制服:制服，vertexShader:衰减VertexShader，fragmentShader:衰减FragmentShader，边:三.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) ;});}

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 查看器中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！