원형 배치 + 웹에 올리기

첫 번째 · 카메라

원의 비스듬히 앞쪽에서 복습

상수 카메라 = 새 삼차원.원근카메라(75, 창.너비 / 창.높이, 0.1, 1000)
카메라.위치.설정(12, 0, 12)   // 옆으로 12 · 앞으로 12 → 45도 방향
카메라.바라보기(0, 0, 0)

2주차는 정면(0, 0, 12)이었죠. 이번엔 원형 책장이라 비스듬히 봐야 여러 권이 함께 보입니다. 옆으로 12, 앞으로 12 — 정확히 45도 방향이에요.

두 번째 · 그룹

책을 담는 상자, 그룹 복습

상수 그룹 = 장면.그룹만들기()   // 그룹을 만들어 장면에 바로 붙인다

2주차에서 책을 담아 두는 상자로 썼던 그 그룹입니다. 이번 주의 새 쓰임새는 하나 — 상자 하나만 돌리면 안에 든 책 15권이 통째로 돕니다. 2주차에는 책을 하나씩 움직였지만, 이제 그룹 한 줄이면 돼요.

그래서 책은 장면이 아니라 그룹에 넣습니다 — 장면.추가(책)이 아니라 그룹.추가(책).

세 번째 · 원형 배치 (새로 배우는 것)

코사인·사인으로 원 위에 세우기

상수 로더 = 새 삼차원.텍스처로더()
상수 종이 = 새 삼차원.표준재질({ 색: '아이보리' })

상수 책수 = 15
상수 반지름 = 8        // 원의 크기 — 키우면 책장이 넓어진다

준비물은 2주차와 거의 같아요. 새로 생긴 건 반지름 — 원의 크기 — 하나뿐입니다.

반복 (변수 i = 0; i < 책수; i++) {
  상수 번호 = i + 1
  상수 표지 = 로더.불러오기('books/cover-' + 번호 + '.png')
  표지.색공간 = 삼차원.SRGB색공간
  상수 책등 = 로더.불러오기('books/spine-' + 번호 + '.png')
  책등.색공간 = 삼차원.SRGB색공간
  상수 뒷면 = 로더.불러오기('books/backcover-' + 번호 + '.png')
  뒷면.색공간 = 삼차원.SRGB색공간

  상수 책 = 새 삼차원.도형(
    새 삼차원.상자모양(2.1, 2.9, 0.2),
    [
      종이,
      새 삼차원.표준재질({ 텍스처: 책등 }),
      종이,
      종이,
      새 삼차원.표준재질({ 텍스처: 표지 }),
      새 삼차원.표준재질({ 텍스처: 뒷면 }),
    ]
  )

  // 여기가 이번 주의 핵심 — 세 줄
  상수 각도 = (i / 책수) * 수학.파이 * 2
  상수 x = 수학.코사인(각도) * 반지름   // 코사인 = 가로 자리
  상수 z = 수학.사인(각도) * 반지름     // 사인 = 깊이 자리

  책.위치.설정(x, 0, z)
  책.바라보기(x * 2, 0, z * 2)
  그룹.추가(책)                  // 장면이 아니라 그룹에 넣는다
}

반복문 안은 2주차에서 쓴 코드 그대로예요 — 표지·책등·뒷면 세 장을 불러와 여섯 면에 붙입니다. 달라지는 건 자리를 정하는 세 줄뿐 — 한 바퀴(수학.파이 × 2 = 360도)를 책 수로 나눠 각자의 각도를 정하고, 코사인이 가로(x), 사인이 깊이(z) 자리를 만들어 줍니다.

2주차: 책.위치.설정(i * 간격, 0, 0) — 한 줄. 3주차: 책.위치.설정(x, 0, z) — 원. 바뀐 건 x·z를 어떻게 구하느냐일 뿐이에요.

책.바라보기(x*2, 0, z*2) — 자기 자리보다 두 배 먼 바깥을 보게 하면 표지가 원 바깥을 향합니다.

파이? — 반지름으로 원 둘레를 재면

  반 바퀴 = 반지름 3.14…개    ← 이 3.14…의 이름이 파이(π)
  한 바퀴 = 반지름 6.28…개 = 파이 × 2

코딩 사전엔 '한 바퀴'라는 단어가 없어요 — 반 바퀴(파이)를 두 개 붙여 조립합니다. 그게 × 2.

이 숫자의 단위 이름은 라디안 — 코드가 쓰는 각도 단위예요. 반지름 1인 원에서 걸어간 둘레 길이가 그대로 각도라서, 90도 = 파이/2 · 180도 = 파이 · 360도 = 파이 × 2. 그룹.회전.y의 0.003도 라디안(약 0.17도)입니다. 도를 쓰고 싶으면 도 × (수학.파이 / 180)으로 바꿔 넣어요.

식이 자리를 정하는 과정 (계산이 쉽게 12권 기준 — 한 권마다 30도)

  i = 0  →  0/12 × 한 바퀴 =   0도  (12시)
  i = 3  →  3/12 × 한 바퀴 =  90도  (3시)
  i = 6  →  6/12 × 한 바퀴 = 180도  (6시)
  i = 9  →  9/12 × 한 바퀴 = 270도  (9시)

같은 식인데 i만 달라서 각도가 달라지고, 각도가 달라서 자리가 달라집니다 — 계산 한 줄이 원 위 자리 하나예요.

코사인·사인의 정체 — 반지름 1짜리 원 위를 각도만큼 돈 점의 가로 좌표가 코사인, 깊이 좌표가 사인이에요. 복잡한 계산이 아니라 원 위 점의 좌표에 붙인 이름입니다. 몫은 -1 ~ 1 사이라, 반지름(8)을 곱해 진짜 크기로 키워요.

한 바퀴 돌며 보면 — (가로 몫, 깊이 몫)이 미끄러집니다

    0도 (1, 0)      45도 (0.7, 0.7)      90도 (0, 1)      180도 (-1, 0)

가로 몫은 1에서 0으로 줄고 깊이 몫은 0에서 1로 늘어요 — 부드럽게 미끄러집니다. 180도의 -1은 "왼쪽으로 1"이라는 뜻 — 음수 덕분에 15권이 원의 사방에 고루 서는 거예요.

네 번째 · 애니메이션

그룹 한 줄로 통째로 돌기

렌더러.애니메이션시작(() => {
  그룹.회전.y += 0.003
  렌더러.렌더링(장면, 카메라)
})

2주차에서는 책 15권을 각각 움직였는데, 이제 그룹 한 줄이면 끝이에요. 매 프레임 0.003씩 — 천천히 도는 회전초밥 벨트가 됩니다.

그냥 계속 더해도 괜찮아요 — 회전은 한 바퀴를 넘어도 알아서 이어집니다.

다섯 번째 · 창 이벤트 모아 두기

창 크기 대응 복습

창.이벤트걸기('크기변경', () => {
  카메라.화면비율 = 창.너비 / 창.높이
  카메라.투영갱신()
  렌더러.크기설정(창.너비, 창.높이)
})

매주 같은 습관 — 창 이벤트는 코드 맨 아래에 모아 둡니다. 다음 주에 여기에 클릭 이벤트가 하나 더 들어와요.

여섯 번째 · 내보낸 파일

ZIP을 열면 — 다섯 가지가 나옵니다

내서재.zip 을 풀면 —

  index.html      대문 · 뼈대 — 무엇이 있는지
  style.css       꾸밈 — 어떻게 보일지
  script.js       움직임 — 우리가 수업에서 쓴 바로 그 코드!
  KRthree.js      도구 상자 — 3D 한국어 사전
  books/          표지 이미지들 (cover-1.png …)

스튜디오의 [ZIP 내보내기]는 지금까지 쓴 코드를 진짜 웹사이트 폴더로 만들어 줍니다. 주소로 접속하면 서버는 약속된 대문 이름인 index.html부터 열고, index.html 안의 세 줄이 style.css · KRthree.js · script.js를 차례로 불러와요.

그래서 파일 이름을 바꾸면 안 됩니다 — 특히 index.html은 이 이름이어야 대문 역할을 해요.

마무리 · 웹에 올리기

오늘 만든 책장을 인터넷 주소로

1) 스튜디오 위쪽 [ZIP 내보내기] → 내려받은 ZIP 압축 풀기
   (index.html · style.css · script.js · KRthree.js · 표지 이미지가 들어 있어요)

2) https://neocities.org 접속 → [Sign up]
   - 사이트 이름(그대로 내 주소가 됩니다) · 이메일 · 비밀번호만 넣으면 가입 끝 (무료)
   - 가입 후 온 이메일의 인증 링크를 꼭 눌러 주세요

3) 대시보드의 [Upload] 버튼 → 압축 푼 파일들을 전부 올리기

4) https://내이름.neocities.org 접속 — 오늘의 책장이 인터넷에!

Neocities는 무료 정적 호스팅 — 올린 파일이 그대로 웹사이트가 됩니다. 매주 코드가 늘어날 때마다 같은 방법으로 다시 올리면, 주소는 그대로 두고 내용만 새로워져요.

books 같은 폴더째 올릴 때는 대시보드에서 [New Folder]로 books 폴더를 만들고 그 안에 표지 파일들을 올리면 됩니다.