Looking for a basic example for build tool module for example files in say rollup

Questions
,
1

I am looking for the simplest of examples in how to build a Module from the examples directory
In my case I would like to build the new Nodes Material system. I test building the file in rollup simply with
rollup examples/jsm/nodes/Nodes.js --file Znodes.js --format iife

It worked! but it did not, the file is huge and scrubbing through it shows me that it imported all of THREE core, oh well ill try it out anyway

So I did the basic import in my html file
script type=“module”
import * as Nodes from ‘./Znodes.js’;
/script

and tested a debugger, the Nodes object is not the proper object im expecting
its console reads this “Module {Symbol(Symbol.toStringTag): “Module”}”
and does not have any constructors like Nodes.PhongNodeMaterial

I saw some posts from 2017 here but the github pages are 404

I also saw that some of the node files have hard links to THREE like so
import { MathUtils } from ‘…/…/…/…/build/three.module.js’;

I assume its just dumping the whole of three for that reason

In my case I simply would like to build a single lib file for each specific lib so I can keep building little example projects in Glitch.me instead of punting the full project files to a webhost server

2

I don’t recommend building bundles for each of your dependencies: it’s a fair bit of work to ensure everything uses the right global names, and build tools are generally not designed or documented for this type of use. You’ll need to manually modify many of three.js’s source files yourself to use it this way.

Instead, try starting with an example like https://glitch.com/edit/#!/hello-webpack or https://glitch.com/edit/#!/parcel-starter, import from three/examples/jsm/..., and the bundler will load everything it needs correctly.

3

Thank you.
The examples are fine i guess, its counter to how the example projects are setup and those glitch examples are pretty bloated, and for every example I have to find this starter again. I miss just loading a file pre modules rewrite.

I see that things are complicated in github discussion https://github.com/mrdoob/three.js/issues/17482

Can I ask then can I get a simple example rollup config that will bundle the THREE lib and all necessary external libs? Or is that also kinda not a thing?

edit: this was the missing config I referenced Rollup build setup to import glsl files and three.js examples

4

The examples on the website avoid using any build system at all. If you want to do something like that, I would look at the “CDN or static hosting” documentation here: https://threejs.org/docs/index.html#manual/en/introduction/Installation.

Rollup is typically used for building libraries like three.js itself, not for building web applications. You can use it, but Webpack or Parcel are likely to be easier.

5

I like having both options. But since I can not simply have individual single file libs any more I’ll settle for a single build phase for a mammoth lib file. Really I just expected to read something akin to my ask in the wiki or reasons why not since I dont know why not beyond its not to trend anymore.

I see from that newer link that I can use the cdn now https://unpkg.com/three@0.120.0/examples/jsm/nodes/Nodes.js

a few months ago I could only find very old cdn builds of three and no examples. I would still like to bundle at some point for a production app, but I keep looking for examples I can cobble together

1 Like
6

It’s best to use CDNs that update automatically from npm, like unpkg or jsdelivr. With some others the three.js team does not control what they host or when they update it.

7

Weeeee its now as simple as swapping out the urls of libs and textures
https://treasure-ringed-barracuda.glitch.me/
thank you

1 Like
8

Aaaaaaand were back to needing this. Im trying to use 8thwall AR web and their editor tool only seems to allow local host files. Just leaving this note, i’ll need to actually figure out bundling the files minus the THREE lib, since they provide that via their meta tags