Open DJWoodZ opened 3 years ago
Yes, I'll do it after I'll post a new version on the plugin, hopefully in couple of weeks.
Thanks. I really appreciate you taking the time to look into this. It will make it easier to integrate into Node-based projects and will allow you to standardise dependency management, i.e. you can use NPM to handle the Three.js dependency and probably remove the load_three_files
option/feature. I look forward to the update.
Sorry for the long wait. I was actually trying to do it, but then came to a dead end.
As you can see, I'm not a node.js expert, and would like to learn more if and how a client side code will make sense with npm. ?
It is actually a good idea. I currently develop an app with Angular. It uses npm to manage dependencies. For frameworks like Angular and react would be totally worth.
It would simplify updating and management of dependencies like ThreeJs as @DJWoodZ mentions.
I think the implementation in NodeJs is not possible since node has no DOM which is needed to render the models.
Apologies for taking a little while to reply. I appreciate that the Node.js ecosystem can be a little overwhelming at first, but Node.js isn't just for running JavaScript on a server. It started out that way, but many client-side JavaScript projects also now make use of it to improve the development process. If it is of interest to you, I think it is worth spending a little time to learn the basics.
To help you get started, I've created a simple 'STL Viewer' project: https://github.com/DJWoodZ/stlviewer
Hopefully this will give you an idea of how you might go about using Node.js and npm in this project. Essentially, I used Create App to generate the project boilerplate and the code from this article as a simple Three.js STL viewer implementation.
I stress that this is a simple example. Before you publish your project as an npm module, you'll probably want to consider implementing some additional developer tools (for example, a testing framework such as Jest), but I've tried to keep it as simple as possible to help you get started.
The following are used in the example:
npm
for dependency management. Its main purpose is to manage the libraries needed to build and run the project (i.e. three.js, plus some developer tools)node.js
provides a runtime environment for JavaScript, i.e. to run developer tools such as parcel.jsparcel.js
is primarily a bundler (invoked with npm run build-prod
) but also provides a handy development server (npm start
) that 'hot reloads' your code as you save it - see: https://parceljs.org/eslint
is used to 'sanity check' the JavaScript (invoked with npm run lint
) - see: https://eslint.org/babel
is used (by parcel) to 'transpile' the JavaScript - see: https://babeljs.io/docs/en/To get started with the example, you will need to:
1) install Node.js (which includes npm): https://nodejs.org/en/
2) git clone
my simple 'stlviewer' project
3) cd
into the root of the project
4) run npm install
to install the dependencies
5) run npm start
to start the development server
6) open the following URL in your browser: http://localhost:1234/
Once the development server is running, you can try updating some of the code (e.g. in src/stlviewer/StlViewer.js
), hit 'save' and it'll reload in the browser :-)
I hope you find this helpful.
Thanks DJWoodZ for the educated explanation, and garzadba for the feedback, I'll definitely try to build npm helper for this plugin.
I have struggled a bit myself to get this library working in an Angular app. The different version of Angular handled the files like load_three_files
differently. I got it working here in earlier versions of angular for those who might have struggled with it too.
It would be great to have the npm package available...
This is a great project. Thank you!
Have you considered offering this project as a Node.js module and possibly also publishing it on NPM?
Thanks again!