deepkolos/platformize

微信小程序报错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) 版均有