InteractiveCube.js

import { randomIntFromInterval } from './utils.js';

class InteractiveCube {
	// data is a an object with {type: 'thing1', info: 'some info'}
	constructor(data, app, position) {
		this.app = app;
		this.rotateFactor = randomIntFromInterval(1, 5);
		this.data = data;
		this.type = data.type;

		this.materialArray = [];
		
		const geometry = new THREE.BoxGeometry(.5, .5, .5);
		this.cube = new THREE.Mesh(geometry, this.materialArray);
		this.setMaterial('default-stroke');
		
		this.cube.position.x = position.x;
		this.cube.position.y = position.y;
		this.cube.position.z = position.z;

		app.scene.add(this.cube);
		
		let that = this;

		document.addEventListener('click', () => {
			// check if it is intersecting this cube. 
			const intersects = this.app.raycaster.intersectObject(that.cube);
			if (intersects.length) { 
				const cubeDataString = `Place: ${that.data.label}, Lat: ${that.data.lat}, Lng: ${that.data.lon}, Cube Type: ${that.data.type}`;
				alert(cubeDataString);
				console.log(that.data);
			}
		});
	
	}

	setMaterial(faceType) {
		let face = `./assets/images/cubes/blue/${faceType}.png`;
		if (!this.materialArray.length) { 
			let materialArray = []
			let texture_ft = new THREE.TextureLoader().load(face);
			let texture_bk = new THREE.TextureLoader().load(face);
			let texture_up = new THREE.TextureLoader().load(face);
			let texture_dn = new THREE.TextureLoader().load(face);
			let texture_rt = new THREE.TextureLoader().load(face);
			let texture_lf = new THREE.TextureLoader().load(face);
			
			materialArray.push(new THREE.MeshPhongMaterial( { map: texture_ft, side: THREE.FrontSide }));
			materialArray.push(new THREE.MeshPhongMaterial( { map: texture_bk, side: THREE.FrontSide }));
			materialArray.push(new THREE.MeshPhongMaterial( { map: texture_up, side: THREE.FrontSide }));
			materialArray.push(new THREE.MeshPhongMaterial( { map: texture_dn, side: THREE.FrontSide }));
			materialArray.push(new THREE.MeshPhongMaterial({ map: texture_lf, side: THREE.FrontSide }));
			materialArray.push(new THREE.MeshPhongMaterial({ map: texture_rt, side: THREE.FrontSide }));
			this.materialArray = materialArray;
			this.cube.material = this.materialArray;
		}

		if (this.materialArray.length && this.cube.material[0].map.image.attributes.src.nodeValue !== face) {
			let materialArray = []
			let texture_ft = new THREE.TextureLoader().load(face);
			let texture_bk = new THREE.TextureLoader().load(face);
			let texture_up = new THREE.TextureLoader().load(face);
			let texture_dn = new THREE.TextureLoader().load(face);
			let texture_rt = new THREE.TextureLoader().load(face);
			let texture_lf = new THREE.TextureLoader().load(face);
			
			materialArray.push(new THREE.MeshPhongMaterial( { map: texture_ft, side: THREE.FrontSide}));
			materialArray.push(new THREE.MeshPhongMaterial( { map: texture_bk, side: THREE.FrontSide }));
			materialArray.push(new THREE.MeshPhongMaterial( { map: texture_up, side: THREE.FrontSide }));
			materialArray.push(new THREE.MeshPhongMaterial( { map: texture_dn, side: THREE.FrontSide }));
			materialArray.push(new THREE.MeshPhongMaterial({ map: texture_lf, side: THREE.FrontSide }));
			materialArray.push(new THREE.MeshPhongMaterial({ map: texture_rt, side: THREE.FrontSide }));
			this.materialArray = materialArray;
			this.cube.material = this.materialArray;
			
		}
	}



	getData() { 
		return this.data;
	}

	// to be used in the animation loop. 
	update() {
		// ask for mouse position 
		// determine if mous position collides with this cube.
		this.cube.rotation.x += this.rotateFactor*.01; 
		this.cube.rotation.z += this.rotateFactor*.01;
		// get pointer position 
		// check if intersects with cube
		// do something in that event 
		
		// set up ray casting with scale. 
		const intersects = this.app.raycaster.intersectObject(this.cube);
		if (intersects.length) {
			this.cube.scale.x = .3;
			this.cube.scale.y = .3;
      this.cube.scale.z = .3;
			this.app.earth.paused = true;
			this.setMaterial('selected-stroke');
		} else {
			// this.app.controls.autoRotate = false;
			this.cube.scale.x = .2;
			this.cube.scale.y = .2;
			this.cube.scale.z = .2;
			this.setMaterial('default-stroke');
		}
	}
}

export default InteractiveCube;