How to use Node Materials via modules?

Questions
1

Hi

I am trying to get my three.js application running via node / npm modules. My app is using Node Materials which is pretty straightforward to import via script tags – but how do I import Node Materials when using modules?? Any advice would be very much appreciated.

2

I guess I would create a small build via rollup that bundles all respective files into an UMD module so node.js and the browser can load it.

3

Just to clarify, most of three/examples/js are written as global exports, and are hard to use as ES modules but there are workarounds described in https://github.com/mrdoob/three.js/issues/9562. But Node Materials are an exception — they’re already ES modules. You should just be able to do:

import { NodeMaterial, ... } from 'three/examples/js/nodes/THREE.Nodes.js`;

Is that not working? Or are you unsure how to use ES modules in your build?

4

Thanks @donmccurdy - I am trying to do it as you say but I am getting an error:

ReferenceError: Can't find variable: THREE

even though I am including three.js module like this:

var THREE = require('three')
import './nodes/THREE.Nodes.js';
import './loaders/NodeMaterialLoader.js';

Maybe I am doing something wrong? I am a novice at using modules / node. But I can confirm that THREE imports successfully and runs when I simplify my sketch and take out all node material objects and references. So it seems to be the node material classes are throwing the ReferenceError.

EDIT:
I should mention that I am using webpack as a bundling tool.

5

I would try var THREE = window.THREE = require('three'); then. But I don’t know much about Webpack. Unfortunately things in examples/js often need some tweaks to use with a bundler, per #9562. I was hoping that NodeMaterial would not, since it uses ES modules, but I haven’t tested this with Webpack.

6

Just to give some context, I was only using webpack because it was recommended in the threejs guide. So now I have started over and am trying to get it working with rollup (which I also find confusing). But I am getting the same error:
import * as THREE from 'three';
import './nodes/THREE.Nodes.js';
returns
ReferenceError: Can't find variable: THREE
Again the error seems to be coming from THREE.Nodes.js file. Is there something I’m missing?
Thanks

7

I think THREE.Nodes likely expects the three.js core library to be available as a global… try saving window.THREE = THREE if webpack allows this, before trying to import THREE.Nodes. I’m not familiar with Webpack though, and unfortunately much of examples/js/* requires some workarounds to use with ES modules. I was hoping NodeMaterial would be an exception, since it’s written as ES Modules, but haven’t tried this myself.

8

Thanks @donmccurdy - yes I can confirm I’m still getting the errors even after adding window.THREE = THREE using webpack. If its helpful I am getting the lots of warnings about the objects being imported as ‘THREE’ - is this some confusion withe naming (THREE.Nodes.js)?

[Error] ReferenceError: Cant find variable: THREE
[Warning] ./nodes/THREE.Nodes.js 124:0-19 (bundle.js, line 5)
export 'AttributeNode' (imported as 'THREE') was not found in 'three'
[Warning] ./nodes/THREE.Nodes.js 124:0-19 (bundle.js, line 1)
export 'AttributeNode' (imported as 'THREE') was not found in 'three'
[Warning] ./nodes/THREE.Nodes.js 179:0-34 (bundle.js, line 1)
export 'BlinnExponentToRoughnessNode' (imported as 'THREE') was not found in 'three'
[Warning] ./nodes/THREE.Nodes.js 178:0-32 (bundle.js, line 1)
export 'BlinnShininessExponentNode' (imported as 'THREE') was not found in 'three'