★☆ 이 글은 Three.js journey 강의를 통해 작성하게 되었습니다 ☆★   대부분의 ThreeJS 프로젝트는 화면의 Fullscreen으로 띄워주는 경우가 많다!고런즉, Fullscreen 안배워볼 수 없겠쥬? 👇 기본 ThreeJS의 틀은 아래 게시글을 참고하세용 [ #1 ] ThreeJS의 기본 틀★☆ 이 글은 Three.js journey 강의를 통해 작성하게 되었습니다 ☆★ ThreeJS의 기본적인 틀 알아보자 호우!※ 물론 VanillaJS의 코드로..  🍀 코드코드 먼저 드리는게 인지상정// script.jsimport * as THREwhrmawn123.tistory.com  🍀 Resizing & Fullscreen Setting[ CSS Setting ]* { margi..

★☆ 이 글은 Three.js journey 강의를 통해 작성하게 되었습니다 ☆★   ThreeJS에서 제공하는 다양한 Controls 클래스에 대해 알아보자!👇 기본 ThreeJS의 틀은 아래 게시글을 참고하세용 [ #1 ] ThreeJS의 기본 틀★☆ 이 글은 Three.js journey 강의를 통해 작성하게 되었습니다 ☆★ ThreeJS의 기본적인 틀 알아보자 호우!※ 물론 VanillaJS의 코드로..  🍀 코드코드 먼저 드리는게 인지상정// script.jsimport * as THREwhrmawn123.tistory.com  🍀 Controls 사용법기존 Three 라이브러리를 사용했던 방법과는 달리,직접 Three 라이브러리 모듈 내의 클래스를 명시해주어야 합니다![ Import ]/..

★☆ 이 글은 Three.js journey 강의를 통해 작성하게 되었습니다 ☆★    PerspectiveCamera를 사용해서 Canvas위 마우스 위치에 따라 움직이는 카메라를 만들어보자!👇 기본 ThreeJS의 틀, 기본 애니메이션 적용 방법은 아래 게시글을 참고하세용 [ #1 ] ThreeJS의 기본 틀★☆ 이 글은 Three.js journey 강의를 통해 작성하게 되었습니다 ☆★ ThreeJS의 기본적인 틀 알아보자 호우!※ 물론 VanillaJS의 코드로..  🍀 코드코드 먼저 드리는게 인지상정// script.jsimport * as THREwhrmawn123.tistory.com  [ #3 ] Animation 적용 (feat. RequestAnimationFrame)★☆ 이 글은 ..

★☆ 이 글은 Three.js journey 강의를 통해 작성하게 되었습니다 ☆★   ThreeJS에서 제공하는 다양한 Camera 클래스에 대해 알아보자!👇 기본 ThreeJS의 틀은 아래 게시글을 참고하세용 [ #1 ] ThreeJS의 기본 틀★☆ 이 글은 Three.js journey 강의를 통해 작성하게 되었습니다 ☆★ ThreeJS의 기본적인 틀 알아보자 호우!※ 물론 VanillaJS의 코드로..  🍀 코드코드 먼저 드리는게 인지상정// script.jsimport * as THREwhrmawn123.tistory.com   🍀 Camera[ 📷 PerspectiveCamera ]가장 많이 사용하는 카메라 중 하나!원근감의 1인칭 뷰를 구성할 때 많이 사용하게 됩니다요!특징원근법을 사용..

★☆ 이 글은 Three.js journey 강의를 통해 작성하게 되었습니다 ☆★   ThreeJS의 Animation을 넣는 방법을 배워보자!!👇 기본 ThreeJS의 틀은 아래 게시글을 참고하세용 [ #1 ] ThreeJS의 기본 틀ThreeJS의 기본적인 틀 알아보자 호우!※ 물론 VanillaJS의 코드로..  ★☆ 이 글은 Three.js journey 강의를 통해 작성하게 되었습니다 ☆★  🍀 코드코드 먼저 드리는게 인지상정// script.jsimport * as THREwhrmawn123.tistory.com ThreeJS의 Animation의 방법에는 3가지 방법들이 있습니다!Date 객체 사용Three 라이브러리의 Clock 사용라이브러리 사용 (gsap)그러믄 하나씩 알아보쟈   ..

★☆ 이 글은 Three.js journey 강의를 통해 작성하게 되었습니다 ☆★   ThreeJS의 다양한 오브젝트들의 Transform 속성들을 변경해보자! Transform 속성이 뭐냐!?Position (오브젝트의 위치)Scale (오브젝트의 크기)Rotation (오브젝트의 회전)Quaternion (오브젝트의 회전) 🍀 PositionPosition은 Vector3의 타입을 가진다!Vector3는 Three.js의 3D 공간에서의 위치, 이동 벡터 등을 표현하기 위해 사용되는 클래스 Position 설정 방법을 미리 말하자면, 두가지 방법이 있다, x, y, z 하나씩 설정해주기 x, y, z 한번에 설정해주기// 하나씩 설정mesh.position.x = 1;mesh.position.y =..