ThreeJs | Vertex

Change class name on click in jQuery

by Noturnoo

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>

CSS

body {
  background: #20262E;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

Babel + JSX

console.clear()
let $tex = [];
class Canvas {
	
	constructor(){
		
    this.images = [
      "https://raw.githubusercontent.com/Efetivos/gallery/master/nicole/slider-nicole01.jpg"
    ];
		this.lengthImgs = this.images.length
		this.counter = 0
    this.loader =  new THREE.TextureLoader();
    this.camera = new THREE.PerspectiveCamera( 20, window.innerWidth / window.innerHeight, 1, 500 );
    this.scene = new THREE.Scene();
    this.renderer = null;
    this.material = null;
    this.geometry = null;
		this.environment = {
			width: 0,
			height: 0
		}
    this.createRenderer();
    this.createScene();
    this.createImage();
		
		
	}
	
	
	//________ INIT THREE APP
	createRenderer() {
    this.renderer = new THREE.WebGLRenderer({
			alpha: true,
      antialias: true
    });
    this.renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(this.renderer.domElement);
		window.addEventListener("resize", this.onResize.bind(this));
	}
	
	
	createScene() {
		this.camera.position.z = 3;
    const fov = THREE.Math.degToRad(this.camera.fov);
    this.environment.height = 2 * Math.tan(fov / 2) * this.camera.position.z;
    this.environment.width = this.environment.height * this.camera.aspect;
	}
	
	createImage(){
		let that = this
		this.images.forEach(function($el, index){
			that.createTexture($el, index)
		})
		
	}
	createTexture($img, index){
    this.loader.load($img, texture => {
      texture.generateMipmaps = false;
      texture.minFilter = THREE.LinearFilter;
      texture.needsUpdate = true;
      this.texture = texture;
			this.createMesh(this.texture, index);
    });
		
	}
	createMesh(texture, index) {
		this.counter++
		this.geometry = new THREE.PlaneBufferGeometry(this.environment.width * 0.5, this.environment.height * 0.5, 100, 50);
    // ___________ meshing geometry and add color
    this.material = new THREE.ShaderMaterial({
      uniforms: {
        image: {
          value: texture
        },
        imageResolution: {
  ...