How to include as standalone file without node.js, etc?

[LukePH]

This library looks great. I'm working with Three.js and just straight apache right now and having trouble including this in my project.

I might be missing something very obvious as I'm inexperienced with modern javascript toolkits but is there a way for me to build a single standalone js file like Three.js, etc have?

I see someone ask that before here, but they closed their issue: https://github.com/gkjohnson/three-mesh-bvh/issues/143

I see the umd/index.js build file, but doesn't seem like it's straight forward to include directly.

[gkjohnson]

If you're using the classic JS script includes then the umd/index.js is what you're looking for. You'll want to include that file after three.js has been included on the page:

<script src="./path/to/three.js"></script>
<script src="./path/to/three-mesh-bvh/umd/index.js"></script>

Then using the UMD build is outlined a bit in the README:

// Or UMD
const { MeshBVH, acceleratedRaycast } = window.MeshBVHLib;

[LukePH]

I am using ES6 modules imports so I was tunnel visioning on the 'Import via ES6 modules' part of the docs.

Thank you, I knew the window.MeshBVHLib wouldn't work by it's self, but didn't realise I just needed a classic script tag with that, as I didn't really know anything about UMD packages.

This is what I have now:

<script src="/libraries/three/three.js"></script>
<script src="/libraries/MeshBVH_umd.js"></script>

<script type="module">
'use strict';

//import * as THREE from '/libraries/three/three.module.js';  //Had this before
import { TDSLoader } from '/libraries/three/jsm/loaders/TDSLoader.js';
import { FBXLoader } from '/libraries/three/jsm/loaders/FBXLoader.js';
import { SkeletonUtils } from '/libraries/three/jsm/utils/SkeletonUtils.js';
import Stats from '/libraries/three/jsm/libs/stats.module.js';
...

const { MeshBVH, computeBoundsTree, disposeBoundsTree, acceleratedRaycast } = window.MeshBVHLib;

...

</script>

And it works!, but it would be nice to keep the Three.js module import I had before, and include three-mesh-bvh via import like everything else. But I could put up with doing it this way.

[gkjohnson]

Manually including libraries with dependencies that use modules is a complicated use case in Javascript right now. Packages use "bare module imports" because you can't predict the users folder structure and where the common version of three.js (in this case) should live. "Import Maps" may make this easier but they're not widely supported, yet.

This library generally doesn't use anything aside from bare module imports that requires bundling so one option is to just copy the source and modify all instances of import ... from 'three' to point to your copy of three.js. Or you can modify the rollup script to generate an es6 module file rather than UMD that will only have one instance of import ... from 'three' to modify.

Also -- it's not great to include both the jsm examples files and global script import of three. You'll wind up importing multiple versions of three.js into the page which can cause problems. I think newer versions have been updated to log a warning if you run into that scenario, though.

[LukePH]

Yeah looks like all the loaders, etc include the 'three.module.js' file, so I cannot avoid importing it. So yeah using the Githubissues.

Githubissues is a development platform for aggregating issues.