Three.js

씬의 구성 요소 공식문서 왈 >three.js로 무언가를 표현하려면 scene, camera 그리고 renderer가 필요합니다. 이를 통해 카메라로 장면을 구현할 수 있습니다. 씬에는 3d object(mesh+geo) , light, camera 가 필요함 카

앞서 우리는 기본 요소 강의에서 일일이 canvas, renderer, light 등을 생성하는 코드를 적고 진행했다. 하지만 어차피 쓸 친구들이라면, 기본 템플릿으로 가져가면 되는 것 아닌가?

여태까지는 set.position.y=1set.position.z=1등으로 직접 일일이 속성 값을 저장했다.하지만 한 줄만에 바꾸고 싶다면? set을 이용하면 된다.(마치 python의 map처럼...)position.length(), position.distance

우리는 계속 카메라 좌표를 고정시켜놨다.(물론 GUI를 통해 후시적으로 조종할 수 있지만...)하지만 좀 더 직관적으로 마우스로 회전,확대를 할 수는 없을까?물론 있다! 물론 외부 모듈을 사용해야한다.해당 예제에서는 OrbitControls를 이용하여 이 기능을 구현한

OrbitControls 이전 글에서 배웠다. 마우스로 회전 줌/아웃이 가능한 컨트롤이다. > 움직임을 매끄럽게 하고 싶다면? control.enableDamping=true;로 설정해줘야함. 또한, 이후 draw함수에서 controls.update(); 를 써줘야한

glTF glTF란 3차원 장면과 모델을 표현하는 파일 포맷으로 JSON 표준에 기반하고 있다. 이를 바이너리 형식으로 표현한 것을 glb라고 한다. 무료로 glTF를 다운받아보자. 주로 구글에 free glTF download를 치면 무언가가 나온다. glb의 경우

레이캐스터라는 시각적으로 보이지 않는 광선을 이용해 광선을 지나오는 메쉬들의 정보를 가져올 수 있다. 또한, 정보를 가져오는 것 뿐만이 아니라 메쉬들의 정보도 바꿀 수 있다.위와 같이 Raycaster 메서드를 호출한다.레이캐스터는 비가시적이므로, 레이캐스터와 같은 방

캡스톤을 진행하다가(물론 지금은 Unity로 작업 엔진을 바꾸었으나...)현재 캐릭터의 위치에서 특정 건물까지의 경로를 표시해주는 기능이 필요했다.그러다 발견한 것이 three-pathfinding 모듈!youtube0pCpRvoOTBs해당 영상에서는 raycast를