小程序
小游戏
企业微信
微信支付
扫描小程序码分享
canvas加载模型,如何设置背景透明?
在小米8(android 8.1.0版本)背景是透明的。
在小米8和其它手机(android 9.0版本)背景是黑的。
请问是否和android版本有关,如何兼容其它手机和android版本?
4 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
webgl 的 alpha 通道会在下个版本支持。
你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。
还有问题的可以试下这个代码,我是从 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 源码得来
这个应该是webgl设置透明背景这块有点问题,一部分机型是透明的,一部分是黑底,官方收到了这个问题的反馈,不知道下个版本是否会修复,还是说有什么特殊方法能解决这个bug
楼楼,请教一下如何把模型正常加载到canvas上?我这加载一个three的正方体老是不对。
代码贴上来看一I下
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)
<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>
什么地方不对?
这三行要注释一下哦
关注后,可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
webgl 的 alpha 通道会在下个版本支持。
还有问题的可以试下这个代码,我是从 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 源码得来
});
改成下面两个
glContext.clearColor(0, 0, 0, 0);
glContext.clear(glContext.COLOR_BUFFER_BIT);
这个应该是webgl设置透明背景这块有点问题,一部分机型是透明的,一部分是黑底,官方收到了这个问题的反馈,不知道下个版本是否会修复,还是说有什么特殊方法能解决这个bug
楼楼,请教一下如何把模型正常加载到canvas上?我这加载一个three的正方体老是不对。
代码贴上来看一I下
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)
}
})
<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>
什么地方不对?
const gl = canvas.getContext('webgl');
gl.clearColor(1, 0, 1, 1);
gl.clear(gl.COLOR_BUFFER_BIT);
这三行要注释一下哦