收藏
回答

canvas(webgl)背景透明功能

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug canvas 客户端 7.0.5 2.7.3

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

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

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

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



回答关注问题邀请回答
收藏

4 个回答

  • Eric Huang
    Eric Huang
    置顶回答2019-07-11

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

    2019-07-11
    有用
    回复 15
    查看更多(10)
  • 小伟
    小伟
    2019-12-27

    还有问题的可以试下这个代码,我是从 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 源码得来

            });

    2019-12-27
    有用
    回复 4
    • A  ^﹏^
      A ^﹏^
      2021-02-24
      所以 一套源码一个数值?
      2021-02-24
      回复
    • 小伟
      小伟
      2021-04-16回复A ^﹏^
      glContext.clear(17664); 
      改成下面两个
      glContext.clearColor(0, 0, 0, 0);
      glContext.clear(glContext.COLOR_BUFFER_BIT);
      2021-04-16
      回复
    • A  ^﹏^
      A ^﹏^
      2021-04-22回复小伟
      目前手机上可以,谢谢~
      2021-04-22
      回复
    • 虚幻
      虚幻
      2021-05-30
      老哥,我试了下不行,可能由于我的需求有点不同,是在camera绘制的webgl上挖洞,然后发现被挖的地方依旧是黑的,有解决方案么。
      2021-05-30
      回复
  •  它说信息科技服务(上海)有限公司
    它说信息科技服务(上海)有限公司
    2019-07-11

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

    2019-07-11
    有用
    回复
  • 凉
    2019-07-10

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

    2019-07-10
    有用
    回复 12
    • myf
      myf
      2019-07-10

      代码贴上来看一I下


      2019-07-10
      回复
    • 凉
      2019-07-10回复myf

      var app = getApp();

      var THREE = app.THREE;

      var requestAnimationFrame;

      var camera, scene, renderer,canvas;

      Page({

      data: {

      height: '360',

      width: '20',

      },

      onLoad() {

      // wx.authorize({ scope: "scope.camera" });//scope.record

      // this.ctx = wx.createCameraContext();

      wx.getSystemInfo({

      success: res => {

      this.setData({ height: res.windowHeight, width: res.windowWidth });

      },

      })

      },onReady(){

      var self = this;

      const query = wx.createSelectorQuery()

      query.select('#myCanvas').node().exec((res) => {

      console.log(res);

      canvas = res[0].node;

      console.log(canvas);

      canvas.requestAnimationFrame(self.animate());

      //self.init(canvas);

      const gl = canvas.getContext('webgl');

      gl.clearColor(1, 0, 1, 1);

      gl.clear(gl.COLOR_BUFFER_BIT);

      })

      },

      init: function (canvas) {

      camera = new THREE.PerspectiveCamera(45, canvas._width / canvas._height, 0.01, 10000);

      scene = new THREE.Scene();

      //scene.background = new THREE.Color(0xffffff);

      renderer = new THREE.WebGLRenderer({ canvas: canvas, antialias: true });

      var light = new THREE.DirectionalLight(0xffffff);

      light.position.set(0, 0, 1);

      scene.add(light);

      var cube = new THREE.Mesh(new THREE.CubeGeometry(0.1, 0.1, 0.1),

      new THREE.MeshBasicMaterial({

      color: 0xff0000

      })

      );

      scene.add(cube);

      cube.rotation.set(45,0,0);

      cube.position.set(0, 0, -2);

      },

      render: function () {

      // camera.position.x += (mouseX - camera.position.x) * 0.05;

      // camera.position.y += (- mouseY - camera.position.y) * 0.05;

      // camera.lookAt(scene.position);

      renderer.render(scene, camera);

      },

      animate: function () {

      //requestAnimationFrame(this.animate);

      if (canvas && !renderer)

      {

      // console.log(height);

      // canvas._width = width;

      // canvas._height = height;

      // canvas._left = 0;

      // canvas._top = 0;

      console.log(canvas._width);

      this.init(canvas);

      }

      console.log(renderer);

      if (renderer){

      this.render();

      }

      },

      error(e) {

      wx.authorize({ scope: "scope.camera" });

      console.log(e.detail)

      }

      })


      2019-07-10
      回复
    • 凉
      2019-07-10回复myf

      <canvas type="webgl" id="myCanvas"  style="width: {{width}}px; height: {{height}}px;z-index:111;"  ></canvas>

      <camera device-position="back" flash="off" binderror="error" style="width: {{width}}px; height: {{height}}px;z-index: 100;" > </camera>



      2019-07-10
      回复
    • myf
      myf
      2019-07-10回复

      什么地方不对?

      2019-07-10
      回复
    • 凉
      2019-07-10回复

      const gl = canvas.getContext('webgl');

      gl.clearColor(1011);

      gl.clear(gl.COLOR_BUFFER_BIT);

      这三行要注释一下哦


      2019-07-10
      回复
    查看更多(7)
登录 后发表内容