inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

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

랜덤 위치에 공 생성하기

모델링 요소 클릭하면 이미지가 뜨게 하는 법

287

김조은

작성한 질문수 2

0

안녕하세요! :). 강의 너무 잘 듣고 있습니다!! ✨✨✨

강의 들으며 이것저것 만들어보고 있었는데 간단하게 구현하고 싶은 게 있어서 질문 드립니다!

저런식으로 배열 만들어서 랜덤한 위치에 사람모델링을 배치하는 방식으로 화면 구성을 하고 있었는데,

웹 화면에서 사람 하나하나를 클릭하면, 특정 이미지가 화면에 뜨게끔 하려면 어떻게 코드를 써야 할까요,,,??..(아래 사진처럼 구현하고 싶습니다!)

사람 모델링 각각을 클릭할 때마다 다른 이미지가 화면에 뜨도록 하고 싶어서

players[0] .addEventListener('click', () => {}

players[1] .addEventListener('click', () => {}

이런식으로 하나하나 작성하면 될까요?..?

css js를 얕게만 공부해가지구 저기 함수 안에? 뭐라고 써야 이미지가 뜨는지 모르겠어서,,질문 드립니다!!

 

+앗 현재 컨트롤러는 아래과 같이 설정되어 있습니다!뭔가 Lock때문에 사람 모델링 하나하나 클릭하는 게 어려울 것 같기도 하네요,,

 

인터랙티브-웹 blender Three.js

답변 1

1

1분코딩

players[0], players[1] 들은 일반 html 엘리먼트가 아니라 그냥 three.js에서 만든 오브젝트일 뿐이기 때문에, 따로 addEventListener 등의 메소드는 사용할 수 없습니다^^
three.js에서 클릭 처리는 Raycaster를 이용하셔야 해요. Raycaster 섹션에서 "클릭한 메쉬 감지하기" 강의를 참고해 보세요!

CDN으로 수업을 들을경우

0

18

1

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

0

98

1

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

0

139

2

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

0

131

0

gltf 포맷 사용

0

262

1

점프 애니메이션 stop

0

143

2

사양에 따른 다른 결과

0

119

1

중복 질문 삭제

0

167

1

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

0

129

1

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

0

118

2

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

0

181

1

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

0

85

0

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

0

155

1

setAnimationLoop 위치가...

0

111

1

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

0

150

1

블렌더 texture paint 시 미러모드

0

172

0

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

0

110

1

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

0

1025

2

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

0

304

2

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

0

408

1

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

0

247

1

live server와 localhost:8080

0

361

1

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

0

280

1

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

0

219

1