How to import module

[yucel-aydin]

Hi,
I am using threejs as module.

`
import * as THREE from '../lib/three.module.min.js';
import { DeviceOrientationControls } from '../lib/DeviceOrientationControls.min.js';
import { OrbitControls } from '../lib/OrbitControls.min.js';

`

How can I add js files as modules?
ex: import { Hologram} from '../lib/Hologram.js';

[stiegosaurus]

Hey bud,

Was actually trying to work with this extension currently and I hit the same wall as you. The short answer is the existing script is legacy script and not a module - but you can create your own Class and import it that way.

1. Create a file called ChromaKeyMaterial.js ( https://pastebin.com/1MDf14Ue )

// START OF CLASS
import * as THREE from 'three';

class ChromaKeyMaterial extends THREE.ShaderMaterial {

constructor(url, keyColor) {

const video = document.createElement('video');
video.src = url;
video.load();

const videoTexture = new THREE.VideoTexture(video);
videoTexture.minFilter = THREE.LinearFilter;
videoTexture.magFilter = THREE.LinearFilter;

super({
  uniforms: {
    videoTexture: { value: videoTexture },
    color: { value: new THREE.Color(keyColor) },
  },
  vertexShader: /* glsl */ `
    out vec2 vUv;
    void main() {
      vUv = uv;
      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1);
    }
  `,
  fragmentShader: /* glsl */ `
    uniform sampler2D videoTexture;
    uniform vec3 color;
    in vec2 vUv;
    void main() {
      gl_FragColor.rgb = texture(videoTexture, vUv).rgb;
      gl_FragColor.a = (length(gl_FragColor.rgb - color) - 0.5) * 7.0;
    }
  `,
  transparent: true,	  

})


////////////////////////////////////////////////////////////////////////
// AFTER SUPER CALL, DECLARE FUNCTIONS HERE
	

this.startVideo = function() {	
	video.play();
}

this.stopVideo = function() {	
	video.pause();
	video.src = "";
}

this.update = function() {		
	if (video.readyState === video.HAVE_ENOUGH_DATA) {
		// videoImageContext.drawImage(video, 0, 0);
		if (videoTexture) {
			videoTexture.needsUpdate = true;
		}
	}
};		

}
}

export { ChromaKeyMaterial };

// END OF CLASS

2. Import it into your Three.JS code using

import { ChromaKeyMaterial } from './path/to/your/ChromaKeyMaterial.js';

3. Create objects

var greenScreenMaterial = new ChromaKeyMaterial("./path/to/your/greenvideo.mp4", 0x00ff00 ); var myGeometry = new THREE.PlaneBufferGeometry( 5, 5); var greenScreenVideo = new THREE.Mesh( myGeometry, greenScreenMaterial );

4. Now you can start your video using greenScreenMaterial.startVideo(); and update your videoTexture in your render update using greenScreenMaterial.update();

Hope that helps!