微信小程序之threejs全景

最近在開發小程序，身心疲憊，原因是功能和app相同，我裂開了。

各種封裝組件，各種寫頁面，不過有個好處是以前寫的h5拿來改一下標簽，基本上還是ok的，就剩下最后幾個功能，其中就有一個VR全景功能。

移動端倒是好做，上次做了大概2天就搞定了，原理就是threejs用css3做圖片的旋轉，具體例子可以參照https://threejs.org/examples/css3d_panorama.html不過多描述，下面進入今天的主角：在微信小程序中使用threejs實現VR全景功能。

剛開始想到這個功能，我是拒絕的，這簡直就是要了我的頭發啊，沒辦法，誰叫我走上開發這條不歸路呢，自己選的路，禿頭也要走完。。

那就硬着頭皮開始吧，先百度搜了一下在小程序中使用threejs，找到一篇比較干貨的文章https://developers.weixin.qq.com/community/develop/article/doc/00066c4b230b085051592292f5bc13，這篇文章作者把threejs給提煉出來了一個小程序版本，

照着他的demo先把canvas給搞出來先。然后再實現全景，怎么實現也是頭疼的事情，怎么，我不會寫，還不會改嗎？

先看看以前h5的實現方式，采用CSS3DRenderer來實現，問題來了，小程序里面不支持dom的createElement，那咋整嘛，只有換思路了，繼續研究threejs的demo，第一個版本思路出來了，說了太多廢話，直接來代碼了：

<view style="height: 100%; width: 100%;">
  <canvas type="webgl" id="c" style="width: 100%; height:100%;" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd" bindtouchcancel="touchCancel" bindlongtap="longTap" bindtap="tap"></canvas>
</view>

import * as THREE from '../../lib/threejs/three.weapp.min.js'
import { OrbitControls } from '../../lib/threejs/OrbitControls'

Page({
  data: {},
  onLoad: function () {
    wx.createSelectorQuery()
      .select('#c')
      .node()
      .exec((res) => {
        // 創建canvas對象
        const canvas = THREE.global.registerCanvas(res[0].node)
        // 記錄canvas的id，好在page銷毀的時候釋放canvas
        this.setData({ canvasId: canvas._canvasId })

        const camera = new THREE.PerspectiveCamera(75, canvas.width / canvas.height, 1, 2000);
        camera.position.z = 500;
        const scene = new THREE.Scene();
        scene.background = new THREE.Color(0xAAAAAA);
        const renderer = new THREE.WebGLRenderer({ antialias: true });
      
        const controls = new OrbitControls(camera, renderer.domElement);
 
        camera.position.set(200, 200, 500);
        controls.update();
        const geometry = new THREE.SphereBufferGeometry( 500, 60, 40 ).toNonIndexed();
        geometry.scale( - 1, 1, 1 );

        var texture = new THREE.TextureLoader().load( 'http://www.yanhuangxueyuan.com/threejs/examples/textures/2294472375_24a3b8ef46_o.jpg' ); // canvas中文文檔作者的圖，侵刪
        texture.minFilter = THREE.LinearFilter;
        texture.format = THREE.RGBFormat;
        var material = new THREE.MeshBasicMaterial( { map: texture } );
        const mesh = new THREE.Mesh(geometry, material);
        scene.add(mesh);
      
      
        function onWindowResize() {
          camera.aspect = window.innerWidth / window.innerHeight;
          camera.updateProjectionMatrix();
          renderer.setSize(canvas.width, canvas.height);
        }
        function render() {
          canvas.requestAnimationFrame(render);
          controls.update();
          renderer.render(scene, camera);
        }

        render()

      })
  },
  onUnload: function () {
    //  釋放canvas
    THREE.global.unregisterCanvas(this.data.canvasId)
  },
  touchStart(e) {
    console.log('canvas', e)
    THREE.global.touchEventHandlerFactory('canvas', 'touchstart')(e)
  },
  touchMove(e) {
    console.log('canvas', e)
    THREE.global.touchEventHandlerFactory('canvas', 'touchmove')(e)
  },
  touchEnd(e) {
    console.log('canvas', e)
    THREE.global.touchEventHandlerFactory('canvas', 'touchend')(e)
  }
})

嗨呀，以上代碼我是看都看不懂，那咋辦嘛，你挑的嘛偶像。莫有辦法，只有百度查具體每個關鍵字的意思，這里也就不多講了，因為我也不知道。這種方法有個問題就是，圖片只支持一張的圖片，而且這個圖片是要用全景相機照出來的，限制比較多，怎么辦嘛，肯定不能用這個方法呀，不然這個成本就沒法估算了。

於是乎我開始探索第二種方法，還是采用6張圖的方法，還是原來的配方，還是熟悉的味道。話不多少，上代碼：

import * as THREE from './three.weapp.min.js'
import { OrbitControls } from './OrbitControls'

Page({
  data: {},
  onLoad: function () {
    wx.createSelectorQuery()
      .select('#c')
      .node()
      .exec((res) => {
        const canvas = THREE.global.registerCanvas(res[0].node)
        
        this.setData({ canvasId: canvas._canvasId })

        const camera = new THREE.PerspectiveCamera(75, canvas.width / canvas.height, 1, 2000);
        const scene = new THREE.Scene();
        const renderer = new THREE.WebGLRenderer({ antialias: true });
      
        const controls = new OrbitControls(camera, renderer.domElement);
        // 控制鏡頭縮放，這里禁用了，因為是用正方體做的 除非能解決正方體的大小問題
        controls.enableZoom = false
        camera.position.set(-0.1, 2, -5);
        controls.update();

        var sides = ['右.jpg', '左.jpg','上.jpg', '下.jpg','前.jpg', '后.jpg']
        var materials = [];
        for (var i = 0; i < sides.length; i++) {
          var side = sides[i];
          var texture = new THREE.TextureLoader().load(side);
          materials.push( new THREE.MeshBasicMaterial( { map: texture } ) );
        }
　　　　　// 這里物體的長寬高，我始終不知道該是多少
        var mesh = new THREE.Mesh( new THREE.BoxBufferGeometry( canvas.height, canvas.height, canvas.height ), materials ); mesh.geometry.scale( -1, 1, 1 ); scene.add(mesh); function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(canvas.width, canvas.height); } function render() { canvas.requestAnimationFrame(render); controls.update(); renderer.render(scene, camera); } render() }) }, onUnload: function () { THREE.global.unregisterCanvas(this.data.canvasId) }, touchStart(e) { console.log('canvas', e) THREE.global.touchEventHandlerFactory('canvas', 'touchstart')(e) }, touchMove(e) { console.log('canvas', e) THREE.global.touchEventHandlerFactory('canvas', 'touchmove')(e) }, touchEnd(e) { console.log('canvas', e) THREE.global.touchEventHandlerFactory('canvas', 'touchend')(e) } })

這兩種方法的區別就是，第二種采用6張圖片(右左上下前后)，6個面表示一個正方體，然后將視角拉到正方體內，就是一個全景效果，完美。

這里的寫法也是參照的https://github.com/mrdoob/three.js/blob/master/examples/webgl_panorama_cube.html，具體其中的參數，我也不太清楚，反正編程全靠試（猜）。

貼下今天的成果吧：

這是最開始完成第二種方法時的初次效果，當我看到這個效果的時候，我就知道已經差不多快ok了。

這是最終實現的效果，哈哈還不錯吧（勉強符合功能需求）

距離上一次寫博客，又過去了4個月，這4個月感覺過得是真的快，然而文章依然是這么水...(這也太水了吧)

感謝threejs和https://developers.weixin.qq.com/community/develop/article/doc/00066c4b230b085051592292f5bc13文章的作者