Hi!
I started a new project to create a boilerplate for Webpack + Three.js to make it easier for people (including me) to get started with Three.js / WebGL.
This project is not done yet and is still a WIP.
Right now I am stuck on why the heck my 3D-model is not shown.
It is loaded with STLLoader from the examples/jsm/loaders and I’ve followed the example provided in the root dir.
It seems like the geometry returned from the loader has data so I’m curious to know what I might be missing here.
In order to install/use the boilerplate you will need node/npm.
Clone the repository and run npm install && npm run start
The Mesh that I have problems with is added in index.js to the scene and is called outerBox, which can be found in ./js/box/outer/mesh.js
This seems to be the same problem I see in many webpack projects. You’re importing your stl file via an import statement, when it should be via an http request.
So I’d recommend trying to put the stl file in the public folder and give its public url to the loader. Right now, you’re most likely giving it the file content instead of the url.
Public folder:
[2020-06-02T23:27:54.920Z] “GET /assets/webpack-cube.stl” “Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.61 Safari/537.36”
src/models folder:
[2020-06-02T23:29:18.228Z] “GET /models/webpack-cube.stl” “Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.61 Safari/537.36”
No difference and both are treated as a http request according to http-server npm module.
Without import, e.g. loader.load(’…/…/…/models/webpack-cube.stl’, (geometry)…
Same here
But if you can still try one thing before, it’s when giving the url, use the same address that you would give in a browser (without localhost and port). Right now you seem to give the same relative path as the import, which is not making sense in the case of an url
Turns out that what I was saying was wrong, the import seems to work fine. I don’t understand that but hey, not the first time I’m wrong.
But what wasn’t working is that when you called geometry(), the function was not returning anything. There was only a return statement inside the loader callback, but that isn’t returned by geometry(). So one way to fix that is to use a promise. But I’ve only done that to preserve the synchronous calls of OuterBox.mesh().
Otherwise, as you see in most threejs examples, they remain asynchronous, and use callbacks.
Thank you for taking your time to help me out with this, your fix makes perfect sense. I would not have found this myself for ages (if ever) since I didn’t think about the asynchronous calls at all. Great find and thanks for making the pull request! It is also merged
