Comment utiliser threejs dans un mini programme ? L'article suivant vous parlera de la méthode d'utilisation de threejs dans l'applet WeChat. J'espère qu'il vous sera utile !

L'applet WeChat elle-même propose une version adaptée, mais la version est trop ancienne et l'adaptation est incomplète. Essayez de l'adapter manuellement vous-même. Ceci est le lien github officiel pour adapter threejs https://github.com/wechat-miniprogram/treejs-miniprogram

Affichage des effets

Extrait de code du mini-programme adapté
https://developers.weixin.qq .com/ s/y5tDPImr7xvs

1. Utilisez simplement l'adresse

GitHub?: https://github.com/mrdoob/trois.js pour dérouler l'intégralité du projet, et vous devrez modifier le code plus tard. Il y a déjà trois fichiers compilés dans le répertoire de construction. étant donné que la taille dépasse 500 Ko, la conversion de es6 vers es5 sera ignorée et three.module.js ne pourra pas être utilisé. Afin de faciliter le débogage et de voir l'emplacement de l'erreur, placez le fichier non compressé. three.js dans le projet. Essayez de citer.

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

Signaler une erreur?! ! !

Après les tests, il s'agit d'un bug dans les dernières versions de la bibliothèque de base. Nous l'avons signalé au responsable de WeChat. L'adresse de retour est (https://developers.weixin.qq.com/community/develop/. doc/0002ca77aa420880162d1b08d5b800), staff officiel Le problème est résolu rapidement,

En fait, peu importe s'il n'est pas résolu. Réduire la version du référentiel à 2.19.6 ou utiliser require pour importer peut également résoudre le problème

. Résolvez l'erreur

Problème 1 Parce que le code de référence est trop ancien, j'ai signalé une erreur CubeGeometry

J'ai découvert que ce CubeGeometry avait été renommé il y a longtemps

Journal de mise à jour?: https://github.com/ mrdoob/trois.js/wiki/Migration-Guide

Problème 2 addEventListener signale une erreur

L'applet WeChat n'a pas addEventListener et gérera automatiquement le rechargement du canevas. Commentez le code suivant dans. three.js

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

Question 3 Il y a un problème avec le type de canevas

Vérifiez attentivement Le code a détecté que _canvas.getContext a signalé une erreur et le type a été modifié en webgl.

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

Il existe deux fa?ons d'utiliser le canevas de l'applet WeChat, webgl et 2d ne signifie pas webgl2,

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

Et il n'y a pas de 2d dans contextNames. Seules les méthodes liées aux images dans le code utilisent 2d. Après avoir résolu les problèmes ci-dessus, vous pouvez commencer à courir.

Afficher

Un avertissement a été trouvé lors du débogage sur le téléphone mobile. L'extension EXT_blend_minmax n'est pas prise en charge. En regardant le code, il s'agit d'une erreur signalée dans threejs. Après avoir soigneusement recherché

Adresse MDN?: https://developer.mozilla.org/en-US/docs/Web/API/EXT_blend_minmax

J'ai trouvé qu'il s'agissait de deux constantes, et elles sont prises en charge par défaut dans webgl2,

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

Vous pouvez le modifier directement par la valeur correspondante dans le code. Si vous souhaitez supprimer l'avertissement, il se situe autour de la ligne 12551

2. Utilisez TextureLoader

pour résoudre l'erreur

Problème 1 createElementNS.

Regardez attentivement la logique?: TextureLoader -> ImageLoader ->createElementNS

L'applet WeChat n'a pas createElementNS Après avoir cherché, j'ai trouvé une méthode alternative, qui est createImage of Canvas. Cependant, où peut-on le faire. J'obtiens le canevas?? Il n'y a aucun moyen de le créer directement. Pour plus de commodité, créez-le directement dans Transmettez-le lors du nouveau TextureLoader. Notez que le premier paramètre est simplement transmis vide.

L'applet WeChat n'a pas addEventListener, mais vous pouvez lier des événements sur le canevas, regarder attentivement l'événement ponctuel et les événements correspondant à l'applet

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

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

事件有了，怎么通知呢？?jī)蓚€(gè)方法沒有任何聯(lián)系，只能用eventbus了，eventbus可以自己寫個(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)聽）

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

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

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

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

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

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

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

排查過程：

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

clientHeight和clientWidth需要賦值

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

問題4 無(wú)法縮放

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

排查過程：

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ò)

問題1 Request和fetch為undefined

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

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

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

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

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

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

看示例是這行代碼沒加

renderer.outputEncoding = THREE.sRGBEncoding;

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

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

上圖中，下面的實(shí)線是實(shí)際顯示器的亮度和顏色的系數(shù)圖，如果沒有誤差，是不需要gamma校正的， 但實(shí)際上線性空間里計(jì)算出來(lái)的光照的中間亮度部分會(huì)被壓暗，所以需要經(jīng)過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

解決問題

問題1 模型太大

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

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

放到碼云上，碼云同樣有raw地址可以訪問到資源

問題3 碼云大于1m的資源需要登錄

Enfin, choisissez d'utiliser un certain cloud, qui dispose d'un espace libre disponible. Autrement dit, si vous n'avez pas votre propre nom de domaine, le nom de domaine test n'est valable qu'un mois. Je viens de demander un nom de domaine auparavant, je l'ai lié, j'ai modifié le nom C, j'ai téléchargé le modèle et il est accessible. . J'ai demandé un certificat gratuit, https peut y accéder, et c'est fait

Résumé

Notes sur l'adaptation de l'applet WeChat à threejs :

• système d'événements, déclenchement d'événements et paramètres d'événements

• demande,

• Adaptation des attributs sur le document

• Attributs sur le canevas Adaptation

J'ai trouvé le gars suivant lors de la recherche de problèmes connexes. Fondamentalement, tous les packages prenant en charge threejs sont adaptés, et il existe également un affichage de démonstration. Il est recommandé de le faire. jetez un ?il à https://github.com/deepkolos/trois-platformize

【Recommandations d'apprentissage associées?: Tutoriel de développement de mini-programmes】

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!