[Capstone Project] THREE.js Raycaster를 이용하여 Object 검사하기

※ 해당 글은 capstone 종합설계 프로젝트를 하면서 적었던 일지를 돌아보며 작성한 것입니다.

개발일지 2022.10.03

https://codepen.io/slpkite108/pen/rNvvgjY?editors=1010 

raycaster

위 링크는 함께 프로젝트 했던 팀원의 사이트를 빌렸습니다^^

Raycaster()

const raycaster = new THREE.Raycaster()
const pointer = new THREE.Vector2()
pointer.x = pointer.y = -1
//#region Functions
function onPointerMove(event){
    pointer.x = (event.clientX/window.innerWidth)*2-1
    pointer.y = -(event.clientY/window.innerHeight)*2+1
}

animate(){
	raycaster.setFromCamera(pointer,camera)
  const intersects = raycaster.intersectObjects(scene.children)

	if(intersects.length>0){//see something
    if(interacted!=undefined){//it saw before
      if(interacted!=intersects[0]){//diff
        interacted.object.material.color.set(0xffffff)
        interacted = intersects[0]
        interacted.object.material.color.set(0xff0000)
        console.log(interacted)
      }
    }
    else{//it saw nothing before
      interacted = intersects[0]
      interacted.object.material.color.set(0xff0000)
      console.log(interacted)
    }
  }
  else{//it see nothing
    if(interacted!=undefined){
      interacted.object.material.color.set(0xffffff)
      interacted = undefined
    }
  }

	//...etc
}

Details

• intersect한 object는 <intersected_object>.object로 접근해야 한다. (<intersected_object>.geometry 처럼 사용불가⇒<intersected_object>.object.geometry)
• 반환값은 {distance, point, face, faceIndex, object, uv, uv2, instanceld} : object 이다.
• intersect상태의 object를 반환하는 function은 intersectObject와 intersectObjects가 있는데 둘의 차이점은 반환하는 object의 개수이다.(intersectObjects는 array로 반환)
• code에서 pointer는 마우스 포인터를 의미한다.
• resize기능이 없어 resize 시 pointer의 position에 error가 발생한다.(resize 추가)

window.addEventListener( 'resize', onWindowResize, false );

function onWindowResize(){

    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();

    renderer.setSize( window.innerWidth, window.innerHeight );

}