canvas(webgl)背景透明功能
发布于 5 年前 作者 vtian 6441 次浏览 来自 问答

canvas加载模型,如何设置背景透明?

在小米8(android 8.1.0版本)背景是透明的。

在小米8和其它手机(android 9.0版本)背景是黑的。

请问是否和android版本有关,如何兼容其它手机和android版本?

4 回复

webgl 的 alpha 通道会在下个版本支持。

这个应该是webgl设置透明背景这块有点问题,一部分机型是透明的,一部分是黑底,官方收到了这个问题的反馈,不知道下个版本是否会修复,还是说有什么特殊方法能解决这个bug

还有问题的可以试下这个代码,我是从 threeJS 源码拿出来的,在几台安卓机器上都可以透明,不加则不透明。webGLCanvasId 设置你们的ID。如果用 threeJS,canvas 和 glContext 要传到 threeJS 里面。

wx.createSelectorQuery()

        .select(`#${webGLCanvasId}`)

        .node()

        .exec((res) => {

          const canvas = res[0].node;

          const glContext = canvas.getContext(‘webgl’, {

            alpha: true,

            depth: true,

            stencil: true,

            antialias: true,

            premultipliedAlpha: true,

            preserveDrawingBuffer: false,

            powerPreference: ‘default’,

            failIfMajorPerformanceCaveat: false,

            xrCompatible: true

          });

          // 安卓手机需要调用这个来设置透明

          glContext.clear(17664); // 这个数值根据 threeJS 源码得来

        });

楼楼,请教一下如何把模型正常加载到canvas上?我这加载一个three的正方体老是不对。

回到顶部