Three.js 시작하기 07 _마우스 클릭 이벤트 (좌표)

const x = (e.clientX / window.innerWidth) * 2 - 1;
const y = -((e.clientY / window.innerHeight) * 2 - 1);

 

Three.js는 WebGL을 기반으로 하는데, WebGL은 절대 좌표가 아닌 정규화된 좌표를 사용하여 화면을 그리기 때문에, 클릭 또는 마우스 이동과 같은 이벤트의 좌표를 위와 같이 정규화된 값으로 변환해야 한다.

 

const newPosition = new THREE.Vector3(0, 1, 0);
const rayCaster = new THREE.Raycaster();

renderer.domElement.addEventListener("pointerdown", (e) => {
  const x = (e.clientX / window.innerWidth) * 2 - 1;
  const y = -((e.clientY / window.innerHeight) * 2 - 1);

  rayCaster.setFromCamera(new THREE.Vector2(x, y), camera);
  const intersects = rayCaster.intersectObjects(scene.children);
  // console.log("intersects", intersects);

  const intersectFloor = intersects.find((i) => i.object.name === "FLOOR");
  console.log("intersectFloor", intersectFloor);
  newPosition.copy(intersectFloor.point);
  newPosition.y = 1;
});


const clock = new THREE.Clock();
const targetVector = new THREE.Vector3();

const render = () => {
  charactor.lookAt(newPosition);
  targetVector
    .subVectors(newPosition, charactor.position)
    .normalize()
    .multiplyScalar(0.01);

  if (
    Math.abs(charactor.position.x - newPosition.x) >= 1 ||
    Math.abs(charactor.position.z - newPosition.z) >= 1
  ) {
    charactor.position.x += targetVector.x;
    charactor.position.z += targetVector.z;
    action.stop();
  }
  action.play();
  renderer.render(scene, camera);
  requestAnimationFrame(render);
  orbitControls.update();
  if (mixer) {
    mixer.update(clock.getDelta());
  }
};

render();