inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

Three.js로 시작하는 3D 인터랙티브 웹

STUDIOMEAL WORLD에서는...

224

인하늘

작성한 질문수 1

1

안녕하세요!!

강의를 열심히 듣다가 갑자기 질문이 생겼습니다.

그리고 Pointerlook을 사용한 상태에서 클릭은 어떻게 하나요??ㅜㅜ 포인터도 사라져서 

클릭을 어떻게 하는지요! 에러가 뜨는데요! pointerlock상태에서는 클릭이 안되는거 같아용...

Studiomeal world에서 가운데에 FPS게임처럼 점 포인터?! 그런것두...혹시...! 어떻게 하나요?

강의 영상에서는 마인크래프트 스타일 컨트롤에서만 Pointerlook을 사용하시던데용!

인터랙티브-웹 blender Three.js

답변 1

2

1분코딩

Raycaster 섹션 진도를 나가셨는지 모르겠는데.. pointerlock 상태에서는 마우스를 움직이는게 아니기 때문에, 클릭했을 때 화면 중앙으로 Raycaster로 광선을 쏘아서 처리해주면 된답니다. 그렇게 하면 화면 중앙에 있는 메쉬를 클릭한 효과가 발생하겠지요?
즉, 아래와 같이 해주면 카메라로부터 화면 중앙으로 광선을 쏘기 때문에 화면 가운데 위치한 메쉬를 체크할 수 있습니다.
raycaster.setFromCamera(new Vector2(), camera);

화면 중앙의 + 표시는 무조건 화면 가운데부분을 클릭한다는걸 식별하기 쉽게 장식을 붙여준건데요, 그냥 html div와 css로 화면 가운데에 띄워준 것으로, three.js랑은 직접 관련은 없답니다. + 모양 div 엘리먼트의 css의 display 속성값을 조정해서 보였다 안보였다 처리를 해준건데요,
lock 이벤트 발생 시에는 보여야 하니 display: block;
unlock 이벤트 발생 시에는 안보여야 하니 display: none;
이런 식으로 하면 되겠지요~

리액트/next.js와 같이 사용하는 강의 계획은 없으신가요?

0

81

1

소스코드 파일이 강의랑 같나요?

0

118

2

materials 배열에 있는 top, bottom ... 들에 대해서

0

118

0

gltf 포맷 사용

0

243

1

점프 애니메이션 stop

0

127

2

사양에 따른 다른 결과

0

112

1

중복 질문 삭제

0

160

1

혹시 이 빛의 범위를 조절할 수 있는 방법이 있나요?

0

124

1

gltf.scene.children 이 없는데도 모델이 화면에 떠요

0

101

2

GLF파일 export한 후에 three.js에서 렌더링 된 모델에는 텍스처 적용이 안되어있습니다..!

0

160

1

일반 유리, 강화 유리 강의에서 Glass 객체의 position X를 -1, 1로 설정한 이유를 모르겠어요

0

77

0

그림자가 다르게 표현됩니다

0

138

1

setAnimationLoop 위치가...

0

99

1

얼굴 그릴 때 붓이 깔끔하게 칠해지지 않고 얼룩덜룩해요

0

135

1

블렌더 texture paint 시 미러모드

0

164

0

DragControls의 인자값을 바꾸지 않았는데 에러가 안떠요!

0

104

1

blender 에서 색칠하기 편 Texter paint slot추가없음

0

966

2

fin 버전도 그냥 실행이 안돼요

0

289

2

자바스크립트 실행이 안되는 것 같아요

0

379

1

모니터 해상도에 따라 mesh의 크기가 변할 수 있나요?

0

238

1

live server와 localhost:8080

0

345

1

material에 canvas 를 texture 로 넣는방법이 궁금해요

0

270

1

모바일 조이스틱은 어떻게 만들 수 있을까요?

0

208

1

징검다리 예제에서 SpotLight가 동작 오류

0

302

2