눈으로 개발하는 블로그

이어서 추출된 glTF 정보를 .glb 파일(바이너리) 또는 .gltf 파일(JSON)로 다운로드하여 저장할 수 있게 헤보겠습니다. glTF 정보를 스크립트에서 다운로드하기 위해서는 URL.createObjectURL() 메서드를 사용하면 됩니다. URL.createObjectURL() 메서드에 대한 영문 설명은 다음과 같습니다. The URL.createObjectURL() static method creates a string containing a URL representing the object given in the parameter. 번역해 보면 URL.createObjectURL() 정적 메서드는 파라미터로 전달받은 객체를 가리키는 URL이 포함된 문자열을 생성합니다. URL.createOb..

이어서 우리가 만든 Object(객체, 3D 모델)을 glTF 포맷으로 추출해 보겠습니다. 1. import를 통해 GLTFExporter(GLTF익스포트) 모듈을 가져옵니다. GLTFExporter(GLTF익스포트)는 Scence(씬, 장면)이나 Scence(씬, 장면)에 있는 Object(객체)들을 glTF 포맷으로 추출합니다. import { GLTFExporter } from 'three/addons/exporters/GLTFExporter.js'; GLTFExporter(GLTF익스포트) 모듈의 실제 위치는 "\node_modules\three\examples\jsm\exporters\GLTFExporter.js" 입니다. 2. Scence(씬, 장면)이나 Scence(씬, 장면)에 있는 Obj..

이번에는 외부에서 만들어진 3D 모델을 로드하여 Scence(씬, 장면)에 추가해 보도록 하겠습니다. 3D 모델들은 다양한 파일 포맷으로 저장됩니다. 대표적인 3D 파일 포맷으로 OBJ, FBX, glTF, USD가 있습니다. 다양한 파일 포맷 중에서 three.js에서는 glTF 파일 포맷을 사용하는 것을 추천하고 있습니다. glTF(GL Transmission Format, GL 트랜스미션 포맷)는 응용프로그램에서 3D 장면과 3D 모델을 효율적으로 전송하고 로드시키는 방법에 대한 사양(규격, 명세)으로 로열티가 없는 오픈 소스 파일 포맷입니다. glTF는 3D Assets(3D 에셋, 3D 자산(모델 정보, 텍스처, 바이너리 데이터))의 파일 크기를 최소화하였습니다. 그리고 3D Assets(3D ..

이전에 만든 Controls에 아래의 three.js 사이트의 doc 처럼 SphereGeometry(스피어 지오메트리, 구 기하 도형)에 대한 속성들을 추가해 보겠습니다. (https://threejs.org/docs/index.html#api/en/geometries/SphereGeometry) 우선 Camera(카메라)의 위치(position)를 구 객체(sphere1) 앞으로 이동시키겠습니다. 현재 OrbitControls(오빗 컨트롤, 궤도 컨트롤)를 사용하고 있습니다. 그래서 항상 Camera(카메라)의 Focus Point(포커스 포인트, 초점)가 {x: 0, y: 0, z: 0} 입니다. console.log(controls.target); --> Vector3 {x: 0, y: 0, z:..

three.js 사이트의 doc에서 Geometry(지오메트리, 기하 도형)들의 설명을 보면 오른쪽 상단에 Controls가 있습니다. (https://threejs.org/docs/index.html#api/en/geometries/SphereGeometry) Controls에는 객체의 속성 값들이 표시되고 속성 값을 변경하면 객체가 변경됩니다. 이번에 위의 예제 화면처럼 Controls를 만들어 주사위 객체의 Material(머티리얼)에 있는 alphaTest(알파 테스트) 속성을 변경해 보도록 하겠습니다. 이전에는 Controls를 만들기 위해 dat.GUI를 사용하였으나 최근에는 lil-gui를 대체하여 사용하고 있습니다. three.js에서도 lil-gui를 모듈에 포함하여 배포하고 있습니다. ..

이번에는 배경이 투명하지 않는 주사위 이미지를 Material(머티리얼)의 alphaMap(알파 맵) 속성을 사용하여 이미지를 자르고 반투명하게 처리해 보겠습니다. 그리고 alphaTest(알파 테스트) 속성을 사용하여 처리되는 범위를 조정해 보겠습니다. (그림자는 자동으로 이미지에 맞게 처리됩니다.) 그럼 alphaMap(알파 맵) 속성에 대해 간단하게 알아보고 진행하겠습니다. alphaMap(알파 맵)은 흰색과 검은색 그리고 흰색과 검은색 사이의 회색(밝은 회색부터 어두운 회색까지)으로 구성된 이미지입니다. alphaMap(알파 맵)에 있는 흰색은 이미지 처리 시 원본 이미지가 그대로 투과됩니다. alphaMap(알파 맵)에 있는 검은색은 이미지 처리 시 원본 이미지가 투과되지 않습니다. (검은색과 ..

이번에는 주사위의 흰색 배경을 없애고 투명하게 처리해 보겠습니다. 주사위 이미지를 만든 PPT에서 주사위 틀의 도형 채우기를 "채우기 없음"으로 변경합니다. 그리고 각각을 PNG 파일로 저장합니다. (기존 파일명에 't'를 추가했습니다.) 프로젝트의 resources \ textures 폴더에 주사위 이미지 파일을 추가합니다. 추가된 주사위 이미지에 배경이 없는 것을 확인할 수 있습니다. (체크무늬가 투명처리되는 부분입니다.) Material(머티리얼) 배열에서 기존 이미지를 추가된 주사위 이미지로 변경하고 주사위 이미지의 체크무늬 부분이 투명하게 처리되도록 transparent 속성을 true로 추가합니다. (기본적으로 transparent 속성은 false입니다.) // 머티리얼 배열 const bo..

Texture(텍스처)란 객체의 색상과 질감을 표현하는 Material(머티리얼)에서 사용되는 이미지나 비디오를 말합니다. Texture Mapping(텍스처 매핑)이란 객체의 표면에 색을 칠하거나 이미지를 입히는 것입니다. 객체에 Texture Mapping(텍스처 매핑)하기 위해서는 Texture(텍스처)를 로드해야 합니다. three.js에서는 TextureLoader(텍스처로더)로 Texture(텍스처)를 로드합니다. TextureLoader(텍스처로더)는 이미지 (PNG, JPG, GIF, DDS) 또는 비디오 (MP4, OGG/OGV)를 로드합니다. TextureLoader(manager : LoadingManager) manager(매니저) : 로딩매니저입니다. 기본값 THREE.Defaul..

이전에 만든 육면체 객체의 와이어프레임을 선으로 그린 라인 세그먼트즈 객체를 육면체 객체와 결합해 보겠습니다. 객체들을 결합하기 위해서 Group(그룹)을 사용하면 됩니다. Group(그룹)은 객체들을 결합시켜 하나의 객체(Object3D)를 생성합니다. 1. 객체를 합치기 전에 육면체 객체(box1)와 라인 세그먼트즈 객체(box1WireframeLine)를 Scence(씬, 장면)에 추가되지 않게 주석처리합니다. // 장면에 육면체 객체 추가 //scene.add(box1); // 장면에 라인 세그먼트즈 객체 추가 //scene.add(box1WireframeLine); 2. 라인 세그먼트즈 객체(box1WireframeLine)의 라인 색상을 붉은색에서 짙은 녹색으로 변경하고 위치(position)..

three.js 사이트의 doc에서 Geometry(지오메트리, 기하 도형)들의 설명을 보면 생선 된 객체에 선이 포함되어 있는 것을 볼 수 있습니다. (https://threejs.org/docs/index.html#api/en/geometries/BoxGeometry) 위에 코드 예제를 보면 선에 대한 코드가 따로 없는데 말입니다. 우리가 이전에 코딩한 코드와 비교해 봐도 다를 게 없습니다. 그럼 뭐가 다를까요? 그것은 바로 WireFrame(와이어프레임)이 객체와 같이 표현된 겁니다. WireFrame(와이어프레임)이란 객체의 모양(구조)을 철사(Wire, 와이어)를 사용하여 동일한 모양(Frame, 프레임 - 틀, 구조)으로 만든 것입니다. 여기서 WireFrame(와이어프레임)은 Geometry..

이전에 방향성 조명인 DirectionalLight(디렉셔널 라이트)를 사용하여 객체를 비추도록 하였습니다. 좀 더 조명에 대해 알아보겠습니다. 가끔씩 DirectionalLight(디렉셔널 라이트)가 어디에 있는지 헷갈릴 때가 있습니다. 그래서 DirectionalLight(디렉셔널 라이트)를 시각화를 해주는 DirectionalLightHelper(디렉셔널 라이트 헬퍼)를 사용하여 어느 위치에서 어느 방향으로 빛의 비추어지는지 확인해 보겠습니다. DirectionalLightHelper(디렉셔널 라이트 헬퍼)는 빛의 위치를 평면으로 빛의 방향을 선으로 구성하여 시각화를 해줍니다. DirectionalLightHelper(light : DirectionalLight, size : Number, colo..

OrbitControls(오빗 컨트롤, 궤도 컨트롤)은 Scence(씬, 장면)의 중앙을 기준으로 카메라의 초점(position)에서 수직(상/하), 수평(좌/우)으로 회전하고 확대/축소를 할 수 있습니다. 그리고 카메라의 초점(position)도 이동할 수 있습니다. 1. import를 통해 OrbitControls(오빗 컨트롤, 궤도 컨트롤) 모듈을 가져옵니다. import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; OrbitControls 모듈의 위치는 node_modules에서 three의 package.json 파일을 보면 "./examples/jsm/*"이 "./addons/*"으로도 exports 된 것을 확인할 수 있..

객체들의 그림자가 보이기 위해서 그림자가 표현될 바닥이 필요합니다. 그래서 평면 객체를 사용하여 바닥을 만들겠습니다. Scence(씬, 장면)에 추가할 바닥으로 PlaneGeometry(플레인 지오메트리, 평면)을 생성합니다. PlaneGeometry(width : Float, height : Float, widthSegments : Integer, heightSegments : Integer) width(가로, 너비, 폭) : 평면의 가로길이입니다. 기본값 1 (입력하지 않으면 기본값으로 설정됩니다.) height(세로, 높이) : 평면의 세로길이입니다. 기본값 1 (입력하지 않으면 기본값으로 설정됩니다.) widthSegments(수평 세그먼트, 가로 분절 수) : 가로를 분할 면의 수입니다. 기본값..

조명을 사용하여 객체가 좀 더 입체적으로 보이게 하겠습니다. 조명을 사용하기 전에 객체들이 조명에 반응하도록 Material(머티리얼)을 변경해 줘야 합니다. 이전에 생성한 육면체 객체와 구 객체에는 조명에 반응하지 않는 MeshBasicMaterial(메쉬 베이식 머티리얼)을 사용하였습니다. const box1Material = new THREE.MeshBasicMaterial({color: 0x00ff00}); : const sphere1Material = new THREE.MeshBasicMaterial({color: 0x0000ff}); 그래서 조명에 반응하는 MeshStandardMaterial(메쉬 표준 머티리얼)을 생성하여 변경하겠습니다. MeshStandardMaterial(메쉬 표준 머티..

Camera(카메라)는 위치(position)를 설정하지 않으면 Scence(씬, 장면)의 중앙을 보게 됩니다. 그래서 Camera(카메라)의 위치(position)는 조정하여 객체가 입체적으로 보이도록 하겠습니다. 1. Camera(카메라)의 Z 위치가 커지면 Scence(씬, 장면)를 중심으로 카메라가 뒤로 이동합니다. Camera(카메라)의 Z 위치를 2로 설정합니다. // 카메라 Z 위치를 이동 camera.position.z = 2; Camera(카메라)의 Z 위치를 5로 다시 설정합니다. // 카메라 Z 위치를 이동 camera.position.z = 5; Camera(카메라)의 Z 위치는 Camera(카메라)를 생성할 때 설정한 near(카메라부터 가까운 거리)부터 far(카메라부터 먼 거리..

이전에 설명들인 것처럼 three.js를 개발하기 위해서 NPM과 빌드 도구(Node.js, Vite)를 사용하거나 CDN으로 가져(Import) 오거나 직접 js 파일을 다운로드해서 사용하는 방법이 있습니다. 최근에 NPM과 빌드 도구(Node.js, Vite)를 많이 사용하고 있는 것 같아서 Node기반으로 개발하도록 하겠습니다. 우리는 어떻게 3차원으로 볼 수 있을 까요? 우리는 눈으로 공간에 있는 사물을 볼 수 있습니다. 그리고 우리는 몸을 움직여 공간에서 사물의 앞/뒤, 좌/우, 위/아래를 볼 수 있습니다. 그래서 사물을 입체적(3차원)으로 볼 수 있습니다. 그런데 우리가 움직이지 못한다면 사물이 평면으로 보일까요? 그렇지 않습니다. 그 이유는 공간이 평면이 아니기 때문입니다. 사물이 공간에서 ..

three.module.js 파일을 다운로드하기 위해서는 Three.js 사이트에서 three.js-master.zip 파일을 다운로드하거나 GitHub에서 파일을 직접 다운로드하면 됩니다. three.module.js 파일만 사용할 거면 GitHub에서 파일을 직접 다운로드하는 것이 간편하고 빠릅니다. 다운로드하여 스크립트 모듈로 불러오기 1. Three.js 사이트(https://threejs.org/)에서 왼쪽 메뉴에 있는 download를 클릭하여 three.js-master.zip 파일을 다운로드합니다. 다운로드한 three.js-master.zip 압축 파일을 풉니다. 2. Three.js를 Script으로 불러와 개발하기 위해 폴더를 생성합니다. 저는 "C:\workspaces\webstud..

CDN에서 가져오기 1. Three.js를 CDN에서 가져와서 개발하기 위해 폴더를 생성합니다. 저는 "C:\workspaces\webstudys\myworld2" 폴더를 생성하였습니다. 2. Visual Studio Code의 메뉴 File(파일) > Open Folder...(폴더 열기)를 클릭하거나 Ctrl 키를 누를 상태에서 K, O를 이어서 누릅니다. (Ctrl + K, Ctrl + O) 그리고 "C:\workspaces\webstudys\myworld2" 폴더로 이동하고 "폴더 선택" 버튼을 누르면 폴더가 오픈됩니다. 보안을 위해 Trust(신뢰) 확인 창이 나타납니다. "Yes, I Trust the authors" 버튼을 누릅니다. 그리고 Welcome(시작) 창은 닫습니다. 3. inde..

Node.js 기반으로 개발하기 위해서 윈도우에 Node.js가 설치되어 있어야 합니다. 그리고 Visual Studio Code로 개발을 하겠습니다. 윈도우 Node.js 다운로드 및 설치에 대한 자세한 설명은 "윈도우 Node.js 설치 - Windows Node.js Download & Install - 14.x"를 참고하시기 바랍니다. Visual Studio Code 다운로드 및 설치에 대한 자세한 설명은 "Visual Studio Code 다운로드 및 설치 - 1.78 Download & Install - April 2023"를 참고하시기 바랍니다. Visual Studio Code에서 Node 패키지 생성에 대한 자세한 설명은 "VSCode Node 개발 - 패키지 생성 및 실행, npm i..

Three.js는 자바스크립트 3D 라이브러리(JavaScript 3D library)로 웹 브라우저에서 3D를 표현(Rendering, 렌더링)할 수 있게 해 줍니다. Three.js 사이트(https://threejs.org/) Three.js는 오픈 소스 프로젝트로 GitHub에 공개되어 있다. (https://github.com/mrdoob/three.js/) Three.js는 GitHub에서 다음처럼 설명하고 있습니다. JavaScript 3D library The aim of the project is to create an easy to use, lightweight, cross-browser, general purpose 3D library. The current builds only in..

IntelliJ Community Edition은 Ultimate Edition의 Artifacts에 있는 Web Application, JavaEE Application, EJB Application를 지원하지 않습니다. 그래서 직접 Maven의 package를 실행해줘야 합니다. 메이븐 프로젝트 패키징하기 - WAR 만들기 1. intelliJ IDE의 오른쪽에 있는 Maven를 클릭합니다. 2. Maven Lifecycle에서 package를 선택하고 마우스 오른쪽 버튼을 눌러 콘텍스트 메뉴에서 "Run 'test2 [package]'"를 클릭합니다. 그러면 target 폴더에 artefact가 출력됩니다. 로그를 보면 target 폴더에 test2 폴더를 생성하여 컴파일된 클래스들과 리소스들을 출..

메이븐 프로젝트 폴더 생성 1. intelliJ IDE의 메뉴 File > Project Structure를 클릭하거나 Ctrl + Alt + Shift + S 키를 누릅니다. 2. Project Structure 대화상자에서 Project Settings에 있는 Modules를 선택합니다. 메이븐 프로젝트에서 필요로 하는 폴더가 존재하지 않을 경우 Project Structure 대화상자의 오른쪽에 붉은색으로 필요한 폴더를 보여줍니다. src\main 폴더에 소스 폴더(java)가 없습니다. src 폴더에 테스트 소스 폴더(test)가 없습니다. src\test 폴더에 테스트 리소스(resources) 폴더가 없습니다. 메이븐 프로젝트에서 필요한 폴더를 생성하도록 하겠습니다. 3. java 소스 폴더를..

WebApp Maven Project(웹앱 메이븐 프로젝트) 생성하기 1. "New Project"를 클릭합니다. 2. New Project 대화상자에서 Generators에 있는 Maven Archetype를 선택합니다. 저는 프로젝트 이름(Name)을 "test2"로 입력하였습니다. 프로젝트 경로(Location)는 "C:\workspaces\studyj"로 하였습니다. (Git 연동은 다음에 하도록 하겠습니다.) JDK는 이전에 설치한 "Eclipse Temurin Version 1.8.0_372"를 선택하였습니다. ("Eclipse Temurin Version 1.8.0_372" 버전 JDK 설치는 여기(https://carrotweb.tistory.com/280)를 참고하시기 바랍니다.) 메이븐..

General Maven Project(기본 메이븐 프로젝트) 생성하기 1. "New Project"를 클릭합니다. 2. New Project 대화상자에서 프로젝트 이름(Name)을 입력하고 프로젝트 경로(Location), 개발언어(Language), 빌드 시스템(Build system), JDK를 선택하고 "Create" 버튼을 누릅니다. 저는 프로젝트 이름(Name)을 "test1"로 입력하였습니다. 프로젝트 경로(Location)는 "C:\workspaces\studyj"로 변경하였습니다. (Git 연동은 다음에 하도록 하겠습니다.) 개발언어(Language)는 "Java"로 선택하였습니다. 빌드 시스템(Build system)은 "Maven"를 선택하였습니다. JDK는 이전에 설치한 "Eclip..

IntelliJ IDEA Community 2023.1을 설치하면 자동으로 JBR-17.0.6가 설치됩니다. JBR-17.0.6이 설치된 경로는 IntelliJ가 설치된 폴더에 "jbr" 폴더입니다. (저는 "C:\workspaces\IntelliJ\jbr"입니다.) JBR은 JetBrains Runtime으로 OpenJDK 17.0.6을 기반으로 만들어졌습니다. 즉, JetBrains이 IDE(Integrated Development Environment, 통합 개발 환경)에서 사용할 목적으로 OpenJDK(Open Java Development Kit)를 가져와서 기능을 추가하고 개선한 JDK입니다. JetBrains Runtime에는 크롬 임베디드 기능과 향상된 클래스 재정의 기능이 포함되어 있습니..

IntelliJ IDEA 다운로드 1. JET BRANS 사이트(https://www.jetbrains.com/idea/)에 접속합니다. 현재 최신버전은 2023.1.2입니다. 2. 오른쪽 상단에 있는 Download나 페이지에 있는 Download를 클릭하면 Download IntelliJ IDEA 페이지로 이동합니다. 두 개의 버전을 다운로드할 수 있습니다. Ultimate는 유료 버전으로 입니다. 30일간은 무료로 이용한 할 수 있습니다. 이후에는 라이선스 구매해서 등록해야 사용할 수 있습니다. 현재 개인 라이선스 비용은 1년에 169달러입니다. Communiry Edition는 무료 버전입니다. Ultimate에 비해 지원 가능한 개발 언어, 프레임워크, 도구들이 제한되어 있습니다. 그러나 Jav..

Visual Studio Code의 Status Bar(상태 표시줄)에 시계를 만들어 추가하겠습니다. 시계 Extension 개발 1. Visual Studio Code의 메뉴 Terminal(터미널)에서 yo code 명령어로 개발할 시계 Extension 정보를 입력하여 Node 프로젝트를 생성합니다. (yo code 명령어에 대한 자세한 설명은 https://carrotweb.tistory.com/277를 참고하시기 바랍니다.) PS C:\workspaces\webstudys\extension1> yo code _-----_ ╭──────────────────────────╮ | | │ Welcome to the Visual │ |--(o)--| │ Studio Code Extension │ `--..

기본 Extension 개발 1. Extension 개발을 위해 Terminal(터미널)에서 yo code 명령어를 입력하고 Enter 키를 누릅니다. yo code _-----_ ╭──────────────────────────╮ | | │ Welcome to the Visual │ |--(o)--| │ Studio Code Extension │ `---------´ │ generator! │ ( _´U`_ ) ╰──────────────────────────╯ /___A___\ / | ~ | __'.___.'__ ´ ` |° ´ Y ` ? What type of extension do you want to create? (Use arrow keys) > New Extension (TypeScript)..

Yeoman과 VS Code Extension Generator 설치 1. Visual Studio Code의 메뉴 Terminal(터미널) > New Terminal(새 터미널)를 클릭하거나 Ctrl + Shift + `(backtick) 키를 누릅니다. Yeoman과 VS Code Extension Generator를 설치하기 위해 Terminal(터미널)에서 npm install -g yo generator-code 명령어를 입력하고 Enter 키를 누릅니다. npm install -g yo generator-code 설치가 진행됩니다. Extension 개발 1. Extension 개발을 위해 작업 폴더를 생성합니다. 저는 "C:\workspaces\webstudys\extension1" 폴더를 ..

Visual Studio Code에서 Node.js 기반의 프로그램을 개발하기 위해서 윈도우에 Node.js가 설치되어 있어야 합니다. 윈도우에 Node.js 다운로드 및 설치 윈도우 Node.js 다운로드 및 설치에 대한 자세한 설명은 "윈도우 Node.js 설치 - Windows Node.js Download & Install - 14.x"를 참고하시기 바랍니다. (Node.js의 2023년 4월 12일 버전은 18.16.0 LTS입니다.) Node 패키지 생성 1. Node를 위해 작업 폴더를 생성합니다. 저는 "C:\workspaces\webstudys\node1" 폴더를 생성하였습니다. 2. Visual Studio Code의 메뉴 File(파일) > Open Folder...(폴더 열기)를 클..