微信小程序报错THREE.GLTFLoader: setMeshoptDecoder must be called before loading compressed files
Closed this issue · 1 comments
使用EXT_meshopt_compression压缩glb后尝试在小程序上加载,开发者工具可以正常渲染,真机调试报错THREE.GLTFLoader: setMeshoptDecoder must be called before loading compressed files,
代码中已设置setMeshoptDecoder
`import { $cancelAnimationFrame, $requestAnimationFrame, $window, AmbientLight, DirectionalLight, PerspectiveCamera, PLATFORM, Scene, sRGBEncoding, WebGL1Renderer,Mesh,MeshLambertMaterial,DoubleSide,Vector3,BoxGeometry,MeshBasicMaterial,ImageUtils,BackSide,MeshFaceMaterial} from 'three-platformize'
import { WechatPlatform } from 'three-platformize/src/WechatPlatform'
import { GLTF, GLTFLoader } from 'three-platformize/examples/jsm/loaders/GLTFLoader'
import { OrbitControls } from 'three-platformize/examples/jsm/controls/OrbitControls'
const res = wx.getSystemInfoSync();
const viewportWidth = res.windowWidth; // 视窗宽度,单位为px
const viewportHeight = res.windowHeight; // 视窗高度,单位为px
Page({
disposing: false,
platform: null as unknown as WechatPlatform,
frameId: -1,
data:{
options:'',
},
onLoad() {
wx.createSelectorQuery().select('#gl').node().exec((res) => {
const canvas = res[0].node
this.platform = new WechatPlatform(canvas)
PLATFORM.set(this.platform);
const renderer = new WebGL1Renderer({ canvas, antialias: true, alpha: true })
const camera = new PerspectiveCamera(50, viewportWidth / viewportHeight, 0.1, 1000);
const scene = new Scene()
const loader = new GLTFLoader()
//设置loader为加载EXT_meshopt_compression压缩压缩后模型
// loader.setMeshoptDecoder(MeshoptDecoder);
const controls = new OrbitControls(camera, canvas);
//设置旋转中心
controls.target.set(5.4, 0, 5.6)
controls.enableDamping = true;
//设置相机在头上
camera.position.set(5.5,15,30);
renderer.outputEncoding = sRGBEncoding
scene.add(new AmbientLight(0xffffff, 1.0))
scene.add(new DirectionalLight(0xffffff, 1.0))
renderer.setSize(viewportWidth, viewportHeight)
renderer.setPixelRatio($window.devicePixelRatio)
const render = () => {
controls.update();
renderer.render(scene, camera);
this.frameId = $requestAnimationFrame(render);
};
render();
//上面都是初始化
const ip = 'cloud://prod-5g4x5o2v7cdf690c.7072-prod-5g4x5o2v7cdf690c-1319491783';
const fileList =[ip+'/model/bigMap5.glb']
//云端获取模型文件
wx.cloud.init()
var urls = [] // 定义一个空数组来存储获取到的文件
//获取模型临时地址
wx.cloud.getTempFileURL({
fileList
}).then(res => {
console.log('模型获取成功',res.fileList)
for(let i = 0; i < res.fileList.length ; i++) {
urls[i] = res.fileList[i].tempFileURL
}
console.log('模型地址为',urls)
//异步加载模型
loader.load(urls[0],(gltf: GLTF) => {
console.log('3')
// @ts-ignore
gltf.parser = null;
let model = gltf.scene;
// model = setModelSize(model,currentIndex);
scene.add(model);
})
})
})
//下面的是onReady的后括号
},
onUnload() {
this.disposing = true
$cancelAnimationFrame(this.frameId)
PLATFORM.dispose()
},
onTX(e: any) {
this.platform.dispatchTouchEvent(e)
},
})
`
https://github.com/deepkolos/platformize/blob/main/examples/tests-three/MeshOpt.ts
@aweineverdie7 可以看看这么例子如何使用的, wasm 和 js(asm) 版均有