• 티스토리 홈
  • 프로필사진
    KIMJAVAN
  • 방명록
  • 공지사항
  • 태그
  • 블로그 관리
  • 글 작성
KIMJAVAN
  • 프로필사진
    KIMJAVAN
    • 개발 (160)
      • 마크업 언어 (19)
        • HTML (7)
        • CSS (12)
      • 자바스크립트 (85)
        • JavaScript (34)
        • JS Library (6)
        • React (13)
        • threeJS (6)
        • TypeScript (2)
        • Next js (5)
        • Node JS (18)
        • webGL (1)
      • AI (4)
        • chat-gpt (4)
      • flutter (17)
        • dart (11)
        • flutter (6)
      • Sql (3)
      • PHP (4)
      • Python (2)
      • Git (4)
      • vscode (1)
      • 개발 도움 사이트 (7)
      • 작업기록 (1)
      • 오류 모음 (3)
      • 메모장 (7)
  • 방문자 수
    • 전체:
    • 오늘:
    • 어제:
  • 최근 댓글
      등록된 댓글이 없습니다.
    • 최근 공지
        등록된 공지가 없습니다.
      # Home
      # 공지사항
      #
      # 태그
      # 검색결과
      # 방명록
      • [threeJS] cos, sin, tan 함수를 사용해서 배치하기
        2023년 08월 07일
        • KIMJAVAN
        • 작성자
        • 2023.08.07.:58
        728x90

         

         

        cos, sin함수를 사용해서 x, z 좌표를 설정하는 이유

        card.position.x = 1 * Math.cos(angle);
        card.position.z = 1 * Math.sin(angle);

        원의 중심을 기준으로 일정 각도만큼 거리가 떨어져 있기 때문이다.

        각도가 중요하지 않고 거리만 사용할거면 그냥 상수 써도 되는데

        45도씩 증가 + 이동하면서 카드가 배치되어 있기 때문에 cos, sin 함수를 이용한다

        card.position.y = 1 * Math.tan(angle);

        position y값을 설정할 때에는 tan를 사용한다

         

         

        오답노트

        이번 모델링에게 각도를 부여했는데 원하는대로 되지 않았음.

        카드가 모두 앞면을 바라보게 설정되어있었는데, 시계바늘처럼 배치하고 싶은 경우 각각의 카드에 다른 값으로 rotation값을 줘야한다.

        card.rotation.y = (angle) + (- Math.PI / 4); card.rotation.y = i * (360 / 8) * (Math.PI / 180);

        상위의 코드에서 주석 처리한 이 부분은 카드를 같은 각도만큼 돌게한다.

         

        '자바스크립트 > threeJS' 카테고리의 다른 글

        [R3F] material 잘 정리되어있는 블로그  (0) 2024.08.21
        [R3F] Ambient Occlusion Map / alpha map  (0) 2024.08.21
        [threejs] 환경 맵 만들기 / 유리 질감 구현하기  (0) 2023.08.23
        [three.js] camera.position.set() / camera.rotation.set()  (0) 2023.08.11
        [threeJS] 최적화  (0) 2023.08.07
        다음글
        다음 글이 없습니다.
        이전글
        이전 글이 없습니다.
        댓글
      조회된 결과가 없습니다.
      스킨 업데이트 안내
      현재 이용하고 계신 스킨의 버전보다 더 높은 최신 버전이 감지 되었습니다. 최신버전 스킨 파일을 다운로드 받을 수 있는 페이지로 이동하시겠습니까?
      ("아니오" 를 선택할 시 30일 동안 최신 버전이 감지되어도 모달 창이 표시되지 않습니다.)
      목차
      표시할 목차가 없습니다.
        • 안녕하세요
        • 감사해요
        • 잘있어요

        티스토리툴바