webgl調試
起初使用threejs 在小程序里面調試,明明是按着官方的文檔來,但是會發現開發者工具上面會提示getContext,經過一翻摸索,發現webgl調試只能在手機端調試。
總結:webgl 調試在微信開發者工具中不支持調試,只能在手機上預覽,調試起來起來很慢。每次調試都要不停的按編譯,然后手機上等個幾十秒,開發效率來說賊慢。
threejs api 部分
api 部分是探索最久的,一部分自己不熟悉threejs,也不熟悉;游戲開發這部分,二來開發中有很bug要不停找原因,找方法,相對來說比較慢。
起初兼容threejs ,threejs 中有一些document和window對象的方法,后來找了個weapp-adapter 來兼容,但是慢慢看 weapp-adapter 是官方對於微信小游戲的兼容,
小程序中少來大量api。后來用小游戲使用來threejs 寫了個demo,但是小游戲中又不能滾動之類的window屬性。。。就又回小程序這塊。
關於threejs 部分,看了,使用addEventListener 這個api的都要注釋掉(因為沒有dom和window對象,也沒有監聽的方法),特別是加載貼圖和手勢庫需要修改源碼。
加載貼圖等時候會調用document.createElementNS(用來創建貼圖)。
貼圖可以用canvas.createImage 方法代替,要修改源碼. 實例化的時候傳入canvas參數。
雖然沒有error,但是會提示WEBGL_depth_texture ANGLE_instanced_arrays OES_texture_float_linear ...等,這些小程序不支持
至於手勢庫最難,小程序canvas控制都放組件里面,就算獲得canvas對象,打印出來也只是canvas視圖(VirtualDOM)的屬性,想要給視圖綁定方法只能在視圖層里面注冊(不能在邏輯層里面注冊)。
因而可能要自己寫一套符合canvas 和 threejs 的手勢庫(如圖1)。注冊好的方法還要注入threejs里面~~
初始化的時候小程序視圖層(View)和邏輯層(App Service)是分開的,視圖層和邏輯層的交互通過jsbridge 通信如下圖。
自己實現3D場景
自己事項3D場景的話,要自己寫一個類似OrbitControls的threejs的插件,目前小程序上還木有類似的插件,基本沒得搞。
總結
基於微信開發車配小程序,如果是基於threejs,能找到一個合適的手勢庫和貼圖方法,有可能能實現。