Use as a threejs module

[Mathias Latournerie]

Hello!

Thank you so much for this plugin, this is exactly was I was looking for!

I have just one issue due to my lack of skill with es2015 modules.
I use the module version of threejs (three.module.js) and I don't understand how to use your code with it, or how to convert your plugin to a module.

Do you have some pointers to help me, please?

[Faraz Shaikh]

Just download the file and include it in your HTML like you do three.module.js make sure to include it after ThreeJS

Assuming your downloaded libraries is in the folder lib...

<script src="lib/three.module.js"></script>
<script src="lib/ExtendMaterial.js"></script>

then you can use it like the example describes

THREE.extendMaterial(THREE.MeshPhongMaterial, {...})

[Mathias Latournerie]

Hey! Thanks for the help!
My issue is that ThreeJS isn't loaded in a script tag, and unfortunately I do not have control over this in the environment I'm working with.

It is loaded inline with

import * as THREE from '../build/three.module.js';

If I add the script as a simple js file, THREE isn't defined.
If I add an import THREE at the top of the file and load the file as a module in a script tag, I have other errors like

ExtendMaterial.js:461 Uncaught TypeError: Cannot add property CustomMaterial, object is not extensible

or

ExtendMaterial.js:103 Uncaught (in promise) ReferenceError: Cannot access 'mapList' before initialization

(Please note the line numbers aren't exact because I added the THREE import)

I'm not sure how to proceed from there. I guess I would need to convert the file as an ES6 module. I don't know how tho, at least yet.

[Fyrestar]

I'm making an adapted version for all plugins next days to use with ES6 syntax,, generally you just need to export the extendMaterial function, as ES5 plugin it is adding itself to THREE, which isn't allowed with three.module.js.

However the newest versions of THREE fully use ES6 classes now so, i will add an adaption to this as well.

[Faraz Shaikh]

@Fyrestar what was wrong with my comment? It could’ve helped others until you released an ES modules version.

[Fyrestar]

I've adapted it so you can import the functions you need from ExtendMaterial.module.js such as extendMaterial, patchShader or CustomMaterial, make sure to adapt the three.module.js import path to yours. If you have any further problems let me know.

import { extendMaterial, CustomMaterial } from "./ExtendMaterial.module.js";

I might change it internally further only declaring what is used but since it needs to patch existing classes which differ in THREE releases this is easier to maintain.

The regular ExtendMaterial.js file also has the fix to work with both old and new class syntax which also fixed the Demo that uses the latest release of THREE.

[Mathias Latournerie]

Thank you!! That's perfect!

I'm not sure what happened with Farazz but thank you too for helping me nonetheless.