Changing camera position using hover effect

Questions
1

Hello I am really sorry if this is a stupid question but I am trying to make my item bigger when hovering over it i thought this would be easy by just changing the camera position when hovering over the item. But I am really stuck and don’t know what I am doing wrong.

<script>
      //second ticket
      var scene2, camera2, renderer2, ticket2;
      var raycaster, mouse;
      var INTERSECTED;
      init2();
      animate2();

      function init2() {
        scene2 = new THREE.Scene();

        camera2 = new THREE.PerspectiveCamera(
          30,
          window.innerWidth / window.innerHeight,
          1,
          3000
        );
        camera2.lookAt(new THREE.Vector3(0, 0, 0));
        camera2.position.y = 10;
        camera2.position.z = 1700;

        raycaster = new THREE.Raycaster();
        mouse = new THREE.Vector2(1, 1);

        var pointLight = new THREE.PointLight(0xffffff, 2);
        pointLight.position.set(-10, 0, 1000);
        var lightHolder = new THREE.Group();
        lightHolder.add(pointLight);
        scene2.add(lightHolder);

        renderer2 = new THREE.WebGLRenderer({ alpha: true });
        renderer2.setClearColor(0xffffff, 0);
        renderer2.setSize(window.innerWidth, window.innerHeight);

        document.getElementById("ticket2").appendChild(renderer2.domElement);

        let loader = new THREE.GLTFLoader();
        loader.load("ticket2/scene.gltf", function(gltf) {
          ticket2 = gltf.scene.children[0];
          ticket2.rotation.z = 34.5;
          scene2.add(gltf.scene);
        });

        // when the mouse moves, call the given function
        document.addEventListener("mousemove", onDocumentMouseMove, false);
      }
      var angularSpeed = 0.2;
      var lastTime = 0;

      function animate2() {
        requestAnimationFrame(animate2);
        if (ticket2 != undefined) {
          ticket2.rotation.z += 0.03;
        }
        renderer2.render(scene2, camera2);
      }

      window.addEventListener("resize", () => {
        renderer2.setSize(window.innerWidth, window.innerHeight);
        camera2.aspect = window.innerWidth / window.innerHeight;

        camera2.updateProjectionMatrix();
      });

      function onDocumentMouseMove(event) {
        // the following line would stop any other event handler from firing
        // (such as the mouse's TrackballControls)
        event.preventDefault();

        // update the mouse variable
        mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
        mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
      }

      function render() {
        // update the picking ray with the camera and mouse position
        raycaster.setFromCamera(mouse, camera2);

        // calculate objects intersecting the picking ray
        var intersects = raycaster.intersectObjects(scene2.children);

        if (intersects.length > 0 && intersects[0].object === ticket2) {
          camera2.position.z = 1700;
        } else {
          camera2.position.z = 1500;
        }

        renderer.render(scene2, camera2);
      }
</script>
2

But what is the current behaviour, or the problem? It’s easy to tell just from the code.

If all you’d need is to make the object bigger, instead of changing the camera (which will not work if you put the camera at an angle) try using object.scale.set(10, 10, 10).

1 Like
3

Hi sorry but there is no current behaviour nothing is happening and now I am trying something different and it is giving me “Cannot read property ‘clientX’ of undefined” but thanks for the tip of the object scaling that works but not together with the raycasting.

  <script>
  var scene2, camera2, renderer2, ticket2;
  init2();
  animate2();
  mousemove();
  update();

  function init2() {
    scene2 = new THREE.Scene();

    camera2 = new THREE.PerspectiveCamera(
      30,
      window.innerWidth / window.innerHeight,
      1,
      3000
    );
    camera2.lookAt(new THREE.Vector3(0, 0, 0));
    camera2.position.y = 10;
    camera2.position.z = 1700;

    var pointLight = new THREE.PointLight(0xffffff, 2);
    pointLight.position.set(-10, 0, 1000);
    var lightHolder = new THREE.Group();
    lightHolder.add(pointLight);
    scene2.add(lightHolder);

    renderer2 = new THREE.WebGLRenderer({ alpha: true });
    renderer2.setClearColor(0xffffff, 0);
    renderer2.setSize(window.innerWidth, window.innerHeight);

    document.getElementById("ticket2").appendChild(renderer2.domElement);

    let loader = new THREE.GLTFLoader();
    loader.load("ticket2/scene.gltf", function(gltf) {
      ticket2 = gltf.scene.children[0];
      ticket2.rotation.z = 34.5;
      scene2.add(gltf.scene);
    });
  }

  var angularSpeed = 0.2;
  var lastTime = 0;

  function animate2() {
    requestAnimationFrame(animate2);
    if (ticket2 != undefined) {
      ticket2.rotation.z += 0.03;
      //ticket2.scale.set(2, 2, 2);
    }
    renderer2.render(scene2, camera2);
  }

  window.addEventListener("resize", () => {
    renderer2.setSize(window.innerWidth, window.innerHeight);
    camera2.aspect = window.innerWidth / window.innerHeight;

    camera2.updateProjectionMatrix();
  });

  var raycaster = new THREE.Raycaster();
  var mouse = new THREE.Vector2(1, 1);
  var intersects = [];

  function mousemove(event) {
    mouse.x = (event.clientX / player.width) * 2 - 1;
    mouse.y = -(event.clientY / player.height) * 2 + 1;
  }

  function update(event) {
    raycaster.setFromCamera(mouse, camera2);
    intersects = raycaster.intersectObject(ticket2);
    if (intersects.length !== 0) {
      let ticket2 = intersects[0].ticket2;
      ticket2.scale.set(2, 2, 2);
    }
  }
</script>