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.
If anyone got time it would be great to get some help on this.
Link to source code: https://github.com/brandflugan/three-js-webpack-boilerplate
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.
Hope that makes sense. Let me know if not.
[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”
[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)…
I’ll try and suggest you a pull request tomorrow.
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
Seem to be no difference.
Tried to go towards /models/webpack-cube.stl
Got the following info in chrome network & console:
Thanks for helping out btw!
I just submitted a pull request. https://github.com/brandflugan/three-js-webpack-boilerplate/pull/1
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
Otherwise, as you see in most threejs examples, they remain asynchronous, and use callbacks.
Hope that makes sense and help.
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
And here is the now working Webpack 3D cube