mousemove, pointermove - EventListener

mouseMove

• 다루는 장치: 마우스
• 지원하는 브라우저: 모든 주요 브라우저에서 지원
• 이벤트 속성: clientX, clientY, pageX, pageY 등
• 용도: 대부분의 마우스 이동 동작을 추적하는 데 사용됩니다.

const mousePosition = new THREE.Vector2();
window.addEventListener('mousemove', (e)=>{
  mousePosition.x = (e.clientX / window.innerWidth) * 2 - 1;
  mousePosition.y = -(e.clientY / window.innerHeight) * 2 + 1 ;
})

pointermove

• 다루는 장치: 마우스, 터치, 스타일러스 펜 등 다양한 입력 장치
• 지원하는 브라우저: 최신 브라우저에서 지원 (IE11, Edge, Chrome, Firefox, 등)
• 이벤트 속성: clientX, clientY, pageX, pageY 외에도 pointerId, pointerType (예: "mouse", "touch", "pen"), pressure 등
• 용도: 다양한 입력 장치에서의 이동 동작을 추적하며, 터치스크린 디바이스와 스타일러스 펜 등의 지원이 필요할 때 유용합니다. pointermove 이벤트는 다중 입력 장치 지원이 필요한 현대 웹 애플리케이션에서 더 유연하게 사용할 수 있습니다

const raycaster = new THREE.Raycaster();
const pointer = new THREE.Vector2();

function onPointerMove( event ) {
	// calculate pointer position in normalized device coordinates
	// (-1 to +1) for both components
	pointer.x = ( event.clientX / window.innerWidth ) * 2 - 1;
	pointer.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
}

function render() {
	// update the picking ray with the camera and pointer position
	raycaster.setFromCamera( pointer, camera );
	// calculate objects intersecting the picking ray
	const intersects = raycaster.intersectObjects( scene.children );

	for ( let i = 0; i < intersects.length; i ++ ) {
		intersects[ i ].object.material.color.set( 0xff0000 );
	}
	renderer.render( scene, camera );
}

window.addEventListener( 'pointermove', onPointerMove );

window.requestAnimationFrame(render);