國慶8天長假，重慶之行因故未成，偶得閑，用three.js結(jié)合cannon.js寫個3D小游戲耍耍。
在微信小游戲中，把three.js的3D內(nèi)容在離屏畫布處理，然后復(fù)制到在屏畫布，方法是：
|
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區(qū)域 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); //畫游戲結(jié)束臨界線 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手機都表現(xiàn)正常，但是，華為手機顯示不出來：
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區(qū)域（因為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); //上下鏡像翻轉(zhuǎn) ctx_huawei2.translate(0,canvas_huawei2.height); ctx_huawei2.scale(1, -1); ctx_huawei2.drawImage(canvas_huawei,0,0); //恢復(fù) ctx_huawei2.translate(0,canvas_huawei2.height); ctx_huawei2.scale(1, -1); wx.tmGlobal.ctx_bkg.drawImage(canvas_huawei2, 0,c_toolbarHeight*sysInfo.pixelRatio); ......} |
到此這篇關(guān)于微信小游戲中three.js離屏畫布的示例代碼的文章就介紹到這了,更多相關(guān)微信小游戲three.js離屏畫布內(nèi)容請搜索服務(wù)器之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持服務(wù)器之家！
原文鏈接：https://blog.csdn.net/acrodelphi/article/details/109002527
