Three.js and three.module.js are different?

Questions
1

I noticed that three.js possibly doesn’t include /src/shaders/ and there’s no /js/nodes/ but /jsm/nodes/ exists.

I created index.html with three.js scene and it works fine:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Game</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="importmap">
{
"imports": {
"three": "./jsm/three.module.js",
"three-nodes/": "./jsm/nodes/"
}
}
</script>
</head>
<body>

<div class="game"></div>

<script src="js/three.js"></script>
<script src="js/loaders/GLTFLoader.js"></script>
<script src="js/game.js"></script>
<script src="js/my-shader.js" type="module"></script>
</body>
</html>

game.js contains something along the lines of:


const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();

renderer.setSize(window.innerWidth, window.innerHeight);

document.body.appendChild(renderer.domElement);

let geometry = new THREE.BoxGeometry(1, 1, 1);
let object3d = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial());

scene.add(object3d);

function animate(){
object3d.rotation.x += 0.01;
object3d.rotation.y += 0.01;
renderer.render(scene, camera);
requestAnimationFrame(animate);
};
animate();

In my-shader.js I wanted to only add a single node material and be able to apply it to the objects from the scene:


import * as THREE from '../jsm/three.module.js';
import * as Nodes from '../jsm/nodes/Nodes.js';
import { nodeFrame } from '../jsm/renderers/webgl/nodes/WebGLNodes.js';

window.Nodes = Nodes;
window.nodeFrame = nodeFrame;

let material = new Nodes.MeshStandardNodeMaterial();
object3d.material = material;

nodeFrame.update();

But it doesn’t work because three.js doesn’t have some shader chunk from /src/ folder, which three.module.js has:

error
error2351×257 16.2 KB

So, the question is: can I have both three.js and three.module.js in the same HTML document and only use jsm version to add a single node material?

My app is already pretty large so I’d like to avoid converting everything to modules if possible.

2

three.js and three.module.js is the same

3

They are most definitely not because three.js includes 0 instances of “iridescence_fragment” phrase and three.module.js does include such phrase.

And there is no /examples/js/nodes/ but /examples/jsm/nodes/ exists.

4

My bad: I just checked that the very newest three.js includes “iridescence_fragment” phrase. It must have been added in the past month and I didn’t update it yet.

Ok, I think my question may be solved then but I still need to check…

(Also, still not sure why /js/nodes/ doesn’t exist but /jsm/nodes/ does.)

5

it is benificial to convert your project into module, u will find module is fast and efficient in the long run espeicially when ur project is loading large gltf models. it is less difficult to migrate now than later when ur project is too large to migrate. in i experience, i end up rewritting the project into module.