Loading GLB models with phy.load() fails with 'Unexpected token '<'' error in Vue+Vite

[Fxalll]

I tried React+Vite using the official example "Init modules", but it failed with a console error "Loading error on Physx".
I then tried Vue+Vite, and this time the official example ran smoothly. However, whenever I try to load a glb model with

phy.load("/assets/models/minmac.glb", () => {...}) 

I get an error "Uncaught SyntaxError: Unexpected token '<'".

Upon closer inspection, the error occurs in the source code:

this.decoderPending = Promise.all(librariesPending).then((libraries) => { 
  const jsContent = libraries[0]; 

  const fn = DRACOWorker.toString(); 

  const body = [ 
    "/* draco decoder */", 
    jsContent, 
    "", 
    "/* worker */", 
    fn.substring(fn.indexOf("{") + 1, fn.lastIndexOf("}")), 
  ].join("\n"); 

  this.workerSourceURL = URL.createObjectURL(new Blob([body])); 
});

I'm very confused now. I tried putting draco in the public directory and using phy.setDracoPath('..'); but nothing changed.
I also tried not using phy, and just using the threejs demo which can load this model normally.

Here is the complete Vue code:

<script setup>
import * as THREE from 'three';
import { phy, math } from 'phy-engine';

const w = window.innerWidth;
const h = window.innerHeight;

// init three.js
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(60, w / h, 0.1, 1000);
camera.position.set(0, 1, 5);
const renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0x07142c, 1);
renderer.setSize(w, h);
document.body.appendChild(renderer.domElement);

// add some light
const light = new THREE.PointLight(0xffffaa, 10, 100, 2);
light.position.set(0, 4, 2);
scene.add(light);
const hemiLight = new THREE.HemisphereLight(0x2076d5, 0x502c09, 1);
scene.add(hemiLight);

// start three render loop
function animate () {
  renderer.render(scene, camera);
}
renderer.setAnimationLoop(animate);

// init phy-engine
phy.init({
  type: 'PHYSX',
  worker: true,
  compact: true,
  scene: scene,
  renderer: renderer,
  callback: physicsReady,
})

function physicsReady () {
  phy.set({ substep: 1, gravity: [0, -9.81, 0], fps: 60 });
  phy.add({ type: 'plane', size: [300, 1, 300], visible: true });
  phy.add({ type: 'box', size: [1, 1, 1], pos: [0, 4, 0], mass: 1 });
  phy.add({ type: 'sphere', size: [0.5], pos: [0, 6, 0], mass: 1 });

  phy.load("/assets/models/minmac.glb", addModel);

  function addModel () {
    let scale = 10;

    const model = phy.getMesh("minmac");

    model.mac.geometry.scale(scale, scale, scale);

    const option = {
      type: "box",
      size: [
        (2.5 * scale) / 10,
        (3.4 * scale) / 10,
        (2.8 * scale) / 10,
      ],
      mass: 7.26,
      friction: 0.4,
      restitution: 0.2,
    };

    phy.add({
      ...option,
      pos: [0, 1.7 + 3.4 * 1, 0],
      mesh: model.mac,
      breakable: true,
      breakOption: [50, 3, 4, 2, true],
    });
  }
}
</script>

<template>
  <div ref="container"></div>
</template>

<style scoped>
div {
  margin: 0;
  padding: 0;
  overflow: hidden;
}
</style>

[Fxalll]

The error with React+vite occurred because I missed the step "copy node_modules/phy-engine/compact/ to your /public folder". After completing this step, the same issue appeared:

[Fxalll]

I can successfully implement the functionality I want using the built-in methods of Three.js. Below is the complete code and a screenshot of the running result. However, the phy.add approach might be more concise.

<script setup>
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js';
import { phy, math } from 'phy-engine';
import { onMounted } from 'vue'

const w = window.innerWidth;
const h = window.innerHeight;

// init three.js
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(60, w / h, 0.1, 1000);
camera.position.set(0, 1, 5);
const renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0x07142c, 1);
renderer.setSize(w, h);
document.body.appendChild(renderer.domElement);

// add some light
const light = new THREE.PointLight(0xffffaa, 10, 100, 2);
light.position.set(0, 4, 2);
scene.add(light);
const hemiLight = new THREE.HemisphereLight(0x2076d5, 0x502c09, 1);
scene.add(hemiLight);

// Initialize OrbitControls
let controls = null;

// Initialize OrbitControls after camera and renderer are defined
onMounted(() => {
  controls = new OrbitControls(camera, renderer.domElement);
  controls.enableDamping = true; // 启用阻尼效果
  controls.dampingFactor = 0.05; // 阻尼系数
  controls.screenSpacePanning = false; // 禁止屏幕空间平移
  controls.minDistance = 1; // 最小缩放距离
  controls.maxDistance = 50; // 最大缩放距离
});

// start three render loop
function animate () {
  if (controls) {
    controls.update(); // 更新控制器
  }
  renderer.render(scene, camera);
}
renderer.setAnimationLoop(animate);

// Initialize Draco loader
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath('/node_modules/three/examples/jsm/libs/draco/');

// Initialize GLTF loader with Draco decoder
const gltfLoader = new GLTFLoader();
gltfLoader.setDRACOLoader(dracoLoader);

// Load model and save as mesh for later use
let loadedModelMesh = null;

function loadDracoModel () {
  gltfLoader.load('/assets/models/minmac.glb', (gltf) => {
    // Save the loaded model mesh for later use
    loadedModelMesh = gltf.scene;

    // You can now use loadedModelMesh in your code
    console.log('Draco model loaded successfully');

  }, undefined, (error) => {
    console.error('Error loading Draco model:', error);
  });
}

loadDracoModel()

// init phy-engine
phy.init({
  type: 'PHYSX',
  worker: true,
  compact: true,
  scene: scene,
  renderer: renderer,
  callback: physicsReady,
})

function physicsReady () {
  phy.set({ substep: 1, gravity: [0, -9.81, 0], fps: 60 });
  phy.add({ type: 'plane', size: [300, 1, 300], visible: true });
  phy.add({ type: 'box', size: [1, 1, 1], pos: [0, 4, 0], mass: 1 });
  phy.add({ type: 'sphere', size: [0.5], pos: [0, 6, 0], mass: 1 });

  // phy.load("/assets/models/minmac.glb", addModel);
  addModel();
  function addModel () {
    let scale = 3;

    // const model = phy.getMesh("minmac");
    const model = loadedModelMesh;

    let mesh = model.children[0];


    mesh.geometry.scale(scale, scale, scale);

    const option = {
      type: "box",
      size: [
        (2.5 * scale) / 10,
        (3.4 * scale) / 10,
        (2.8 * scale) / 10,
      ],
      mass: 7.26,
      friction: 0.4,
      restitution: 0.2,
    };

    phy.add({
      ...option,
      pos: [0, 1.7 + 3.4 * 1, 0],
      mesh: mesh,
      breakable: true,
      breakOption: [20, 3, 4, 2, true],
    });
  }

  phy.activeMouse(controls);
  phy.mouseMode("shoot", { size: 0.2, mass: 100, velocity: 60 });
}
  </script>

<template></template>

<style scoped></style>

[lo-th]

yes for draco i have to look better way
because i try to include draco wasm inside draco.js to avoid path
but three seem's change version