Raycaster slow performance with mouse move event

As the topic, I found that three-mesh-bvh seems like a solution for slow performance of Raycaster and then followed the instructions.
In HTML, scripts are attached, like
script type=“module” src=“https://threejs.org/build/three.js
script type=“module” src=“https://cdn.skypack.dev/three-mesh-bvh

In JS file, code as follows was added.
THREE.BufferGeometry.prototype.computeBoundsTree = computeBoundsTree;
THREE.BufferGeometry.prototype.disposeBoundsTree = disposeBoundsTree;
THREE.Mesh.prototype.raycast = acceleratedRaycast;

There’s an error message "ReferenceError: Can’t find variable:computeBoundsTree.

Please kindly advise how to fix the error. Most examples online use webpack, which makes project structure look more complicated. If I just use the tradition one, html/css/javascript, how should I use three-mesh-bvh?

Your info would be appreciated.

There’s an error message "ReferenceError: Can’t find variable:computeBoundsTree.

@gkjohnson Do you know how to fix this issue?

It looks like you are using module script tags incorrectly. If you’d like to use es6 modules the recommended approach is to use import tags. See the “install from CDN or static hosting” section on this docs page:


Thanks for your reply. Error messages still occurred. I may not be familiar with ES6 or package install process. I know that some people are using Webpack, which makes projects look more professional.

I so far made a few small projects and imported Three.js like the following. It all worked fine, but did not work for BVH. Maybe it’s related to module versions.
script src=“https://cdn.jsdelivr.net/npm/three@0.134.0/build/three.min.js”></script
script src=“https://cdn.jsdelivr.net/npm/three@0.134.0/examples/js/loaders/OBJLoader.js”></script

To make things easier, I tried the command “npm install --save three”, but no magic happened.

Anyway, I will spend time learning about other ways to import THREE.js afterwards. If any questions, will come back to you. Thanks a lot.