收藏
回答

canvas(webgl)背景透明功能

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

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

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

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

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



最后一次编辑于  07-10  (未经腾讯允许,不得转载)
邀请回答
复制链接收藏投诉关注问题回答

22 个回答

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

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

    07-11
    赞同
    回复 7
    • myf
      myf
      07-12
      下个版本预计什么时间发布?
      07-12
      赞同
      回复
    •  它说信息科技服务(上海)有限公司
      它说信息科技服务(上海)有限公司
      07-19
      目前7.0.5版本已经发布了,但是测试还是无法透明,是需要设置什么吗
      07-19
      赞同
      回复
    • Eric Huang
      Eric Huang
      07-19回复 它说信息科技服务(上海)有限公司
      7.0.5 的下一个版本会支持。
      07-19
      赞同
      回复
    •  它说信息科技服务(上海)有限公司
      它说信息科技服务(上海)有限公司
      07-22回复Eric Huang
      好的
      07-22
      赞同
      回复
    • 七一昂。
      七一昂。
      08-12
      下个版本是指APP端微信,还是小程序开发基础库? 我从2.7.3开始就在等,现在2.8.0版本了,还是不支持哦。
      08-12
      赞同
      回复
    查看更多(2)
  • 凉
    07-10

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

    07-10
    赞同
    回复 12
    • myf
      myf
      07-10

      代码贴上来看一I下


      07-10
      赞同
      回复
    • 凉
      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)

      }

      })


      07-10
      赞同
      回复
    • 凉
      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>



      07-10
      赞同
      回复
    • myf
      myf
      07-10回复

      什么地方不对?

      07-10
      赞同
      回复
    • 凉
      07-10回复

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

      gl.clearColor(1011);

      gl.clear(gl.COLOR_BUFFER_BIT);

      这三行要注释一下哦


      07-10
      赞同
      回复
    查看更多(7)
  •  它说信息科技服务(上海)有限公司
    它说信息科技服务(上海)有限公司
    07-11

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

    07-11
    赞同
    回复