three.js
3D 파일 형식용 JavaScript 라이브러리
무료 3D 라이브러리를 통해 WebGL, FBX, Collada 및 OBJ 파일 형식을 읽고, 쓰고, 렌더링하기 위한 오픈 소스 JavaScript API
three.js는 소프트웨어 개발자에게 WebGL 파일을 렌더링할 수 있는 기능을 제공하는 사용하기 쉬운 순수 JavaScript 3d 라이브러리입니다. three.js 라이브러리는 FBX, Collada 및 OBJ와 같은 다양한 파일 형식에 대한 로더를 제공하지만 데이터 가져오기 및 내보내기에 권장되는 형식은 glTF입니다. glTF 파일 형식의 가장 큰 장점은 매우 컴팩트하고 쉽게 전송할 수 있으며 매우 빠르게 로드할 수 있다는 것입니다.
라이브러리는 장면 생성, 3D 모델 로드, 텍스트 생성, 카메라 설정 선 그리기, 기하학적 큐브 생성, 장면에 큐브 추가, 장면 렌더링, 요소에 뷰포트 추가, 그리고 더 많은. three.js 라이브러리에는 다양한 카메라가 사용됩니다.
three.js 시작하기
three.js를 설치하는 가장 쉬운 방법은 npm을 사용하는 것입니다. 원활한 설치를 위해 다음 명령어를 사용해주세요.
Install three.js via NPM
NPM을 통해 three.js 설치
npm install --save three JavaScript를 사용하여 장면 만들기
오픈 소스 라이브러리 three.js는 자체 JavaScript 애플리케이션 내에서 큐브 회전을 위한 3D 장면 생성을 지원합니다. three.js로 무엇이든 표시하려면 장면, 카메라 및 렌더러가 필요합니다. 다른 카메라와 해당 속성을 사용하여 장면을 완성할 수 있습니다. 다음으로 렌더러 인스턴스를 사용하고 앱을 렌더링할 크기를 설정할 수 있습니다. 더 낮거나 더 높은 해상도를 유지할 수 있습니다. 마지막으로 HTML 문서에 renderer 요소(<canvas>)를 추가합니다. BoxGeometry를 사용하고 재료를 사용하여 색상을 지정하면 큐브를 쉽게 만들 수 있습니다. 그런 다음 장면에 삽입하고 필요에 따라 이동할 수 있는 메쉬가 필요합니다.
The open source library three.js has provided support for creating a 3D scene for spinning a cube inside their own JavaScript application. To display anything with three.js we require a scene, camera, and 렌더러. You can use different cameras and their attribute to complete the scene. Next, you can use a 렌더러 instance and set the size at which we want it to render our app. You can keep the lower or higher resolution. Lastly, you add the 렌더러 element (<canvas>) to your HTML document. You can easily create a cube by using BoxGeometry and using the material to color it. After that, you need a Mesh that can be inserted into the scene and moved according to your need.
The open source library three.js has provided support for creating a 3D scene for spinning a cube inside their own JavaScript application. To display anything with three.js we require a scene, camera, and renderer. You can use different cameras and their attribute to complete the scene. Next, you can use a renderer instance and set the size at which we want it to render our app. You can keep the lower or higher resolution. Lastly, you add the renderer element (<canvas>) to your HTML document. You can easily create a cube by using BoxGeometry and using the material to color it. After that, you need a 망사 that can be inserted into the scene and moved according to your need.
JavaScript를 통해 3D 모델 로드
오픈 소스 three.js 라이브러리를 통해 소프트웨어 프로그래머는 몇 줄의 JavaScript 코드로 자신의 응용 프로그램 내부에 3D 모델을 로드할 수 있습니다. 3D 모델은 수백 가지 파일 형식으로 제공됩니다. 모든 모델에는 다양한 목적, 기타 기능 및 다양한 복잡성이 있습니다. 먼저 로더가 있어야 하고 그 후에 장면을 로드할 수 있습니다.
다이어그램에 선 그리기
오픈 소스 라이브러리 three.js는 자체 JavaScript 애플리케이션 내에서 선이나 원 그리기를 지원합니다. 시작하려면 렌더러, 장면 및 카메라를 설정해야 합니다. 그런 다음 재질을 정의해야 하며 LineBasicMaterial 또는 LineDashedMaterial을 사용할 수 있습니다. 재료 후에는 일부 정점이 있는 형상이 필요합니다. 각 연속 정점 쌍 사이에 선이 그려집니다.
