How to make component horizontal to Cam
오늘 한 작업은 threlte의 html 태그가 카메라를 바라보도록(항상 화면과 수평하도록) 한 것이다.
생각보다 꽤 애를 먹기도 했고 배운 점도 많아 기록으로 남기고자 작성한다.
일단 단계는 이렇다.
- threlte의 html 태그는 lookat이라고 해서 특정 방향을 바라보도록 설정할 수 있다.
- 또한 orbitcamera는 마우스를 드래그해서 카메라의 위치를 변경할 수 있다.
- 따라서 마우스 이벤트 리스너를 통해 카메라의 위치를 실시간으로 받아오고 이를 lookat에 반영해야 한다.
문제는 threlte를 써보는 게 이번이 처음이었다는 것이다!
그래서 한 6시간 정도는 정말 삽질만 했다. 하지만 그 시간 나름대로 배운 점이 있어서 아깝지 않다.
그럼 이제 코드 얘기를 해보겠다. threlte doc을 뒤져보다가 mouse event listener를 정의할 수 있는 방법을 찾았다.
<script>
import { Mesh, ThreltePointerEvent } from '@threlte/core'
const onPointerMove = (e) => {
console.log(e.detail.event.clientX, e.detail.event.clientY)
}
</script>
<Mesh … interactive on:pointermove={onPointerMove}>click, contextmenu, pointerup, pointerdown, pointerenter, pointerleave, pointermove 등의 이벤트를 감지하고 넘겨줄 수 있는데 이때 필요한 것은 마우스 드래그를 감지하는 코드였으므로 on:pointermove를 사용했다.
다음 단계로 넘어가기 전에 선행되어야 하는 과제가 있다. 바로 카메라 위치를 넘겨줄 writable store를 생성하고, 이를 setContext를 통해 child component에 전달해주는 것이다. 해당 단계에서도 시간을 굉장히 많이 썼는데 그 이유는 setContext가 reactive하지 않음을 몰랐기 때문이다...
삽질을 하다가 문뜩 이 생각이 들어서 구글링을 해보았고 아니나 다를까 이게 문제였다.
링크텍스트(고마워요 Conduitry!)
이를 해결하기 위해서 이벤트 리스닝 함수를 사용한 것이다.
이후 이벤트 핸들링 함수를 정의하고, 해당 함수에서 카메라 포지션 값을 위에서 만든 store 변수에 넣어준다. 그러면 store는 reactive하기 때문에 실시간으로 값이 바뀐다!
이 과정에서도 배운 내용이 있는데(이미 알고 있긴 했지만, 확실히 기반을 다졌다는 표현이 맞겠다) Svelte에서 $(dollar sign)의 역할은 3가지가 있다. 첫번째로는 위에서 사용한 store에서 사용한다. store로 정의한 변수를 해당/다른 component에서 바꾸거나 접근하기 위해서는 변수 앞에 $을 붙여야 한다. 두번째는 reactive statement이다. $: 을 쓰고 뒤에 statement를 쓰면 statement 안에 있는 값이 변했을 때 해당 statement를 다시 실행시킨다. 마지막으로는 백틱을 사용할 때. dynamic한 값을 String 안에 사용하기 위해서는 "" 대신 백틱을 사용하고 안에 $과 {}를 이용해 변수를 감싸줘야 한다.
마지막으로 parent component에서 전달해준 카메라 포지션을 reactive statement로 감싼 statement에서 html lookat에 들어가는 변수에 집어넣어주면 끝이다!!
NO SBL KEEP GOING
