在 uni-app 中支持 H5 模式

@minisheep/three-platform-adapter 导出的 adapter 是默认支持浏览器环境使用的，且对应插件在检测到编译目标是 H5 时也不会进行全局代理，处理 worker 等工作。

所以你需要处理的工作是：

• 仅在对应平台使用 polyfill。
• 在 h5 场景下给各种 decoder 设置网络 path,就如同在 web 中使用那样。

简单例子

main.ts [uni]

import { createSSRApp } from 'vue';
import App from './App.vue';
// #ifdef MP-WEIXIN
import '@minisheep/mini-program-polyfill-core/wechat-polyfill';
import '@minisheep/three-platform-adapter/wechat';
// #endif
export function createApp() {
  const app = createSSRApp(App).use(pinia);
  return {
    app
  };
}

draco-demo.vue

<script setup>
  //...
  const dracoLoader = new DRACOLoader();
  // #ifndef H5
  dracoLoader.setDecoderPath('draco/gltf/');
  // #endif
  // #ifdef H5 
  dracoLoader.setDecoderPath('https://threejs.org/examples/libs/draco/gltf/'); // 使用网络路径
  // #endif
  const gltfLoader = new GLTFLoader();
  gltfLoader.setDRACOLoader(dracoLoader);
  //...
</script>

已知问题

uni-app h5 模式下通用组件封装的 canvas 目前（2025/01/15）存在 type 传递无效问题，任何 type 值画布组件都会在初始化时消费一次 2d context, 导致获取 webgl 上下文报错, 见github。

可以用以下方式绕过:

<template>
  <!--  #ifndef H5    -->
  <!--  uni-component 实现的canvas 固定了type, 不能在h5中使用-->
  <canvas
      type="webgl2"
      id="canvasId"
      disable-scroll
  >
  </canvas>
  <!-- #endif -->
  <!-- #ifdef H5 -->
  <component
      :is="'canvas'"
      id="canvasId"
  />
  <!-- #endif -->
</template>