鑒于有CSDN友問我FBX模型在小程序端加載的問題，我就在這里給大家介紹一下吧~
首先，加載fbx模型，我們用到的是three.js和不同的模型類型的加載庫，那么，我們在得到了web版本的加載庫的前提下，怎么使其用到小程序里面呢？
首先要知道，如下幾點：
1：小程序運行的環境是微信APP，不是瀏覽器，所以dom等不可以直接使用，那么在將動畫渲染到哪里方面，就需要使用如下函數：

wx.createSelectorQuery().select('#myCanvas').node().exec((res) => {const canvas = res[0].nodeconst THREE = createScopedThreejs(canvas) fbxModelLoadPig(canvas, animationUrl, THREE, start) })

2：fbxModelLoadPig函數就是加載動畫的函數，其中，系統的wx.getSystemInfoSync().windowWidth也需要替換
3：在three.js方面，要引入小程序版本的three.js，因為小程序沒有XMLRequestHttp對象，所以小程序的three.js也需要改版，不過這個官方已經提供給我們了，直接用就好。
4: 調用loader.load方法時，要改一個壓縮庫文件inflate.min.js，主要是小程序不支持BOM,所以使用這個庫文件時，里面的this指向需要更改，最開始報錯很奇怪，知道最后深入到庫文件中，才發現是這個問題，所以遇到bug別著急，一步一步找，總會發現端倪的。

var loader = new THREE.FBXLoader(); loader.load(）

5：其他的就基本小問題啦，可以自己解決
改版的代碼在這里：
點擊獲取
使用說明：

import {fbxModelLoadPig} from "../../utils/model.js";//路徑自己設，這個是我的 import { createScopedThreejs } from '../../utils/three/three_new.js'//路徑自己設，這個是我的 onReady: function() { var start = Date.now();wx.createSelectorQuery().select('#myCanvas').node().exec((res) => {const canvas = res[0].nodeconst THREE = createScopedThreejs(canvas) fbxModelLoadPig(canvas, animationUrl, THREE, start) }) },fbxModelLoadPig參數說明：canvas就是createSelectorQuery獲取的節點animationUrl就是fbx文件的網絡鏈接THREE就是利用小程序版本的three.js生成的一個值start是我為了測試函數運行時間的，朋友們在使用的時候，可以不傳，但是不要忘記更新我的fbxModelLoadPig定義，刪除函數體內的start應用

我這邊的代碼文件目錄如下，大家參考相對位置，上面的代碼在pages/index/index.js中，pages和utils是同一層目錄

總結

以上是生活随笔為你收集整理的微信小程序实现FBX模型的动画加载的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。