I tried implementing a function in Three.js to create a sphere and wanted to add an event listener to log the value of textureToShow when it's clicked. However, when I tested it, nothing showed up in the console. Below is the code I used:
function createSphereImage(imageLocation) {
var textureToShow = 0;
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
var geometry = new THREE.SphereGeometry(500, 60, 40);
geometry.scale( - 1, 1, 1);
var textureLoader = new THREE.TextureLoader();
var texture = textureLoader.load(imageLocation[textureToShow]);
var material = new THREE.MeshBasicMaterial({
map: texture,
side: THREE.DoubleSide
});
var mesh = new THREE.Mesh(geometry, material);
raycaster.setFromCamera( mouse, camera );
window.addEventListener('click', imageIndexChanger, false);
scene.add(mesh)
function imageIndexChanger(event) {
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
raycaster.setFromCamera(mouse, camera);
var intersects = raycaster.intersectObjects(mesh);
console.log(textureToShow)
}
}
Can someone help me figure out where I made a mistake?