Learn threejs, fourth edition. Run code samples without Git or Npm

Questions
1

I bought the book, learn threejs, 4th edition.

Then I waded through the book, fun stuff.

Now I need to get the examples going to start really playing with the code.

So there is this website for that.

What I just do not understand. Is, how do I get the chapter code examples going?

It doesn’t say in the book. It just has a reference to that github.

There is a source/samples/chapters directory.

And within that there is something that looks like the chapter examples.

But how do I run them?

Shouldn’t there just be some example that I can just fill into?

Or better still. Shouldn’t there just be files I can click and see the given example?

There is a template.html file there. But it’s just empty and it’s not clear to me, how to fill it out to start running the examples.

How do I run the examples from the chapter?

Extra note is that I use neither git nor npm locally. And would really like to keep it that way.

2 
git clone https://github.com/PacktPublishing/Learn-Three.js-Fourth-edition learn_three
cd learn_three/source
npm install
npm run build
npm run serve
3

without git and npm.

4

not possible.

5

I’m not sure I believe that.
I can run this,

https://openage.org/it/3d/

locally, and without them.

Buttons are wasdeq, 1,2 and z for mouse.

6

you can try. i wouldn’t know where to start. this is a fairly standard project, like any other it has a package.json that lists the dependencies and uses a bundler, webpack in this case.

today everything is fetched from npm. npm (node package manager) does not work without node.

7

There is no need for npm nor git. It’s an artificial requirement.

It’s just that they don’t bother to state how to get it running without them.

Guess I have to just, brute force figure it out myself.

Which is weird for the files are just there.
I thought I had bought the examples.

8

i can only repeat myself, npm is a requirement.

  "dependencies": {
    "@dimforge/rapier3d": "^0.9.0",
    "copy-webpack-plugin": "^10.2.2",
    "html-webpack-plugin": "^5.5.0",
    "lil-gui": "^0.16.0",
    "mandelbrot-canvas": "^0.0.2",
    "perlin": "^1.0.0",
    "three": "^0.142.0",
    "three-custom-shader-material": "^3.3.6",
    "troika-three-text": "^0.46.4",
    "tween.js": "^16.6.0",
  },

these are all the dependencies that are being used. maybe one or two might be umd or esm, you could copy them and go through a lot of pain and tooling (python, http servers, import maps, shims) and tell yourself that you’re doing it “manually”. but for the rest you need a bundler because they use common-js and require. even if all were pure esm, each dep has sub dependencies, the import map you’d have to make would get too complex to write by hand.

it’s either give up now, or install node. :man_shrugging:

9

I’ve got nodejs. When I run js on the backend. But not npm or git.

10

then i’m afraid i can’t help.

11

The code samples from the book are now mostly working, without git or npm.
I’m ignoring the last 3 chapters for now.

https://openage.org/it/samples/learn3js/index.html

12

this was so much easier before when they had a global THREE object, but these days it’s like doctor cmda says, you either use the tools and get this done in 30 minutes, or you don’t and then suffer for 3+ days

1 Like
13

Yeah, but I’m hoping that this is something I only need to do once, as I now have the solutions and know much better how those things work etc. But who knows, maybe more dependencies are heading our way in the future.

This should have been provided with the book’s code.