通过Three加载的gltf模型，打包后显示异常

[wjain]

• L7 Version: 2.17.7 （2.16有同样问题，升级2.17后未解决）
• vue Version: 2.6.11
• Platform:
• Mini Showcase(like screenshots):

正常显示：

异常显示，从背后可以看到马脸：

• CodePen Link: https://codesandbox.io/s/test-vue2-forked-sqvcs6?file=/src/components/AntV.vue

在vue2中引入antv-l7，通过threejs加载gltf（参照官方示例），本地dev启动运行显示正常，打包部署后显示异常。

[heiyexing]

要不录一个视频，全方位看一下 🐴 怎么显示异常的

[wjain]

要不录一个视频，全方位看一下 🐴 怎么显示异常的

打包以后看起来马是在转头，能透过近的一面，直接看到物体背面。我加载的楼层是看到后半部分。

这个打包部署后和本地开发环境的人物对比：

[lzxue]

打包部署和本地开发环境，依赖版本都是一致的吗？

[wjain]

打包部署和本地开发环境，依赖版本都是一致的吗？

是的，是在本地开发环境直接打包部署的。

[zhnny]

这主要是由于baseLayer.ts中根据函数构造器名字来判断面剔除（gl.cullFace），然而，打包时通常会进行代码压缩混淆，函数名字随之改变，所以得到了错误的函数名字，面剔除判断随之错误。
baseLayer.ts中判断面剔除的函数大致如下：

public renderModels() {
   // ...
    // 获取到 L7 的 gl
    const gl = this.rendererService.getGLContext();
    this.rendererService.setCustomLayerDefaults();
    const cullFace =
      this.mapService.constructor.name === 'AMapService' ? gl.BACK : gl.FRONT;
    gl.cullFace(cullFace);
    // ...
  }

解决办法之一是修改库函数，使之不判断函数构造器名字
解决办法之二是修改webpack打包方式，使之不进行代码混淆，从而不改变函数名

[zhnny]

此处应是个BUG，考虑修复

[zuoyifeng]

请教一下 你们怎么销毁threejs的模型

[zhnny]

#2343

[lzxue]

this.mapService.constructor.name === 'AMapService'

this.mapService.constructor.name === 'AMapService' 这个判断吗？

[zhnny]

this.mapService.constructor.name === 'AMapService'

this.mapService.constructor.name === 'AMapService' 这个判断吗？

是的