2021・11・14

• By deault in Three.js, the camera perspective is “looking” directly down the z-axis = “up” and “down” is the y axis

  • “left” and “right” is the x axis
  • zoom “in” and “out” is the z axis

• It’s usually a good idea to try and normalise event positions to go from 1 - 0 to -0.5 to 0.5

• A mouse parallax effect can created easily by animating the position of a 3D object based on the position of the mouse. When combined with clamping of values above we can constrain the movement.

• often a parralax technique can feel “mechanical” . “lerping” is an effect that that make the move lag slight to make it feel smoother.

• The idea behind the formula is that, on each frame, instead of moving the camera straight to the target, we are going to move it (let’s say) a 10th closer to the destination. Then, on the next frame, another 10th closer. Then, on the next frame, another 10th closer.

    cameraGroup.position.x += (parallaxX - cameraGroup.position.x) * 0.1
    cameraGroup.position.y += (parallaxY - cameraGroup.position.y) * 0.1

• it’s probably a good idea to normalise animation in a tick function with the delta time. this will make things consistent on high frequency monitors…

e.g

/**
 * Animate
 */
const clock = new THREE.Clock();
let previousTime = 0;

const tick = () => {
  const elapsedTime = clock.getElapsedTime();
  const deltaTime = elapsedTime - previousTime;
  previousTime = elapsedTime;

  for (const mesh of sectionMeshes) {
    mesh.rotation.x += deltaTime * 0.1;
    mesh.rotation.y += deltaTime * 0.12;
  }

  // Animate camera
  camera.position.y = (-scrollY / sizes.height) * objectsDistance;

  const parallaxX = cursor.x;
  const parallaxY = cursor.y;

  cameraGroup.position.x +=
    (parallaxX - cameraGroup.position.x) * 5 * deltaTime;
  cameraGroup.position.y +=
    (parallaxY - cameraGroup.position.y) * 5 * deltaTime;

  // Render
  renderer.render(scene, camera);

  // Call tick again on the next frame
  window.requestAnimationFrame(tick);
};

tick();

• Fluid text can be achieved with vmin - https://css-tricks.com/simple-little-use-case-vmin/