위 챗 미니 게임 에서 three.js 스크린 캔버스 의 예제 코드

국경절 8 일 연 휴 에 충 칭 행 은 사정 으로 인해 이 루어 지지 않 았 고 가끔 한가 할 때 three.js 로 cannon.js 와 결합 하여 3D 게임 을 써 서 놀 았 다.

위 챗 미니 게임 에서 three.js 의 3D 내용 을 스크린 캔버스 에서 처리 한 다음 에 스크린 캔버스 로 복사 하 는 방법 은:

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 와 아이 폰 핸드폰 은 모두 정상 적 인 모습 을 보 였 지만 화 웨 이 핸드폰 은 표시 되 지 않 았 다.
https://developers.weixin.qq.com/community/develop/doc/00026c3c1c8eb010de384a82d51000?jumpto=
다른 사용자 들 도 오랫동안 언급 했 습 니 다.텐 센트 나 화 웨 이 가 해결 하지 못 했 습 니 다.이리 저리 시도 해 보 니 다른 방법 을 찾 았 습 니 다.

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 이 스크린 캔버스 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 저 를 많이 사랑 해 주세요!