아카이브

Three.js는 3차원 입체 구조를 2차원 캔버스를 통해 사용자에게 보여주는 역할을 합니다.이를 위해서는 몇가지 요소가 필요합니다. 우선 보여줄 사물들을 담아 둘 특정한 공간(Scene)이 필요합니다. 그리고 이 공간을 사용자가 화면으로 볼 시야를 제공해줄 카메라(Camera)가 있어야 하고, 이 공간을 카메라에 비치는 2차원 이미지로 바꿔주는 기능(Renderer)까지 있어야 사용자가 3차원 공간을 볼 수 있습니다.1. SceneScene은 3차원 물체들이 들어갈 공간 그 자체입니다. 미리 정의된 Scene( ) 객체를 통해 선언할 수 있습니다.import * as THREE from 'three';const scene = new THREE.Scene();Scene에는 Camera를 포함하여 광원, ..

방법1. npm 사용※ node.js가 필요합니다.Three.js를 사용하고자 하는 프로젝트 경로에 들어가 아래 명령어를 이용해 설치합니다.npm install --save three만약 추가적인 빌드 툴이 없다면, 함께 설치할 수 있습니다. (예시 - vite)npm install --save-dev vite방법2. CDN 사용npm과 빌드 툴을 이용해 패키지를 설치하는 대신, html 파일에 직접 어디서 패키지를 가져올 것인지 명시해주는 방법입니다.html 파일의 태그 바로 다음에 아래 태그를 추가합니다.코드 작성하기Three.js의 코드는 요소 안에서 작성합니다. 위치 설정을 용이하게 하기 위해 위치 설정은 absolute, left-0, top-0으로 합니다.이후 Three.js가 작성될 객체..

Three.js는 웹 환경에서 3차원 그래픽을 표현할 수 있게 해주는 자바스크립트 라이브러리중 하나입니다. 현재 오픈 소스 프로젝트로 깃허브에서 공개되어 있으며, 블렌더 등의 모델링 도구를 통해 만든 파일 또한 불러와 적용할 수 있습니다. Three.js에 대한 문서 및 예제들은 아래 링크에서 확인할 수 있습니다.https://threejs.org/docs/index.html#manual/en/introduction/Installation three.js docs threejs.org