國慶8天長假，重慶之行因故未成，偶得閑，用three.js結合cannon.js寫個3D小游戲耍耍。
在微信小游戲中，把three.js的3D內容在離屏畫布處理，然后復制到在屏畫布，方法是：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
|
let c_toolbarHeight=140; let sysInfo=wx.getSystemInfoSync();require('./js/libs/weapp-adapter.js');var canvas_webGL=window.canvas;canvas_webGL.width = sysInfo.screenWidth * sysInfo.pixelRatio;canvas_webGL.height = (sysInfo.screenHeight-c_toolbarHeight) * sysInfo.pixelRatio;var ctx_webGL=canvas_webGL.getContext('webgl'); let options={context: ctx_webGL}let renderer = new THREE.WebGLRenderer(options);renderer.setSize(sysInfo.screenWidth, sysInfo.screenHeight-c_toolbarHeight);renderer.setPixelRatio(sysInfo.pixelRatio); function render(){ //清除canvas_bkg的3D區域 wx.tmGlobal.eraseZone(0, c_toolbarHeight, sysInfo.screenWidth, sysInfo.screenHeight); renderer.render(scene, camera); wx.tmGlobal.ctx_bkg.drawImage(canvas_webGL, 0,c_toolbarHeight*sysInfo.pixelRatio); //畫一條橫的紅線 wx.tmGlobal.ctx_bkg.strokeStyle = '#FF8C00'; wx.tmGlobal.ctx_bkg.lineWidth = 2; wx.tmGlobal.ctx_bkg.beginPath(); wx.tmGlobal.ctx_bkg.moveTo(0, (c_toolbarHeight)*sysInfo.pixelRatio); wx.tmGlobal.ctx_bkg.lineTo( sysInfo.screenWidth*sysInfo.pixelRatio, (c_toolbarHeight)*sysInfo.pixelRatio); //畫游戲結束臨界線 wx.tmGlobal.ctx_bkg.moveTo(0, (c_toolbarHeight+c_yugaoHeight)*sysInfo.pixelRatio); wx.tmGlobal.ctx_bkg.lineTo( sysInfo.screenWidth*sysInfo.pixelRatio, (c_toolbarHeight+c_yugaoHeight)*sysInfo.pixelRatio); wx.tmGlobal.ctx_bkg.stroke(); //把canvas_bkg畫到在屏畫布 wx.tmGlobal.ctx_main.clearRect(0,0, wx.tmGlobal.canvas_main.width,wx.tmGlobal.canvas_main.height); wx.tmGlobal.ctx_main.drawImage(wx.tmGlobal.canvas_bkg,0,0);} |
在vivo和iphone手機都表現正常，但是，華為手機顯示不出來：
https://developers.weixin.qq.com/community/develop/doc/00026c3c1c8eb010de384a82d51000?jumpto=
其它用戶也提了好久了，騰訊或華為都沒有解決，試來試去，終于找到了另一種寫法：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
|
renderer = new THREE.WebGLRenderer();let target = new THREE.WebGLRenderTarget( sysInfo.screenWidth*sysInfo.pixelRatio, (sysInfo.screenHeight-c_toolbarHeight)*sysInfo.pixelRatio);renderer.setRenderTarget(target);gl=renderer.getContext();?var canvas_huawei=wx.createCanvas();canvas_huawei.width=sysInfo.screenWidth*sysInfo.pixelRatio;canvas_huawei.height=(sysInfo.screenHeight-c_toolbarHeight)*sysInfo.pixelRatio;var ctx_huawei=canvas_huawei.getContext('2d');?var canvas_huawei2=wx.createCanvas();canvas_huawei2.width=sysInfo.screenWidth*sysInfo.pixelRatio;canvas_huawei2.height=(sysInfo.screenHeight-c_toolbarHeight)*sysInfo.pixelRatio;var ctx_huawei2=canvas_huawei2.getContext('2d');?var imageData = ctx_huawei.createImageData( sysInfo.screenWidth*sysInfo.pixelRatio, (sysInfo.screenHeight-c_toolbarHeight)*sysInfo.pixelRatio);var pixels = new Uint8Array(imageData.data.length);?function render(){ //擦除背景畫布的webGL區域（因為webGL是用的透明繪制） wx.tmGlobal.eraseZone(0, c_toolbarHeight, sysInfo.screenWidth, sysInfo.screenHeight); renderer.render(scene, camera); gl.readPixels( 0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight, gl.RGBA,gl.UNSIGNED_BYTE,pixels); imageData.data.set(pixels); ctx_huawei.putImageData(imageData,0,0); //清除 ctx_huawei2.clearRect(0,0,canvas_huawei2.width,canvas_huawei2.height); //上下鏡像翻轉 ctx_huawei2.translate(0,canvas_huawei2.height); ctx_huawei2.scale(1, -1); ctx_huawei2.drawImage(canvas_huawei,0,0); //恢復 ctx_huawei2.translate(0,canvas_huawei2.height); ctx_huawei2.scale(1, -1); wx.tmGlobal.ctx_bkg.drawImage(canvas_huawei2, 0,c_toolbarHeight*sysInfo.pixelRatio); ......} |
到此這篇關于微信小游戲中three.js離屏畫布的示例代碼的文章就介紹到這了,更多相關微信小游戲three.js離屏畫布內容請搜索服務器之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持服務器之家！
原文鏈接：https://blog.csdn.net/acrodelphi/article/details/109002527
