omrips / viewstl

Viewstl Javascript plugin - STL/OBJ 3D files Viewer by viewstl.com
MIT License
186 stars 46 forks source link

Node.js module #6

Open DJWoodZ opened 3 years ago

DJWoodZ commented 3 years ago

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!

omrips commented 3 years ago

Yes, I'll do it after I'll post a new version on the plugin, hopefully in couple of weeks.

DJWoodZ commented 3 years ago

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.

omrips commented 3 years ago

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. ?

garzadba commented 3 years ago

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.

DJWoodZ commented 3 years ago

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:

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.

omrips commented 3 years ago

Thanks DJWoodZ for the educated explanation, and garzadba for the feedback, I'll definitely try to build npm helper for this plugin.

JayEnaR commented 3 years ago

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...