Importing out-of-core ConvexGeometry Module into browser

I’ve been struggling for the last couple days with the basic problem of using the out-of-core ConvexGeometry method in the browser. I was able to track down the root cause form this closed 2020 three.js Gitub request, but unforuately the Three.js page recommended as a solution is no longer valid. I’ve kept tried to keep trouble shooting but now need to raise my hand and ask for help.

I can see the module correctly imported through the browser console from the index.html:

	<script type="module">
		import { ConvexGeometry } from "";
    <script src="render.js"></script>

But I can’t figure out a way to use it in my clients’ render.js. The index.html file and render.js are in the same public folder. How do poeple suggest this be accomplished?

function main(){
   const points = //get Vector3 points
   console.log(new ConvexGeometry(points))
// returns     
// ConvexGeometry is not defined at main

I’m afraid you are not using ES6 modules correctly. render.js should be an ES6 module and the import of ConvexGeometry should be placed in that file.

That’s actually a good hint in the direction I need to investigate and I did quickly make some progress after adding type="module" to my other scripts. Is there a Three.js example on how this configuration can be accomplished?

The official example us ES6 modules however it might make more sense to study a general guide about the usage of this JavaScript feature. It’s not really a three.js thing^^.

Thanks to @Mugen87 suggestion there is a conical answer to this questions for novice users fo three.js and ES6 which I describe below.

After adding the module tag in the index.html
<script type="module" src="render.js"></script>

It can be added directly to the now render.js module with import and used as expected in the other file.

import { ConvexGeometry } from '';

1 Like