小程式中要怎麼用threejs？以下這篇文章就來(lái)和大家一起聊聊微信小程式中使用threejs的方法，希望對(duì)大家有幫助！

微信小程式本身提供了適配版，但是版本太舊了, 而且適配的不全，嘗試自己手動(dòng)適配一下。 這是官方適配threejs的github連結(jié)https://github.com/wechat-miniprogram/threejs-miniprogram

效果顯示

##適配後的小程序程式碼片段

https://developers.weixin.qq.com/s/y5tDPImr7xvs

1.簡(jiǎn)單使用

GitHub位址: https://github .com/mrdoob/three.js，將整個(gè)專(zhuān)案拉下來(lái)，後面需要修改其中的程式碼。 build目錄下有三個(gè)編譯好的文件，由於大小超過(guò)500k,會(huì)跳過(guò)es6轉(zhuǎn)es5,不能使用three.module.js,為了調(diào)試方便看報(bào)錯(cuò)的位置,將未壓縮的three.js放到項(xiàng)目中。嘗試引用。

import * as THREE from '../libs/three.js'

報(bào)錯(cuò)！ ！ ！

經(jīng)過(guò)測(cè)試，是基礎(chǔ)庫(kù)最新幾個(gè)版本的bug, 給微信官方反饋了，反饋地址（https://developers.weixin.qq.com/community /develop/doc/0002ca77aa420880162d1b08d5b800），官方人員解決問(wèn)題很快，

其實(shí)，不解決也不影響，調(diào)低版本庫(kù)版本到2.19.6或使用require導(dǎo)入也可以解決

#解決報(bào)錯(cuò)

問(wèn)題1 由於參考的程式碼太舊了，報(bào)了一個(gè)CubeGeometry的錯(cuò)誤

##查找發(fā)現(xiàn)這個(gè)CubeGeometry早改名了

更新日誌：https://github.com/mrdoob/three.js/wiki/Migration-Guide

問(wèn)題2 addEventListener報(bào)錯(cuò)

#微信小程式?jīng)]有addEventListener，會(huì)自動(dòng)管理canvas的重載，註解掉在three.js下面的程式碼

_canvas.addEventListener('webglcontextlost', onContextLost, false);
_canvas.addEventListener('webglcontextrestored', onContextRestore, false);

問(wèn)題3 canvas type有問(wèn)題

仔細(xì)查看程式碼發(fā)現(xiàn)是_canvas.getContext這裡報(bào)錯(cuò)了，類(lèi)型改為webgl。

const context = _canvas.getContext('webgl', contextAttributes);

微信小程式的canvas有兩種使用方式，webgl和2d，2d不代表是webgl2,

const contextNames = ['webgl2', 'webgl', 'experimental-webgl'];

而且contextNames裡沒(méi)有2d，程式碼裡只有圖片相關(guān)的方法用到了2d。 解決完上面的問(wèn)題，就能跑起來(lái)了。

展示

手機(jī)調(diào)試時(shí)發(fā)現(xiàn)一個(gè)警告,EXT_blend_minmax擴(kuò)充功能不支援,看程式碼是在threejs裡面報(bào)的錯(cuò)誤。仔細(xì)找一番

MDN位址：https://developer.mozilla.org/en-US/docs/Web/API/EXT_blend_minmax

發(fā)現(xiàn)這就是兩個(gè)常數(shù)，而且在webgl2中是預(yù)設(shè)支援了，

interface EXT_blend_minmax {
  const GLenum MIN_EXT = 0x8007;
  const GLenum MAX_EXT = 0x8008;
};

可以在程式碼裡直接改為對(duì)應(yīng)的值，警告想去掉的話在12551行左右

2. 使用TextureLoader

解決報(bào)錯(cuò)

問(wèn)題1 createElementNS

仔細(xì)看邏輯:TextureLoader -> ; ImageLoader ->createElementNS

微信小程式?jīng)]有createElementNS，找了一圈發(fā)現(xiàn)有個(gè)替代方法，就是canvas的createImage，但是canvas去哪拿，沒(méi)有方法能直接創(chuàng)建，為了方便，直接在new TextureLoader的時(shí)候傳進(jìn)去，注意第一個(gè)參數(shù)是有意義的，傳空即可

const texture = new THREE.TextureLoader(undefined, canvas)

展示

解決，可以使用Texture了

3. 使用OrbitControls

#解決報(bào)錯(cuò)

問(wèn)題1 addEventListener

微信小程式?jīng)]有addEventListener，但可以在canvas上綁定事件,仔細(xì)看point event和小程式對(duì)應(yīng)的事件

contextmenu // 鼠標(biāo)右鍵
wheel // 滾輪滾動(dòng)
keydown // 鍵盤(pán)事件
// 需要進(jìn)行適配的
pointerdown  ->  touchstart
pointermove  ->  touchmove
pointerup    ->  touchend

問(wèn)題2 事件觸發(fā)后怎么通知OrbitControls

事件有了，怎么通知呢？?jī)蓚€(gè)方法沒(méi)有任何聯(lián)系，只能用eventbus了，eventbus可以自己寫(xiě)個(gè)簡(jiǎn)單的 。
index.js（觸發(fā)）

  onTouchStart(e) {
    EventBus.dispatchEvent(e)
  },
  onTouchMove(e) {
    EventBus.dispatchEvent(e)
  },
  onTouchEnd(e) {
    EventBus.dispatchEvent(e)
  },

OrbitControls.js （監(jiān)聽(tīng)）

EventBus.addEventListener( 'touchstart', onPointerDown );
EventBus.addEventListener( 'touchend', onPointerUp );
EventBus.addEventListener( 'touchmove', onPointerMove);

問(wèn)題3 觸摸事件觸發(fā)的參數(shù)問(wèn)題，小程序事件觸發(fā)拿到的參數(shù)和h5拿到的數(shù)據(jù)格式不一致，需要調(diào)整。

找了半天，發(fā)現(xiàn)微信小游戲這邊有一些適配好的東西，developers.weixin.qq.com/minigame/de…

還有這個(gè)文章里老哥自己寫(xiě)的庫(kù)應(yīng)該是按照上面微信小游戲的適配庫(kù)改的developers.weixin.qq.com/community/d…

我是直接用TouchEvent，看如何改成pointEvent

問(wèn)題4 無(wú)法旋轉(zhuǎn)

看打印，應(yīng)該是某些參數(shù)有問(wèn)題，導(dǎo)致scope.object.position計(jì)算為NaN，

排查過(guò)程：

position -> offset -> spherical -> sphericalDelta -> clientHeight

clientHeight和clientWidth需要賦值

  canvas.clientHeight = canvas.height
  canvas.clientWidth = canvas.width;

問(wèn)題4 無(wú)法縮放

看打印，還是scope.object.position計(jì)算為NaN

排查過(guò)程：

position -> offset -> spherical.radius -> scale -> pointers

發(fā)現(xiàn)pointerId屬性缺少，小程序事件有返回identifier，就是pointerId

總共修改的屬性：

1.timeStamp
2. pointerType 取touch
3. 多點(diǎn)觸摸時(shí)點(diǎn)擊取touches數(shù)組的最后一個(gè)
4. pointerId  identifier 多點(diǎn)觸摸時(shí)標(biāo)識(shí)是某個(gè)點(diǎn)擊
5. clientHeight

4 使用OBJLoader

解決報(bào)錯(cuò)

問(wèn)題1 Request和fetch為undefined

微信小程序只有wx.request,剛好上面我們發(fā)現(xiàn)有個(gè)XMLHttpRequest.js的適配文件，可以用，嘗試后發(fā)現(xiàn)沒(méi)法直接用，需要編譯成es5。 我們第一步就拉了整個(gè)threejs項(xiàng)目的代碼，里面有可以重新編譯的命令，我們可以把XMLHttpRequest復(fù)制過(guò)去，修改使用，再進(jìn)行編譯， 主要修改的方法:

const request = new XMLHttpRequest();
request.open('GET', url);
request.onreadystatechange = function () {}
request.onerror()
request.send()

問(wèn)題2 模型默認(rèn)顯示太小了，

以為是還沒(méi)適配好，加載有問(wèn)題，看了老半天才發(fā)現(xiàn)已經(jīng)顯示了，就是太小了， 解決方法：放大

roup.scale.set(30,30,30)

問(wèn)題3 模型顯示很暗，需要把燈光強(qiáng)度調(diào)到很高才能看清

看示例是這行代碼沒(méi)加

renderer.outputEncoding = THREE.sRGBEncoding;

稍微了解了一下顏色空間的概念:
線性空間: 機(jī)器對(duì)亮度的感受
非線性(Gamma): 人對(duì)亮度的感受

流程: ?sRGB(導(dǎo)入的圖片) -> linear(處理時(shí)) -> sRGB(輸出展示)

上圖中，下面的實(shí)線是實(shí)際顯示器的亮度和顏色的系數(shù)圖，如果沒(méi)有誤差，是不需要gamma校正的， 但實(shí)際上線性空間里計(jì)算出來(lái)的光照的中間亮度部分會(huì)被壓暗，所以需要經(jīng)過(guò)Gamma校正，調(diào)高原有的值進(jìn)行顯示。

參考文章

https://www.cnblogs.com/guanzz/p/7416821.html

https://cloud.tencent.com/developer/article/1543647

展示

5 真機(jī)調(diào)試

真機(jī)調(diào)試2.0支持canvas

解決問(wèn)題

問(wèn)題1 模型太大

只能放到線上，放到GitHub上，可以訪問(wèn)raw.githubusercontent.com請(qǐng)求到資源

問(wèn)題2 githubusercontent訪問(wèn)不穩(wěn)定，經(jīng)常掛

放到碼云上，碼云同樣有raw地址可以訪問(wèn)到資源

問(wèn)題3 碼云大于1m的資源需要登錄

最後選擇使用某雲(yún)，有免費(fèi)空間可以用。就是如果沒(méi)有自己域名的話，測(cè)試域名只有一個(gè)月的有效期，剛好之前申請(qǐng)了個(gè)域名，綁定，修改cname, 把模型傳到上去，可以訪問(wèn)，申請(qǐng)免費(fèi)的證書(shū)，https可以訪問(wèn)，搞定

總結(jié)

微信小程式適配threejs的注意點(diǎn)：

• 事件系統(tǒng)，事件觸發(fā)與事件參數(shù)

• 請(qǐng)求，

• doucment上的屬性適配

• canvas上的屬性適配

在查找相關(guān)問(wèn)題時(shí)發(fā)現(xiàn)了下面這位大佬，threejs配套的基本都適配了, 還有demo展示，推薦看一下https://github.com/deepkolos/three- platformize

【相關(guān)學(xué)習(xí)推薦：小程式開(kāi)發(fā)教學(xué)】

以上是淺析小程式要怎麼用threejs的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！