OBJLoader | OBJ file loader library for Processing

The CDN you're using (cdn.skypack.dev) does some re-exporting on their side, which is causing the problem.

The file you're referencing in your import isn't actually the three.js module, but a re-direct.

That file does an export * (which is fine), AND an export {default}, which is where the failure is occurring. Three.js does not have a default export.

Skypack is likely applying this redirect universally to all modules, so it's not that they necessarily KNOW this is happening, but they should definitely be testing their system before hosting a specific module...

Try changing your importmap to reference the following URL, and it should work:

OrbitControls is not directly exported as part of the Three.js library; instead it's exported as part of the examples.

If you're using a bundler (such as WebPack) you can import it like this:

So, after dealing with college and work stuff, I finally returned to this code, and I could at last fix my mistakes. Shoutouts to Nick Clark for it's comment on the buffers associated with the VAO.

The problem seems to happen because of this line of code

You can create your custom ShaderMaterial in whatever method you learned, and then simply substitute the .material property of each of the meshes in your obj.

In general, rendering a mesh with multiple materials is possible in three.js if the geometry defines proper groups data. However you normally render different parts of the mesh with distinct materials. E.g. when having a character model, you would render the skin with one material and the cloths with a different one.

You don't want to use this approach to combine or stack effects. Instead, you have to implement a single custom shader that includes all effects that you want to apply on the surface.

This error is telling you that your geometry attributes count don't match up. For example, your geometry could have:

• 100 vertex positions
• 99 vertex normals
• 99 vertex UVs

... or something of that nature. When looking up info on that 100th vertex, it says "attempt to access out-of-range vertices"

Ideally, you'd want to re-export the OBJ asset so you don't have to manually find the geometry that's causing the problem. However, in case you cannot get a new OBJ, you could either:

• prevent the problem geometry from rendering with mesh.visibility = false
• Fix the geometry attribute count. To fix it, you'll have to find which attribute is short:

You are using an outdated code reference. With recent three.js version, the code looks more like the following:

This is the code that I got to render the obj file. Changed the structure of the original file based on some other examples found.

But this might help someone else!

But when I put the console.log outside the function I get undefined.

That happens because the OBJ asset is loaded asynchronously. That means if you access minObj before the loading process has been finished, runtime errors will occur since the variable is still undefined.

One simple solution is to implement a check before accessing minObj: