Npm free Threejs

Discussion
1

I would like to urge the threejs development team, to offer an npm free version of threejs.

There is no need for this dependency.

For example, the examples that are included in the latest version of the Learning Threejs, book, are only offered with the requirement that you use npm.

There is no need for that.

I was able to change the code back to become npm independent, but it was quite some work. Its available here:
https://openage.org/it/samples/index.html

It’s just a few changes that need to be done all over the code.

This should have been provided with the book.

1 Like
2

Node is everywhere, for good reason, but you can work without it using a CDN, modules and import maps. I’m using threejs and several other ESM modules like this, as recommended in the manual:

<!-- Import maps polyfill -->
<script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>
<script type="importmap">
   {
      "imports": {
         "three":			"https://cdn.jsdelivr.net/npm/three@0.149.0/build/three.module.js",
         "three/addons/":	"https://cdn.jsdelivr.net/npm/three@0.149.0/examples/jsm/",
      }
   }
</script>

Import them like this in your js files:

import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import Stats from "three/addons/libs/stats.module.js"
3

Yeah but in order to run the examples in the book, I had to change the Threejs library in certain places. Always in the same way. Should have been provided off the shelf. Can even be mitigated to just running a few sed scripts on the library, to npm-free it each time theres a new version.

I am struggling to see the reason for this npm dependency.

Here they are speaking like npm is essential.

4

I am struggling to see the reason why you’re struggling to see the reason :sweat_smile: I mean, you do see why you would want a hammer to drive nails into some wood, right? Even though it is possible to just pick some hard rock in the street and do that without a hammer.

1 Like
5

When it comes to doing these examples, npm isn’t offering me anything.

A hammer makes it easier to nail the nails.

Npm does nothing for me.

So it’s more like, im nailing the nails and there’s some saw I have to be having around all the time. Because somebody else somewhere was sawing once.

That’s not a good modularity.

6

because you would not let it to :pensive:

well kind of, except they saw things every day in the course of their work. since webdev people do all kinds of shit besides 3js-related activities, they already have npm and use it daily, so it’s not a big deal (not even a small deal) for them

1 Like
7

I’m not sure what this does “npm free version of threejs” mean. I think Three.js is npm agnostic. If the examples in the book use npm, this is because the author(s) chose this way. If some people insist on using npm, this is because they find it useful for their way of using Three.js.

Personally, I have many projects that use local copies of three.js (no npm, no cdn), because in some cases I want to have a closed, self-sufficient and portable development environment that I can easily copy to another computer and continue developing there without installing anything, without requiring internet connection and without worrying of having a library suddenly updated in an incompatible way.

8

what webserver are you using?
How did you install it?

9

I’m not sure what you mean with what webserver I’m using. Npm I installed just according to the book with some sudo apt-get.

And then the examples only worked on this slightly modified version of Threejs.
Just enough so that I can’t use it without npm.

10

Yeah, so it’s not like the dev team is doing anything with threejs. it’s just somebody else (npm), is modifying the library so it doesn’t really work anymore without npm.
To un-npm Threejs I had to make silly syntax modifications, all over the library. And they were always completely unnecessary and silly.

Off course, npm shouldn’t be adding in it’s own modifications to the library.
There is no need for them and they are doing this only to create dependency on npm.

We could send a message to the npm team and say “hey can you stop doing that”.
Or we could make some bash script that takes those changes back.

11

Your book instructions are presumably giving you commands to set up a development environment. Maybe that is using webpack dev server, rollup, parcel, I don’t know. I didn’t read the book.

If you don’t use NPM to set those up, then you will need to consider what webserver your dev environment will use.
You will need a web server to load locally hosted,

  • addon scripts, such as orbitControls, gltfLoader, draco libs
  • assets such as glTF, textures, fonts, audio, etc.

That means installing something.

You can’t escape installing some kind of dependency if you want to code web applications seriously, even if you’re not using Threejs.

NPM has loads of choices that you can use when setting up your dev and production environments.

It’s possible to avoid using NPM, but it just means figuring out extra things you will inevitably need to find your own solutions for.

For some examples of working “NPM free” Three.js examples,

  1. This example, sbcode.net : Orbit Controls, that you see in the browser is running NPM free.
    It uses import maps.
    But since I host the Threejs scripts and all the assets as well, I need a webserver.
    I use Nginx. Press the <>, bottom left of the working example, to see the actual script running in your browser.

  2. The official three.js examples website.
    All the examples use import maps to tell your browser where it can find the resources linked in the import statements.
    Each example also has a <> button to see the actual code running in your browser.
    The webserver is what ever GitHub pages uses. (I think examples website uses GitHub pages)

  3. Almost all JSFiddle, CodePen examples posted on this forum are running NPM free. The webserver is whatever the platform uses. And most examples use import maps to tell your browser where it can find the CDN hosted resources linked in the import statements.

I didn’t need to create a modified version of Threejs to get my “NPM free” examples to work on sbcode.net and JSFiddle.

12

post a diff

13

It’s gone but maybe next time i un-npm Threejs I will.

14

Yes Threejs is by default, independent.
But sometimes it can be hit by an npm-dependency-injection.
And the code and the library from that moment on, will depend on npm.

I just use nginx as a server for the website and that’s it.
Besides that I don’t really understand this webpack dev server.
Looks like unnecessary dependencies.
I wrote this without even knowing what the guy is talking about.
https://openage.org/it/3d/

It’s possible to avoid using NPM, but it just means figuring
out extra things you will inevitably need to find your own solutions for.

The only thing I’ve had to figure out, is how to get rid of it.
I spent 3 days, un-npm-ing Threejs. That’s it for my intro to npm.
Maybe the brilliance will one day show itself.
I ain’t there yet.

15

It works for me without “un-npm-ing”
I don’t know what you need to do, to “un-npm” it.

1 Like
16

I mean the book, Learn Threejs, 4th edition. That just came out. Fine book. just the examples are npm-dependent.

17

I need to make the ocean in my world like this.

One day.

I think this is the best ocean graphic, on the web.

1 Like
18

If you’re doing web development what’s the problem with using npm? We use it for things constantly. It seems like such a non-issue, I’m genuinely curious what you don’t like about it?

19

the way he sets up the examples completely breaks everything regarding how I always do everything. I can’t run the examples without running a server. what… why.
When I run the examples, I don’t start an html like always, instead, it’s a direct js which sends a request to this dedicated server. What? Why?

I don’t program this way. I run an html file which runs the js.

And running a server on the localhost, which is not the backend but instead, some kind of a front end server. Why?

Now I constantly need to have this new server thing running.
For what reason exactly?

It’s almost like they are getting paid to be confusing.

And I can’t turn it into an ordinary file, without getting rid of the npm. Which means i have to back trace everything.

And the npm is constantly trying to add dependencies.

I can’t add dependencies. It is a road to nowhere.

It is also like this, within the code itself. You cant just increase the complexity.
Especially not with the argument, just-chase-the-crowd.

Nobody can, nothing can.

If we let the complexity go up like this we can just quit now.

We’re on a road to nowhere.

And that’s where web development is today.
Middle of nowhere.
The systems we are making are complete shit.

And if what he is presenting here is some better way of doing things. I will need to change all my systems this way. I’m not seeing that though.

I always do all systems the same way.
The best way.

I can’t be making one system one way and the next some other way.
I do them all the one and only best way.

20

have you had a look at option #2 for your use case here?
is there anything stopping you downloading the library and using the above mentioned option to run your development in the way you’re familiar wih?