1

I have a function that generates a sphere using Three.js and wants to add an event listener so it'll log textureToShow value when I clicked it. When I tested it nothing logged to my console. Here's my code

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)
    }
}

Where did I go wrong?

Why Would You
  • 297
  • 2
  • 9

1 Answers1

1

console.log(imageIndexChanger) isn't going to show you anything worth your time because you're asking to log the same function you're already in. I think what you're looking for is to log the results of the raycast. So you need :

console.log(intersects);

M -
  • 26,908
  • 11
  • 49
  • 81
  • I've changed it to `console.log(intersects);` or a random string but still nothing appears on my console. – Why Would You May 18 '21 at 18:20
  • If nothing shows on your console, then it must be a setting on your browser dev tools. I don't know what browser you're using, but [maybe something like this](https://stackoverflow.com/a/37403547/2608515) – M - May 18 '21 at 21:10